Parallaxe sur images

fabrice88

9 Feb 2019 à 12:13

bonjour,
j'ai suivie les instructions sur codepen pour faire un genre de parallaxe sur mes images.
Code Pen
le hic, c'est que sa ne fonctionne pas du tout, je n'ai aucun effet.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.content {
  background: #fff;
  height: 600px;
}

.parallax-container {
  position: relative;
  height: 500px;
}

.parallax {
  position: absolute;
  height: 200%;
  width: 100%;
  z-index: -1;
}
-->
</style>
<script type="text/javascript">
var parallaxElements = $('.parallax'),
    parallaxQuantity = parallaxElements.length;

$(window).on('scroll', function () {

  window.requestAnimationFrame(function () {

    for (var i = 0; i < parallaxQuantity; i++) {
      var currentElement =  parallaxElements.eq(i);
      var scrolled = $(window).scrollTop();
          
        currentElement.css({
          'transform': 'translate3d(0,' + scrolled * -0.3 + 'px, 0)'
        });

    }
  });

});
</script>

</head>

<body>
<section class="content">
  <h1>Scroll Do<span class="Style1">w</span>n</h1>
</section>

<section class="parallax-container">
  <div class="parallax" style="background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/The_Great_Wave_off_Kanagawa.jpg/1280px-The_Great_Wave_off_Kanagawa.jpg) center center / cover no-repeat;"></div>
</section>

<section class="content"></section>
</body>
</html>

CSS et mise en forme, CSS3

Parallaxe sur images