jquery parallax.js not work
Question
I've been trying more than 10 times to use parallax.js jquery plugin. But it doesn't work. I don't understand what's going on with me.
plugin Site: http://matthew.wagerfield.com/parallax/
my demo work site: http://contact.themeshef.com/
Can anybody help me about how to use parallax js ? Thanks in advance!
Page source:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="container">
<div id="scene">
<div class="layer" data-depth="0.00"><img src="layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="layer6.png"></div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2017-06-07 04:53:52
You are using non-compiled version of library. either you should compile and use or you can download compiled version of parallax.min.js file from here or you can use cdn .
In this example i'm using CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container { width: 100%; height: 500px; } </style> </head> <body> <div id="container"> <div id="scene"> <div class="layer" data-depth="0.00"><img src="layer1.png"></div> <div class="layer" data-depth="0.20"><img src="layer2.png"></div> <div class="layer" data-depth="0.40"><img src="layer3.png"></div> <div class="layer" data-depth="0.60"><img src="layer4.png"></div> <div class="layer" data-depth="0.80"><img src="layer5.png"></div> <div class="layer" data-depth="1.00"><img src="layer6.png"></div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="parallax.js"></script> <script> var scene = document.getElementById('scene'); var parallax = new Parallax(scene); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.