Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Ламерские вопросы Как встроить CSS и JS в HTML?

Как встроить CSS и JS в HTML?


     18.12.2015    Ламерские вопросы    699

вопрос
Пожалуйста, помогите встроить CSS и JS в HTML. Сразу скажу, я в этом вообще ноль, но пару месяцев назад каким-то чудесным образом мне удалось это проделать самому, все работало. Сейчас попробовал снова и...никак, не помню каким образом мне удалось прикрутить ссылки.
Для объединения всего этого я воспользовался шаблоном, найденным в интернете:

Ссылка на то, что мне нужно сделать:
http://s-sd.ru/blog_studio_design/prostoj_effekt_parallaksa_dlya_izobrazheniya/
Ссылки на CSS и JS файлы:
JS - http://s-sd.ru/files/simple-effect-parallax-to-image/js/index.js
CSS - http://s-sd.ru/files/simple-effect-parallax-to-image/css/style.css
Картинка - http://patskot.com/dev/parallax/images/about.jpg
Как мне все это склеить?

Ответа пока нет


Комментарии пользователей (5)

Dron
3

Dron - 19 декабря 2015 00:11 - Юзер

Шаблон, который я использовал:
 <!DOCTYPE html>
<html>
<head>
  
</head>

<body>

<style>


</style>


</body>

</html>

scaver
6

119 | 17

scaver - 19 декабря 2015 01:48 - Юзер

Между <head></head> вставьте:


<link media="screen" href="{THEME}/css/style.css type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="{THEME}/js/index.js"></script>


Между <body></body> вставьте:


<section id="banner">
<div id="intro">
<h1>Заголовок</h1>
<p>Краткое описание.</p>
</div>
<img src="{THEME}/images/about.jpg" width="900" />
</section>


Файлы положите в шаблон:
abotut.jpg - папка images
index.js - папка js
style.css - папка css

Dron
3

Dron - 19 декабря 2015 02:02 - Юзер

Нет, вы не поняли! Нет возможности загрузить эти файлы и подключить все по-человечески. Нужно именно вшить эти файлы в один код. Прямые ссылки я оставил. Однажды я сделал это сам, но сейчас повторить не могу т.к я уже сказал, что я в этом ноль! Нужно все эти фалы соединить в один html-код.

scaver
6

119 | 17

scaver - 19 декабря 2015 03:14 - Юзер

ну между <head></head> используйте:
<style></style> в него вставляйте css из файла
<script type="text/javascript"></script> вставляйте код js из файла
между <body></body>

<section id="banner">
<div id="intro">
<h1>Заголовок</h1>
<p>Краткое описание.</p>
</div>
<img src="адрес картинки" width="900" />
</section>


Загрузите about.jpg на любой хостинг
Если это DLE используя раздел "Управление изображениями" загрузите картинку и укажите адрес в пути
<img src="адрес картинки" width="900" />

mastodontoff
5

106 | 26

mastodontoff - 19 декабря 2015 10:54 - Юзер

<!DOCTYPE html>
<html>
<head>

<style>
body {background: #000000 url('bg.jpg') no-repeat center top;}
#banner{ width: 840px;height: 350px;margin: 40px auto;overflow: hidden;position: relative;text-align: center;font-family: 'PT Sans', sans-serif;border: 13px solid rgb(222, 222, 222); background-color: rgb(243, 244, 239);z-index: 20;}
#banner img{position: absolute;top: 0; left: 0; z-index: 5;}
#intro{ position: absolute; height: 100%; padding: 100px 0; z-index: 10;text-align: center;-moz-box-shadow: inset 0 0 30px #333333; -webkit-box-shadow: inset 0 0 30px #333333; box-shadow:inset 0 0 30px #333333;}
#intro h1{text-align: center;width: 840px;margin: auto;text-transform: uppercase;color: #333333; font-size: 28px;}
</style>

</head>
<body>
<section id="banner">
    <div id="intro">
        <h1>Parallax Hover</h1>
        <p>Aenean lacinia bibendum nulla sed consectetur. <br/>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </div>
    <img src="http://patskot.com/dev/parallax/images/about.jpg" width="900" />
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    jQuery("#banner").mousemove(
        function(e){
            var offset = jQuery(this).offset();
            var xPos = e.pageX - offset.left;
            var yPos = e.pageY - offset.top;
            var mouseXPercent = Math.round(xPos / jQuery(this).width() * 100);
            var mouseYPercent = Math.round(yPos / jQuery(this).height() * 100);
            jQuery(this).children('img').each(
                function(){
                    var diffX = jQuery('#Parallax').width() - jQuery(this).width();
                    var diffY = jQuery('#Parallax').height() - jQuery(this).height();
                    var myX = diffX * (mouseXPercent / 1500);
                    var myY = diffY * (mouseYPercent / 1080);
                    var cssObj = {
                        'left': myX + 'px',
                        'top': myY + 'px'
                    }
                    jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
                }
            );
        }
    );
</script>

</body>
</html>

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы