Animer le chargement d'un site !
Вставка
- Опубліковано 22 лис 2024
- 🎓 Tous mes cours sur l'École du Web (si tu veux tous les suivre d'un seul coup) : www.ecole-du-w...
🎁 Tous mes cours sur UDEMY : liste-des-cour...
💻 Code source : codepen.io/Zir...
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designe...
Le lien du Discord : / discord
Ma chaine en Anglais :
/ @thewebschool
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/fo...
Abonne-toi à ma chaîne :
/ @ecoleduweb
Suis-moi sur Twitter :
/ ledesignerduweb
Si tu veux que je fasse des vidéos sur certains sujets dis le moi!
-----------------------------------------------------------------------------------------
🎓 Tous mes cours sur l'École du Web (si tu veux tous les suivre d'un seul coup) : www.ecole-du-web.net/
🎁 Tous mes cours sur UDEMY : liste-des-cours.com/
Merci pour le tuto ! J'avais comme d'autres les liens qui ne fonctionnaient plus mais en passant le z-index à -1 dans la classe fondu-out ça refonctionne !
Merci pour ce tuto de A à Z claire et concis.
Tu viens de gagner un abonné.
Merci pour la vidéo. Ce serait sympa que tu d fasses une sur les animations avec svg. Tu en as déjà parlé.
C'est vrai, il faut plus parler des SVG car ils ont beaucoup d'attributs spéciaux, merci pour l'idée Benji !
Pour stopper le loading de ton site web, tu peux aussi utiliser la touche "escape" en la spammant au loading du site ça va le stopper et rester sur ton loading, à tester si ça fonctionne aussi chez vous mais c'est ce que j'utilise habituellement lorsque
je code un loader sur un site.
Exactement ce que j’avais envie de voir, merci beaucoup !!
Excellent comme effet ! 👍
Super vidéo!!! Merci beaucoup, c'était simple, clair et concis!!
Bonne continuation.
Simple et efficace direct je m'abonne
c'est génial ton truc! merci beaucoup! ^^
Si vous ne voulez pas que l'animation se relance quand vous visitez une page du site puis lorsque vous revenez sur la page d'accueil par exemple, utilisez le sessionStorage.
Comme ceci par exemple :
const loader = document.querySelector('.loader');
window.addEventListener('load', () => {
if(sessionStorage.getItem('premierChargement') === null){
loader.classList.add('fondu-out');
} else {
loader.style.display = "none";
}
sessionStorage.setItem('premierChargement', 'done');
})
Merciii bon tuto,
Mais cette astuce impact mon carrousel tu serai pourquoi ?
You can use a variable, so the code will be like this.
Specifie the --var like this in the html
Style="--var: {any number you want depends on the amout of delay you want}"
Note: this shouuld be in every
Then you can do this.
.lettre {
Animation-delay: calc(0.1s*--var);
}
It seems more clean but I don't know :)
J adore! Merci pour ce tutoriel vraiment sympa 👍
Vraiment sympathique l effet..👍
Merci Enzo belle idée de tuto continue
Hahahahah mdr
Merci pour la vidéo c était super
Excellent, j'aime ces animations "PURES" je veux dire pure css ou pure JS ou les 2 en même temps mais sans librairie à charger. Je vais me faire ça sur un de mes prochains sites. Merci
Yes c'est ce qu'il y a de mieux en natif :)
Waouh je suis très content de vous
salut le #Le_Designer_du_Web j'aime bien tes vidéos car t'es super créatif.
J'aimerais faire une suggestion sur la partie :nth-child() du css, tu aurais puis faire avec du JS en utilisant les boucles pour ne pas trop se répéter.
bref, je sais que l'objet de la vidéo c'est pas de manipuler le JS mais c'est juste un indice pour ceux qui aimerais le faire.
Je voudrais utiliser la même animation pour afficher en alternance 3 mots (par exemple: mai, juin et juillet). Est-il possible ? Et comment passer de l'animation d'un mot à l'autre ? Merci.
Très sympa ! Merci ! 🙏😊👍
Génial la vidéo :)
Génial !
Slt trop cool ton tuto juste c quoi ton logiciel pour coder
Vs Code!
Salut, merci pour ce tuto de qualité ! J'ai juste une petite question, après que "fondu-out" soit terminé, je ne peux pas sélectionner les éléments que j'avais mis dans mon accueil, je me suis dit que c'est parce que "fondu-out" ne fait que cacher le loader, as-tu une astuce pour régler cela ?
Merci 👍
salut , comment vous avez resoudre un probleme merci de vous me renseigner
Quand on en arrive à ce point, c'est qu'il y a un problème :D
Bonjour Enzo, merci pour ce tuto très utile et instructif. Petite question cependant, j'ai intégré cette animation sur mon portfolio qui contient une page d'accueil assez longue, et quand on rafraichit, forcément l'animation est calée en haut. Comment faire pour faire remonter le scroll de la page en haut ou pour jouer l'animation qu'une seule fois quand on l'a déjà visiter... J'espère que tu me comprendra lol. Merci encore.
ScrollTo pour aller à un endroit, removeEventListener pour supprimer l'event.
@@EcoleduWeb AH mince, en effet, je n'y avais pas pensé, merci beaucoup pour ton retour
@@davenpaint tiens sinon un petit script pour éviter que l'animation se refasse si tu visites une page du même site et que tu reviens en arrière, le tout avec un petit sessionStorage :
const loader = document.querySelector('.loader');
window.addEventListener('load', () => {
if(sessionStorage.getItem('premierChargement') === null){
loader.classList.add('fondu-out');
} else {
loader.style.display = "none";
}
sessionStorage.setItem('premierChargement', 'done');
})
Pah Génial! Un grand merci! C'est exactement ce que je voulais faire! Je suis entrain de suivre ta formation sur Udemy et c'est vraiment parfait, je suis Web Designer en phase d'apprentissage JS. Bonne continuation!
Salut j'ai fais un chargement que je supprime également avec opacity 0, sauf qu'ayant mis un background prenant toute la taille de l'écran, et celui étant seulement opacity 0, il existe toujours et du coup on ne peux pas cliquer sur ce qui est affiché après le fade out...
Je sais pas si j'ai été clair ^^
Si tu sais comment m'aider, je suis preneur.
j'ai le meme souci
@@killianchemineau9481 Quand tu rajoutes la classes faite un z-index: -1; ça passera ta page en dessous de ta page d’accueil
Tuto propre
Superbe vidéo
bonjour et si on veux faire pareil mais sans JS ? jai un projet a effectuer ou je dois mettre un loading spinner mais sans utiliser JS :)
Hey j'ai pris un loader sur le site mais ça charge à l'infini
Ça ne s’enlève pas pourtant j’ai bien la même formule de js
Il s’agit d’une combination de tuto(le premier pour le loader en tant que tel et le tiens pour le faire disparaître mais rien à faire ça ne s’en va ps)
Bonjour, tu sais comment faire l'animation de chargement de gauche a droite mais en :hover ?
c'est carré !
Hello, merci pour le tuto.
Par contre sur mon site je ne peux pas le passer en fondu-out car sinon je n'ai plus accès aux liens qui sont sur l'image. Je suis obligé de le passer en display : none.
Une solution ?
Si le fondu se fait sur l'overlay ça ne devrait pas affecter les liens d'un autre élément ?
@@EcoleduWeb Même problème pour moi, la div reste invisible mais "cache" les éléments dernière elle malgré son opacité à 0. Et passer en display : none; fait perdre l'animation :/
@@Sobix Sur le code source dans la description cela fonctionne, c'est vraiment une manipulation basique.
Passe ton z-index en -1 par exemple dans la classe foudu.out ;)
meme problème
Super cours, je viens de voir que les 30 exercices css étaient offert alors que je viens de les acheter sur udemy 😭😖
Courage et merci, ça me donne la force de créer toujours plus de contenu 👍
@@EcoleduWeb J’adore tes 30 exercices html/css , je viens de prendre la formation front end complète sur Udemy
merci beaucoup
MERCI
Salut, je débute en js et j'utilise VS2012 sur un projet WebForm .. apparement la syntaxe utilisée dans ta vidéo n'est pas la même que celle que je dois utiliser ( ex : const pas reconnu), tu aurais une idée vers quoi je devrai me tourner? (Et du coup, j'ai l'animation qui tourne en boucle et je n'ai plus accès à mon site, surement du a l'évent dans le js ^^)
merci !
Hey, c'est surement la date de ton édtieur qui pose problème, la syntaxe des fonction fléchées est en place depuis 2015.
Je te conseille d'utiliser Visual Studio CODE pour le dev web. (gratuit).
Dis moi c'est mieux ;)
Merci beaucoup !
Avec plaisir !
Bonne idée de faire ce genre de vidéo et avoir le code à côté est une très bonne idée ça évite de perdre du temps et tu peux mieux prendre le temps d'expliquer ! Faire une vidéo courte de 5 minutes tous les jours est une bonne idée mais tu risque de te lasser ou de te restreindre qu'à des petits projets 🤔 en tout cas, même si je commente jamais, sache que tu as un fan xD j'apprends à coder depuis quelques temps et je prends beaucoup exemple sur toi ^^"
Petite idée de vidéo si ça t'intéresse : j'ai regardé une de tes vieilles vidéo ou tu met du Jquery dedans ( celle avec un header responsive qui apparaît ou disparaît quand on est en haut de la page) bref, je n'utilise pas de jquery car je suis tout juste en train d'apprendre le JS mais du coup, j'ai vraiment galerer à traduire ton code Jquery en JS.. ( et encore c'est pas parfait)
Bref l'idée serait de refaire ce genre de vidéo en faisant tout en JS ? Ça mettrait à jour ton contenu et aiderait les pauvre gens comme moi xD après bien sûr ce n'est qu'une suggestion !
Continue comme ça ! :)
Très bonne idée, je le rajoute à la liste !
Merci pour le message :)
C'est très dur de tenir 1 vidéo par jour en effet mais je vais tenter de le faire tout le mois de septembre.
Et demain il y a un projet plus conséquent qui arrive !
:0 Nice !
Bonjour, tout d'abord merci pour cette vidéo qui nous permet de comprendre ton code. J'ai tout fais à la lettre tout fonction sauf la dernière manipulation. J'ai revérifier le code et au chargement de la page, la page ne s'affiche jamais. Pouvez-vous m'aidez c'est pour mon portfolio.
Le code source est en description
:)
Salut le loader dure a l’infini j’aurais besoin de
ton aide
s'il vous plait, est ce que c'est possible sans JS ????
Malheureusement non !!!!
juste une question comment tu fait pour créer 10 span d'un coup ?
span*10 sous VSCode
@@EcoleduWeb ok j'ai bien vue mais pour que la page charge comme l'effet 3g par déffaut y'a un code pour faire ca ? car si la personne qui va sur le site a sa connexion normale et bien on ne voit presque pas l'animation
@@vince_-et7gc Il faut laisser tourner l'animation pendant x temps à l'aide d'un setTimeout par exemple
Bonjour j’ai un problème j’ai fait un site web mais quand je veux mettre cette animation sur une autre page que sur l’index je ne peut plus utiliser les bouton de ma barre de nav et ainsi que sélectionner du texte ps: cette page à une vidéo dessus je sais pas si c’est à cause de ceci. @Le Designer du Web
tout est presque bon mais ca charge a l'infinie pour ma part
Salut, avec exactement le même code CSS (mis à part le .accueil ou la plupart des params sont dans le body), ça marche mais pas pour lettre par lettre
Au niveau des nth-child genre ça veut pas marcher ça
Le code source est en description :)
Bonjour et merci pour vidéo très bien détaillée ! cependant j'ai une légère préoccupation: En modifiant le throttling (en mettant sur slow 3G), Ma page s'affiche toujours rapidement
est ce qu'il y'a autre méthode pour faire durer l'animation avant l'affichage du contenu du site ? merci d'avance :)
Salut j'ai un petit soucis l'animation ne disparait jamais ^^" voir elle m'est plusieurs minutes quelqu'un a une idée ??? je suis un Noob en HTML je début mes cours ^^ "
Personnellement j'ai bien suivi le tuto mais ça ne marche pas du tout...
Mes images restent au dessus du fond noir et le texte n'apparaît jamais.
Si tu peux m'aider...
Hello, as-tu testé avec le codesource en description ?
As-tu le même problème ?
@@EcoleduWeb Oui j'avais bien testé avec ton code en le recopiant mais adapté à mon site et ça ne marchais pas mais depuis j'ai résolu mon (mes 😂) problème(s).
Merci bien pour la rapidité de ta réponse et continue comme ça t'es vidéos sont top !
Rem's 38
@@Rems38 All right ! :)
@@EcoleduWeb J'ai le meme problème, vous auriez une solution ? ^^'
@@Ven0mHQ Le code source fonctionne, après je ne peux pas regarder l'implémentation de tout le monde au cas par cas ;)
pourquoi mon site quand je le mets en slow 3G sa se charge instantanément ?
Surement une question de cache
@@EcoleduWeb j'ai pas trop compris le terme cache .
je sais que il y'a un truc qui dit descactive le cache mais meme avec sa ne fonctionne pas ?
le tutoriel ne marche pas
Si
hj
First