jQueryで簡易的なパララックスサイトを作ってみましたが、うまくパララックスになりません。
修正点などあれば教えて頂けると幸いです。
このサイトを参考にした、というかそのままコピペしてみました。
http://lab-b.jp/2013/11/27/post-1095/
上記のサイトにはデモもないのでどういう動きをするかは不明です。
コピペして動かしてみましたが、何も動きに変化はありません。
[html]
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/top_style.css"> <link rel="stylesheet" type="text/css" href="css/flow_style.css"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script> var parallax = function(){ var st = $(window).scrollTop(); $('#content-bottom').css({ backgroundPosition: 'center ' + Math.floor(-st/10) +'px' }); $('#content-middle').css({ backgroundPosition: 'center ' + Math.floor(-st/5) +'px' }); $('#content-bottom').css({ backgroundPosition: 'center ' + Math.floor(-st/2.5) +'px' }); } parallax(); $(window).scroll(function(){ parallax(); }); </script> <title>ああああああ</title> </head> <body> <div id="content-bottom"> <div id="content-middle"> <div id="content-top"> <h2 class="hoge">ああああああああ</h2> </div> </div> </div> </body>
[CSS]
@charset "UTF-8"; /* CSS Document */ #content-bottom { background: url(../img/01.jpg) repeat-y fixed center 0; } #content-middle { background: url(../img/02.jpg) repeat-y fixed center 0; } #content-top { background: url(../img/03.jpg) repeat-y fixed center 0; }
回答1件
あなたの回答
tips
プレビュー