Skip to content

Instantly share code, notes, and snippets.

@noboru-i noboru-i/parallax.html
Last active Dec 23, 2015

What would you like to do?
パララックスをやってみた。 スクロールしていくと、文字が右側に移動していき、 一定以上スクロールすると、2枚目の画像が表示、 さらにスクロールすると、その画像がズームされる。
<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 id="next" style="position: fixed; left: 100px; top: 100px">
<div style="font-size: 32px">test message</div>
<script src=""></script>
$(window).on('scroll', function() {
var dy = $(this).scrollTop();
$('#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});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.