Jump to content
Search Community

FERNANDO PUJOL

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by FERNANDO PUJOL

    Crossfade animation

    in GSAP

    Posted

    11 minutes ago, FERNANDO PUJOL said:

    hi i cant see my images  when i put the file in a browser?

     

     

    and  how to put 7 images in this code? can you help?

     

    thanks

    here is my codes

    <style type="text/css">
    <!-- 
     
    -->


    .one {
      height: 100vh;
      width: 100vw;
      background-image: url('Expo-maitrise-UQAM-88.jpg');
     background-size: cover;
      position: absolute;
    }

    .two {
     height: 100vh;
      width: 100vw;
      background-image: url('Alfred-Pellan-%20Femme%20sous%20influence%201999.jpg');
     background-size: cover;
        position: absolute;
      
    }

    .three {
       height: 100vh;
      width: 100vw;
      background-image: url('auras%20rouge.jpg');
     background-size: cover;
    }

    .z {
      z-index: 5;
    }

    .i {
      z-index: 3;
    }

    .p {
      z-index: 1;
    }

    #progress-bar{
      width: 75%;
      height: 5px;
      border: 1px solid white;
      border-radius: 2px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      z-index: 1000;
    }

    #progress-bar span{
      display: block;
      width: 0;
      background-color: white;
      background-color: rgba(255,255,255,.5);
      height: 5px;
    }

    </style>

    <script type="text/javascript">

    const images = document.querySelectorAll('.img');

    // Here is where the z-index is being set
    // from greatest to least
    images.forEach( function(e,i){
      e.style.zIndex = images.length+1-i;
    });


    let imagesAnim = new TimelineMax({onUpdate: progressBar});

    imagesAnim

    .to(images[0], 2.5, {scale:1.2}) 
    .to(images[0], 0.4, {autoAlpha:0}, '-=1') 
    .to(images[1], 2, {scale:1.2}, '-=1') 
    .to(images[1], 0.4, {autoAlpha:0}, '-=1')
    .to(images[2], 2, {scale:1.2}, '-=1') 


    function progressBar(){
      document.querySelector('#progress-bar span').style.width = imagesAnim.progress()*100+'%';
    }

    </script>
    </head>

    <body><div class= " Expo-maitrise-UQAM-88.jpg"></div>
      <div class= "  Alfred-Pellan-%20Femme%20sous%20influence%201999.jpg">  </div>
      <div class=  " auras%20rouge.jpg"></div>

    <div id="progress-bar"><span></span></div>

    </body>
    </html>

     

     

    can you see a major mistake that i did?

     

    thanks

     

     

×
×
  • Create New...