Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
パララックスをやってみた。 スクロールしていくと、文字が右側に移動していき、 一定以上スクロールすると、2枚目の画像が表示、 さらにスクロールすると、その画像がズームされる。
<html>
<head>
</head>
<body>
<div style="height: 2200px">
<div id="wrap" style="position: fixed; left: 0px; top: 0px; height: 2000px; width: 500px;">
<div><img id="img1" src="bg01.jpg"></img></div>
<div><img id="img2" src="bg02.jpg"></img></div>
</div>
<div id="next" style="position: fixed; left: 100px; top: 100px">
<div style="font-size: 32px">test message</div>
</div>
</div>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$(window).on('scroll', function() {
var dy = $(this).scrollTop();
console.log(dy);
$('#next').css({left: 100+dy/2});
if (dy < 400) {
$('#wrap').stop().animate({top: '0px'});
} else if (dy > 400 && dy < 800) {
$('#wrap').stop().animate({top: '-1080px'});
$('#img2').stop().animate({zoom: 1});
} else if (dy > 800) {
$('#wrap').stop().animate({top: '-1080px'});
$('#img2').stop().animate({zoom: 2});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment