Comment créer une animation de site web défilant

Tu viens de lancer ton super magnifique brillant site internet ou bien tout simplement tu viens de lancer une formation, un nouveau produit ou article et tu souhaiterais l’annoncer sur tes réseaux sociaux préférés, partager cette information à un maximum de personnes ? D’une manière originale ? Attrayante ?

Découvre la plus simple manière de créer une animation de ton site web qui défile les sections de ses pages. Parfait pour montrer son site lors de son lancement !

CLIQUE SUR CETTE VIDÉO QUE JE T’AI CONCOQUETÉE AVEC SOIN OU LIS L’ARTICLE CI-DESSOUS ⬇️

Récemment, j’ai fait le design de mon site internet et pour l’annoncer sur Instagram, j’ai fait un design graphique sympa avec le site web qui défile. Et c’est ce que je vais t’apprendre à faire dans cette vidéo.

Si tu te dis, ok mais moi je n’ai pas encore de site internet, eh bien ne t’inquiète pas, c’est ce que je vais également t’apprendre à travers mes prochaines vidéos sur Squarspace.

COMMENT CRÉER UNE ANIMATION D’UN SITE WEB DÉFILANT ?

ÉTAPE 1: Capture d’écran de ton site internet

La première chose à faire est de télécharger l’extension chrome Full Page Screen Capture.

Une fois téléchargée, clique ajouter à chrome et ajoute l’extension.

À présent, tu remarqueras que ça a été rajouter à la barre des outils en haut de ton navigateur google chrome.

Tu vas ensuite sur ton site web et tu cliques sur l’icône de Full Page Screen Capture, ce dernier fera une capture d’écran de ton site web entier. Télécharge l’image en PNG.

🚨Si tu as un parallax, tu devras couper les parties grises qui apparaissent sur la capture d’écran par le biais de Canva ou Photoshop.

ÉTAPE 2: Création d’un mockup d’ordinateur

Alors pour cette étape, nous allons tout d’abord aller sur Canva, un outil facile d’utilisation pour réaliser des supers visuels sans être graphiste. Il est gratuit. Une fois inscrit, clique sur créer un design -> dimensions personnalisées -> 2000 sur 2000 pixels. Ensuite, tu vas à éléments et puis graphiques et tu tapes ‘mockup ordinateur’. Canva te propose pleins de modèles gratuits ou payans à 1€, tu en choisis un et tu le télécharges en PNG.

À présent, nous allons devoir utiliser photoshop, ne t’inquiète pas si tu n’es pas à l’aise avec cet outil, ce sera très simple. Tu peux t’inscrire pour un essai gratuit de 7 jours pour l’utiliser.

Nous allons grâce à la baguette magique sélectionner l’écran d’ordinateur puis le supprimer afin de créer un espace transparent à l’intérieur duquel nous allons ajouter notre animation.

Clique Fichier, exportation, exporter sous, PNG et enregistrer.

ÉTAPE 3: Keynote, l’outil magique !

À présent, tu vas utiliser keynote. Clique sur nouveau document et choisis la présentation blanche classique. Supprime ensuite le texte et le tableau y existants.

Tu vas maintenant à document en haut à droite et tu vas personnaliser la taille des diapos en 2000 sur 2000.

Puis tu vas chercher le mockup d’ordinateur que tu as créé sur phtoshop et le faire glisser dans le document. Tu feras pareil pour la capture d’écran de ton site web précédemment réalisée et tu vas la faire glisser également à l’intérieur de ton document keynote.

Voilà ce que ça donne en image:

Maintenant, on va devoir redimensionner la capture d’écran du site internet aux mêmes dimensions que l’écran du mockup de l’ordi.

Maintenant, va à format, disposition puis clique arrière. Tu verras que la capture d’écran s’est placée à l’intérieure de notre mockup d’ordinateur.

Il ne nous reste plus que rajouter une animation à notre mockup d’ordi et faire défiler la capture d’écran de notre site qui s’y trouve.

Clique sur ton écran, puis va à animer en haut à droite, action, ajouter un effet puis déplacement.

Zoom un peu et tu verras une ligne rouge en bas.

Tu vas cliquer sur le petit carré blanc au bout de la ligne à droite et le ramener vers le petit carré blanc tout à gauche de la ligne rouge.

Ensuite, tu vas le monter vers le haut jusqu’à l’endroit où tu souhaites t’arrêter.

Change la durée à sept secondes. Et clique sur aperçu pour visualiser ton animation.

Pour exporter, clique sur fichier, vidéo, change les deux numéros de passage de diapositive à 0, mets la résolution sur personnaliser et rentre les dimensions 2000 sur 2000. Clique sur suivant.

Bravo ! ton animation est prête. Tu peux la partager sur tes réseaux sociaux préférés et faire la promotion de tes lancements de produits.

J’espère que ce tutoriel t’a plu, qu’il a été clair. Laisse-moi un commentaire plus bas si tu le souhaites.

N’oublie pas de t’abonner à ma chaîne pour profiter de mes prochains tutos techniques !