Besoin d'aide pour un site web avec le système parallax Résolu

Question

Bien le bonjour,
je suis un débutant en web, et je dois réalisé un site web pour l'école.
J'ai décidé de faire un site avec un système parallax. J'ai téléchargé un template et je remplace les images et les couleurs dans dreamweaver. (Jusque la ca va )
J'aimerai faire en sorte que lorsque l'on se trouve sur la page d'accueil, il y'ai une image. Et qu'au fur et a mesure que l'on descende vers la page suivante, l'image se "désintègre" .
voici un exemple: http://www.englass.ru/ (avec le titre "englass" bleu) 
Si quelqu un savait m'aider ce serait génial merci. :)

prosthetiks · Answer

Je suis justement en train de concevoir un site dans le genre. Quelles notions de javascript as-tu ? C'est pas forcément l'effet le plus simple à mettre en place.

prosthetiks · Answer

Voila: 


<html>
<head>
  <title>
  </title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    body{height: 3000px;}
    .element{
      position: absolute;
      width: 50px;
      height: 50px;
      background: url('http://www.absyx.fr/sites/default/files/imagecache/Preset-1-2/imagefield/test-page/un-chat-avec-un-melon-croute-sur-sa-tete.jpg') no-repeat center center;
      opacity: .8;
    }
    .image1{
      left: 50px;
      background-position: 0px -50px;
    }
    .image2{
      left: 100px;
      background-position: -50px -50px;
    }

    .image3{
      left: 150px;
      background-position: -100px -50px;
    }

    .image4{
      left: 200px;
      background-position: -150px -50px;
    }

    .image5{
      left: 50px;
      background-position: 0px 0px;
    }

    .image6{
      left: 100px;
      background-position: -50px 0px;
    }

    .image7{
      left: 150px;
      background-position: -100px 0px;
    }

    .image8{
      left: 200px;
      background-position: -150px 0px;
    }

  </style>
</head>
<body>
  <div class="image1 element"></div>
  <div class="image2 element"></div>
  <div class="image3 element"></div>
  <div class="image4 element"></div>
  <div class="image5 element"></div>
  <div class="image6 element"></div>
  <div class="image7 element"></div>
  <div class="image8 element"></div>
</body>
<script type="text/javascript">
  var parralax = {
    elements: {
      image1: {
        item: $('.image1'),
        start: 1,
        end:   800,
        from: {top: 500},
        to: {top: -600}
      },
       image2: {
        item: $('.image2'),
        start: 1,
        end:   800,
        from: {top: 500},
        to: {top: -450}
      },
       image3: {
        item: $('.image3'),
        start: 1,
        end:   800,
        from: {top: 500},
        to: {top: -800}
      },
       image4: {
        item: $('.image4'),
        start: 1,
        end:   800,
        from: {top: 500},
        to: {top: -50}
      },
       image5: {
        item: $('.image5'),
        start: 1,
        end:   800,
        from: {top: 450},
        to: {top: -150}
      },
       image6: {
        item: $('.image6'),
        start: 1,
        end:   800,
        from: {top: 450},
        to: {top: -600}
      },
       image7: {
        item: $('.image7'),
        start: 1,
        end:   800,
        from: {top: 450},
        to: {top: -1500}
      },
       image8: {
        item: $('.image8'),
        start: 1,
        end:   800,
        from: {top: 450},
        to: {top: -200}
      }
    },
    _initialize: function(){
      var me = this;
      this.addEventsListeners();
      $.each(me.elements, function(key, value){
        //console.log(value);
        $.each(value.from, function(key1, value1){
          $(value.item).css(key1, value1 + 'px');
        });
      });
      return this;
    },
    basePosElement: function(element){
       $.each(element.from, function(key, value){
          $(element.item).css(key, value + 'px');
        });
    },
    addEventsListeners: function(){
      var me = this;
      $(window).scroll(function(e){
        me.moveElements(e.currentTarget.pageYOffset);
      });
    },
    moveElements: function(scrollY){
      console.log(scrollY);
      var me = this;
      $.each(me.elements, function(key, value){
        if(value.start < scrollY && value.end > scrollY){
          // Play anim
          var from = value.from;
          $.each(from, function(key1, value1){
            //console.log((value.end - value.start));
            var pourcentJoue = ((scrollY - value.start) * 100) / (value.end - value.start);
            if(value.to[key1] < from[key1]){
              var currentValue = from[key1]-(((from[key1] - value.to[key1]) * pourcentJoue) / 100);
            }else{
              var currentValue = ((value.to[key1] - from[key1]) * pourcentJoue) / 100;
            }
            $(value.item).css(key1, currentValue);
          });
        }else{
          me.basePosElement(value);
        }
      });
    },
    addElements: function(){

    }
  };
  var parralaxInstance = parralax._initialize();
</script>
</html>

Besoin d'aide pour un site web avec le système parallax

2 réponses

Votre réponse

Discussions similaires