Skip to content

Instantly share code, notes, and snippets.

@noboru-i

noboru-i/parallax.html

Last active December 23, 2015 14:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save noboru-i/6651013 to your computer and use it in GitHub Desktop.
Save noboru-i/6651013 to your computer and use it in GitHub Desktop.
Download ZIP
パララックスをやってみた。 スクロールしていくと、文字が右側に移動していき、 一定以上スクロールすると、２枚目の画像が表示、 さらにスクロールすると、その画像がズームされる。
Raw
parallax.html
<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