Parallax js with bootstrap

Question

I am trying to implement parallax effect in my code for that I am using parallax js. I want the images of my page to start moving with the data-scalar-x and data-scalar-y values as soon as I hover over them but they are not behaving that way. And I don't really know what's wrong with my code as I am using parallax.js for the first time.

The link to my Codepen is https://codepen.io/asinha/pen/BZQdxW.

$(document).ready(function() {
  //alert("hello");
  makeWinHeight();
});

var makeWinHeight = function() {
  var vh = $(window).height();
  $('#scene').height(vh);
  var tabs = vh / 2 + vh / 4;
  $('#tab a,#scene.col,img').height(tabs);
}

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

img {
  width: 100%;
  position: relative;
}

.image {
  padding: 2% 2%;
}

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

</head>

<body>
  <section id="scene" data-pointer-events="true" data-depth="1.00" data-origin-x="0.00" data-origin-y="0.00" data-scalar-x="100.00" data-sacalar-y="105.00" data-friction-x="0.05" data-friction-y="0.05">
    <div class="main">
      <div class="layer col-md-12 row tab">

        <a href="#">
          <div class="col-md-4 image">
            <img src="http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg">
          </div>
          <div class="col-md-4 image">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT67u-Nbax1CScuoXegUoVbDElmwMBr8viXk4nKo1pbgxqJEWxZSg">
          </div>
          <div class="col-md-4 image">
            <img src="https://www.w3schools.com/css/trolltunga.jpg">
          </div>
        </a>
      </div>
      <div class="layer col-md-12 row tab">

        <a href="#">
          <div class="col-md-4 image">
            <img src="http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg">
          </div>
          <div class="col-md-4 image">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT67u-Nbax1CScuoXegUoVbDElmwMBr8viXk4nKo1pbgxqJEWxZSg">
          </div>
          <div class="col-md-4 image">
            <img src="https://www.w3schools.com/css/trolltunga.jpg">
          </div>
        </a>
      </div>
    </div>
  </section>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
</body>

</html>

CarlosM · Accepted Answer · 2024-06-20 18:02:27Z

0

You need to get rid of the .main element or add the id to it.

answered Jun 20, 2024 at 18:02

CarlosM

798 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parallax js with bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related