Parallax Scrolling effect

Я пытаюсь создать базовый пример прокрутки параллакса с текстом и цветом; нет изображений. Однако эффект, похоже, не работает. Вот код:

<!doctype html>
<html>
<head>
<title>Parallax Scrolling</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
} 
#img1 { 
background: rgb(44,89,238) 50% 0 repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#img2 { 
background: rgb(252,151,20) 50% 0 repeat fixed; 
height: 1000px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
p {
height: 458px;
position: absolute;
top: 291px;
width: 100%;
font-size: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){


     var $window = $(window); 

     $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object
     $(window).scroll(function() {
     var yPos = -($window.scrollTop() / $bgobj.data('speed'));
     var coords = '50% '+ yPos + 'px';
     $bgobj.css({ backgroundPosition: coords });
     });
     });
     });

</script>
<body>
<section id="img1"><p>Hello</p></section>
<section id="img2"><p>Hello</p></section>
</body>
</html>

Я пытался редактировать CSS, но, похоже, ничего не работает. Пожалуйста помоги.

Источник

1 ответ

Решение

Есть несколько удобных JS-библиотек Parallax, которые могут помочь, взгляните:

Эффект прокрутки:

http://markdalgleish.com/projects/stellar.js/

Stellar полезен и прост, это может быть так же просто, как добавление data-stellar-ratio="" элементу, но его можно настроить с помощью jQuery, он написан на jQuery, поэтому для его использования потребуется jQuery.

Эффект движения гироскопа / мыши:

http://wagerfield.github.io/parallax/

Parallax.js также удобен, а также очень крут, хотя это не прокрутка Parallax, как вы упомянули, я думаю, вам все равно понравится. Параллакс написан на jQuery и JavaScript, поэтому jQuery не нужен.

Источник
Другие вопросы по тегам