Preloader with non-functional zoom in | Sololearn: Learn to code for FREE!
Nouvelle formation ! Tous les codeurs devraient apprendre l'IA générative !
Essayez une leçon gratuite
0

Preloader with non-functional zoom in

I wanted to programm a preloader, which should disappear by "zooming in". When the page is loaded and after the zoom animation, the website should be shown. I thought I am on the right way with "loadsymbol.style.transform = 'scale(30)';" and program the transition in CSS, but it did not work out. Here is the code: https://www.sololearn.com/de/compiler-playground/WpRe7aE3ENTn

28th Feb 2024, 9:16 PM
David Mitterecker
David Mitterecker - avatar
9 Réponses
+ 2
David Mitterecker you can separate out the zoom-hide animation into a separate class and add that to your preloader via javascript. https://sololearn.com/compiler-playground/WSVRcUiqaR5E/?ref=app
29th Feb 2024, 11:24 AM
Bob_Li
Bob_Li - avatar
+ 1
why not just use css animation on the container? comment out your js and copy-paste this css: #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #142718; display: flex; justify-content: center; align-items: center; z-index: 999; animation:zoom-hide 1s ease-in 3s forwards; } .loader { transform: scale(1); transition: transform 2s ease-in; width: 70px; height: 70px; border-radius: 50%; border: 8px solid #444444; border-top: 8px solid darkorange; animation: spin 1.2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } @keyframes zoom-hide{ 0%{transform:scale(1); opacity:1;} 99%{transform:scale(100);opacity:0;} 100%{display: none;} }
29th Feb 2024, 12:37 AM
Bob_Li
Bob_Li - avatar
+ 1
also, you did not close your inner div properly. <div id="preloader"> <div class="loader"></div> </div>
29th Feb 2024, 12:46 AM
Bob_Li
Bob_Li - avatar
+ 1
@Bob_Li: That looks really nice, but the goal was to trigger the animation with Javascript, to ensure the website is really loaded. But since the loading time of many/my website usualy takes 1-3 seconds, this would be a good solution and is maybe less error prone. A compromise would be that you just show the background of the preloader, until the website is loaded. Thank you for your help!
29th Feb 2024, 10:58 AM
David Mitterecker
David Mitterecker - avatar
+ 1
I did it in a similar way, but your code makes more sense. I have to learn more JS xD My approach: https://www.sololearn.com/de/compiler-playground/W81McH1i2VFA Thank you!
29th Feb 2024, 11:45 AM
David Mitterecker
David Mitterecker - avatar
+ 1
Final result on webpage: https://leberzerroze.at/
29th Feb 2024, 11:59 AM
David Mitterecker
David Mitterecker - avatar
+ 1
Yeah... loading the page for the first time is slow, but I am happy. Next step are performance updates. Edit: okay you are right, i used chrome, but with every other browser it takes years.... Maybe I have to turn off lazy loading :D Or remove it again...
29th Feb 2024, 12:09 PM
David Mitterecker
David Mitterecker - avatar
0
wow, that's a very slow loading page..ūüėĀ.
29th Feb 2024, 12:02 PM
Bob_Li
Bob_Li - avatar
0
Adapted version for the website: https://www.sololearn.com/de/compiler-playground/W5oJw32sSaEY Implemented a hiding function for the preloader that triggers after 5 seconds, irrespective of whether the website is fully loaded. Had to add z-index: -999, because I was not able to click anything in Mozilla Firefox. Common problem?
29th Feb 2024, 5:45 PM
David Mitterecker
David Mitterecker - avatar