И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!
ДЕМО
ИСХОДНИКИ
HTML
Между тегами <head> </head> подключаем скрипты:
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>Устанавливаем саму div разметку нашей страницы:
<section id="bottle">
<article>
<h1>Заголовок</h1>
<p>Текст первого раздела</p>
</article>
<div class="parallax" data-velocity="-.3"></div>
</section>
<section id="story-freext">
<article>
<h1>Заголовок</h1>
<p>Текст второго раздела</p>
</article>
<div class="parallax" data-velocity="-.1"></div>
<div class="parallax" data-velocity="-.5" data-fit="525"></div>
</section>
CSS
Если у Вас уже есть сайт и там прописаны все его стили, то просто добавьте:
section {
min-height: 1000px;
position: relative;
width: 100% !important;
min-width: 1000px;
margin: 0;
padding: 0;
overflow: hidden;
}
section:nth-of-type(1){background:whitesmoke;height:1200px;}
section:nth-of-type(2){background:black;height:1600px;}
#story-freext>div:nth-of-type(1) {
background: url(../img/nike-bg.jpeg) 50% 0 no-repeat fixed;
margin: 0;
height: 1600px;
position:absolute;
width:100%;
top:0;left:0;
}
#story-freext>div:nth-of-type(2) {
background: url(../img/nike.png) 50% 0 no-repeat fixed;
margin: 0;
height: 1600px;
position:absolute;
top:0px;left:100px;
width:100%;
}
#bottle>div:nth-of-type(1){
background: url(../img/bottle.jpeg) 50% 0 no-repeat fixed;
margin: 0;
height: 1200px;
position:absolute;
top:0;left:0;
width:100%;
}
section h1{color:#4F9426;width:300px;font-size:35px;margin-bottom:14px;font-family: 'Roboto Condensed',sans-serif;}
section p{color:black;width:300px;font-family: 'Roboto',sans-serif;}
section article{position:absolute;top:240px;left:40px;width:300px;z-index:4;}
.parallax-item{position:absolute;z-index:5;top:40px;left:400px;}
jS
Делаем вызов скрипта:
$(document).ready(function(){
$('.parallax').scrolly({bgParallax: true});
});
