28111 sujets

CSS et mise en forme, CSS3

Parallaxe sur images

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>
Sujet clos
Aller à