FERNANDO PUJOL
FERNANDO PUJOL's Achievements
0
Reputation
-
Ok will do. After my shift thanks
-
Thanks for the tips. Yes im sort of new To complicated CSS. How do i load Gsap.and where do i put it? 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
-
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