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>

"But it doesn't work". What is the exact problem? Please provide more information about the misbehaviour. — Fabian S., Jun 07 '17 at 06:12

score 2 · Accepted Answer · answered Jun 07 '17 at 04:53

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>

score 0 · Answer 2 · answered Feb 28 '23 at 10:12

For Laravel only

Add the below line before Creating a new instance of the Parallax class.

import Parallax from "parallax-js";
window.Parallax = Parallax;

Explanation:

This code imports the default export from the "parallax-js" module and assigns it to a variable named Parallax. It then assigns the value of Parallax to a property of the global window object also named Parallax. This allows the Parallax variable and any functions or properties associated with it to be accessed globally, which can be useful in cases where multiple scripts need to interact with the same Parallax instance or configuration.

The "parallax-js" module is a JavaScript library that provides a simple way to create parallax effects on web pages, where background images move at a different rate than the foreground content as the user scrolls. The library provides an object-oriented interface for creating parallax instances and defining their behavior, and it can be used with any HTML element or image.

Overall, this code is likely used in a web development project that requires the use of the Parallax library, and it makes the library's functionality available to other scripts on the same page.

jquery parallax.js not work

2 Answers2