🎓 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/

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'); })

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é.

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 !

Exactement ce que j’avais envie de voir, merci beaucoup !!

Simple et efficace direct je m'abonne

Excellent comme effet ! 👍

Super vidéo!!! Merci beaucoup, c'était simple, clair et concis!! Bonne continuation.

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.

c'est génial ton truc! merci beaucoup! ^^

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 👍

Waouh je suis très content de vous

Vraiment sympathique l effet..👍

Merci Enzo belle idée de tuto continue

Merci pour la vidéo c était super

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.

Génial la vidéo :)

Très sympa ! Merci ! 🙏😊👍

Génial !

Tuto propre

MERCI

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 ! :)

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

Superbe vidéo

c'est carré !

:0 Nice !

Quand on en arrive à ce point, c'est qu'il y a un problème :D

Hey j'ai pris un loader sur le site mais ça charge à l'infini

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 :)

merci beaucoup

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.

Merciii bon tuto, Mais cette astuce impact mon carrousel tu serai pourquoi ?

Merci beaucoup !

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 ?

Super cours, je viens de voir que les 30 exercices css étaient offert alors que je viens de les acheter sur udemy 😭😖

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 👍

Ç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)

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.

Slt trop cool ton tuto juste c quoi ton logiciel pour coder

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.

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 !

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 :)

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...

Bonjour, tu sais comment faire l'animation de chargement de gauche a droite mais en :hover ?

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.

tout est presque bon mais ca charge a l'infinie pour ma part

Salut le loader dure a l’infini j’aurais besoin de ton aide

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

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

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 ^^ "

s'il vous plait, est ce que c'est possible sans JS ????

juste une question comment tu fait pour créer 10 span d'un coup ?

pourquoi mon site quand je le mets en slow 3G sa se charge instantanément ?

le tutoriel ne marche pas

hj

First