Les animations sur WordPress - avec Damien
0 likes159 views
This document is an agenda for a webinar on web animations in WordPress presented by Damien. The agenda includes: an introduction of Damien; discussions of the advantages and disadvantages of web animations, the composition of web animations, and examples of simple 2D, advanced 2D, and complex 3D animations; platforms for showcasing aesthetic websites; sources of inspiration and tools/libraries; and the team needed for animation projects. Live demos of animations will be included.
Les animations sur WordPress - avec Damien
- 1. Les animations Web sur WordPress - avec Damien
- 2. ©2020 Hissez Haut vos projets digitaux SOM-MER 1. Qui est Damien ? 2. Les avantages et inconvénients des animations web ? 3. Quelle est la composition d’une animation web ? 4. Animations simples 2D (CSS) + démo en live (sans bug 🤞) 5. Animations avancées 2D (CSS & JS, SVG) + démo en live (sans bug 🤞) 6. Animations complexes 3D (Canvas, WebGL, JS) + démo en live (sans bug 🤞) 7. Les plateformes de récompense des sites esthétiques 8. Les sources d’inspirations et outils / librairies 9. Les profils nécessaires pour vos projets d’animations 10. Liens complémentaires
- 3. Hissez-haut vos projets digitaux ! Le web repousse toujours plus loin et plus vite les barrières technologiques. https://eyes.nasa.gov/apps/mars2020
- 4. Hissez-haut vos projets digitaux ! Qui est Damien ? INTERVENANT
- 5. Hissez-haut vos projets digitaux ! Damien Chantelouve ● Lead web developer chez Pilot’in, fan incontesté de WordPress - depuis 2017 ● Cursus communication / design avant de devenir développeur ● Awwwards - Mention honorable - site Caelis ● MyGoodBarber - Beautiful App - App The Albion Public House ● French Design Index - Mention Site - Site The Albion Public House ● A l’initiative du Pilo’Press, une extension WP permettant l’intégration d’un site avec une haute personnalisation associé à un Design System adaptable à chaque projet. TOP 30 FRANCE de 2015 à 2020 des agences digitales
- 6. Hissez-haut vos projets digitaux ! Les avantages et inconvénients des animations web ANIMATIONS
- 7. Hissez-haut vos projets digitaux ! Les avantages et inconvénients des animations web 1. Capter l’attention de sa cible (Le saint-graal des publicitaires) - Cela permet de mieux guider le parcours utilisateur et également de motiver l’utilisateur à atteindre le but qu’on lui a fixé. AVANTAGE MAJEUR : Le Determann : Kebab, double cheddar, mayonnaise maison & oignons rouges
- 8. Hissez-haut vos projets digitaux ! Les avantages et inconvénients des animations web AVANTAGE MAJEUR : Ce but peut être : ● De la conversion 🖱 via la mise en avant d’un bouton pour conclure une vente. ● Marquer son esprit ✨ avec un site expérientiel ou simplement avec un effet marquant en jouant sur ses émotions pour qu’il se rappelle de votre marque / site / entreprise. ● Une meilleure lecture de l’information 🔍 via un scénario d’animations qui se déclenche en chaînes dans un ordre donné pour rendre l’information plus digeste et hiérarchisée. ● Embellir votre image de marque 💄 pour vous démarquer de la concurrence et avoir un vrai storytelling. Motiver l’utilisateur à atteindre le but qu’on lui a fixé 🖱 ✨ 🔍 💄
- 9. Hissez-haut vos projets digitaux ! Ça a l’air parfait ! 😍 Alors pourquoi on n’en met pas partout et tout le temps ?
- 10. Hissez-haut vos projets digitaux ! Les avantages et inconvénients des animations web 1. L’animation web est un paradox : - elle peut également nuire à l’expérience utilisateur qui était pourtant le but inverse recherché. DÉSAVANTAGE MAJEUR : Cela peut nuire dans certains cas : 1. Une cible non adaptée qui n’est pas assez sensible au monde du web de par son âge, son secteur d’activité, son environnement… et qui peut donc se retrouver perdue ou frustrée de ne pas comprendre ce qu’il se passe sous ses yeux. 2. Mauvaises performances ⚓ qui ralentissent le temps de chargement & d’interaction du site si mal pensées en amont et qui peuvent donc faire fuire un utilisateur. 3. L’excès ⚓ d’animations qui rend l’expérience encore plus confusante qu’initialement. Trop d’animations tue l’animation. C’est important de garder un certain contraste par rapport au reste du site, il faut savoir trouver un juste milieu. ��🌾 ⚓ Peut nuire à l’expérience utilisateur
- 11. Hissez-haut vos projets digitaux ! Quelle est la composition d’une animation web ? ANIMATIONS
- 12. Hissez-haut vos projets digitaux ! Quelle est la composition d’une animation web ? ● L’élément 🔴 Ca peut être un élément html ou un objet JavaScript. Exemple : Un élément html “button” ● La propriété 🔝 qui peut-être une propriété CSS, la valeur d’un objet JavaScript ou autre. Exemple : La propriété CSS couleur de fond (background-color) ● La durée ⌚ qui va être le temps que met notre animation entre l’état A et l’état B. Exemple : 0.3s ● Une courbe de vitesse 💨 (appelé easing) qui va définir si on veut que notre animation soit linéaire ou qu’elle s’accélère au début et/ou à la fin. Exemple : linéaire ● Un déclencheur 💥(appelé event) qui peut être un clic, un survol, un défilement du scroll, la visibilité à l’écran, un “custom event”… Il en existe beaucoup. Exemple : au clic �� �� Les différentes caractéristiques d’une animation web : �� ⌚ ��
- 13. Hissez-haut vos projets digitaux ! Quelle est la composition d’une animation web ? �� �� ÉTAT INITIAL ÉTAT D’ARRIVÉ ÉTAT DE TRANSITION ● Élément : bouton ● Propriété : couleur de fond rouge ● Durée : 0.3s ● Courbe de vitesse : linéaire ● Élément : bouton ● Propriété : couleur de fond verte ● Déclencheur : au clic
- 14. Hissez-haut vos projets digitaux ! Quelle est la composition d’une animation web ? ● transition - CSS : Feuilles de style en cascade | MDN ● animation - CSS : Feuilles de style en cascade | MDN ● @keyframes - CSS : Feuilles de style en cascade | MDN Documentation sur les propriétés CSS qui vont nous intéresser pour de l’animation web :
- 15. Hissez-haut vos projets digitaux ! Animations simples (CSS) NIVEAU 1
- 16. Hissez-haut vos projets digitaux ! Démo Changer le visuel des différents états d’un élément web (bouton) avec du CSS ● WP Customizer (Code CSS) : http://webinar-anim.pilot-in.net/wp-admin/customize.php?return=%2F wp-admin%2Fadmin.php%3Fpage%3Dedit-snippet%26id%3D2 ● Aperçu : http://webinar-anim.pilot-in.net/animation-simple ● Autres idées d’exemples à intégrer : Ideas for CSS Button Hover Animations
- 17. Hissez-haut vos projets digitaux ! Exemples (estimation temps de réalisation) 1h 30 min 1h
- 18. Hissez-haut vos projets digitaux ! Animations avancées (CSS & JS, 2D, SVG) NIVEAU 2
- 19. Hissez-haut vos projets digitaux ! Démo Changer la position et mettre en place un fondu au blanc sur les contenus texte du site lorsque l’on scroll à leur niveau avec du CSS et du JS : ● Code Snippets (Extension WP pour injecter code CSS & JS) : http://webinar-anim.pilot-in.net/wp-admin/admin.php?page=edit-snippet&id=2 &result=updated ● Contenu code (à importer dans Code Snippets) : http://webinar-anim.pilot-in.net/animation-avancee.code-snippets.json ● Aperçu : http://webinar-anim.pilot-in.net/animation-avancee-scroll ● Autres d’idées d’exemples à intégrer : On-Scroll Letter Animations
- 20. Hissez-haut vos projets digitaux ! Exemples (estimation temps de réalisation) 1 jour 1/2 jour 1/2 jour
- 21. Hissez-haut vos projets digitaux ! Animations complexes (3D, Canvas, WebGL, Shaders...) NIVEAU 3
- 22. Hissez-haut vos projets digitaux ! Démo Intégrer une animation 3D dans un site WordPress sur lequel on peut bouger l’angle de la scène avec la souris et zoomer dans la scène avec du JS : ● Code Snippets (Extension WP pour injecter code CSS & JS) : http://webinar-anim.pilot-in.net/wp-admin/admin.php?page=edit-snippet&id=2 &result=updated ● Contenu code (à importer dans Code Snippets) : http://webinar-anim.pilot-in.net/animation-complexe.code-snippets.json ● Aperçu : http://webinar-anim.pilot-in.net/animation-avancee-scroll ● Autres idées d’exemples à intégrer : Codrops WebGL Video Transitions with Curtains.js
- 23. Hissez-haut vos projets digitaux ! Exemples (estimation temps de réalisation) Plusieurs jours / semaines Plusieurs jours / semaines Plusieurs jours / semaines
- 24. Hissez-haut vos projets digitaux ! Les plateformes de récompense des sites esthétiques ANIMATIONS
- 25. Hissez-haut vos projets digitaux ! www.awwwards.com 60€/site www.frenchdesignindex.com gratuit www.webbyawards.com 435€/site www.thefwa.com 100€/site www.csswinner.com 9$/site www.cssdesignawards.com 50€/site Les plateformes de récompense des sites esthétiques PRIX DE SOUMISSION D’UN SITE SUR DIFFÉRENTES PLATEFORMES :
- 26. Hissez-haut vos projets digitaux ! Les sources d’inspirations et outils / librairies ANIMATIONS
- 27. Hissez-haut vos projets digitaux ! Les sources d’inspirations et outils / librairies Sources d’inspirations, veille : Dribbble - Discover the World's Top Designers & Creative Professionals Sources d’inspirations, veille : Awwwards - Sites Of The Day Sources d’inspirations, veille & codes d’exemple : Codrops Collective Archive Ma bible personnelle ❤
- 28. Hissez-haut vos projets digitaux ! Les sources d’inspirations et outils / librairies Librairie pour gérer des séquences d’animations complexes : GSAP Librairie pour gérer des séquences d’animations avancées : AnimXYZ Librairie pour gérer des séquences d’animations simples : AOS - Animate on scroll library
- 29. Hissez-haut vos projets digitaux ! Three.js – JavaScript 3D library Librairie pour animer de la 3D : Les sources d’inspirations et outils / librairies Librairie pour animer des éléments au scroll de manière fluide & avancée : Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects. Librairie pour animer des illustrations vectorielles : Lottie by AirBnb
- 30. Hissez-haut vos projets digitaux ! L’équipe nécessaire pour vos projets d’animations ANIMATIONS
- 31. Hissez-haut vos projets digitaux ! L’équipe nécessaire pour vos projets d’animations Développeur front-end Motion Designer Creative Developer Web Designer
- 32. Pour aller plus loin
- 33. Voir le replay Voir le replay Voir le replay Prospection e-mail Prospection LinkedIn Réaliser son CDC Voir le replay Voir la présentation Voir la présentation Outils : Prospectin Kapsr Lempod Outils : Prospectin Dropcontact Woodpecker Hunter Kapsr Emaillistverify ActiveCampaign Voir la présentation Outils : Mindmeister o2switch Monday Cahier des charges prêt à l’emploi Voir la présentation Outils : o2switch Monday Cahier des charges prêt à l’emploi Combien coûte un site ?
- 34. Tous nos outils magiques & astuces https://www.pilot-in.com/nos-outils-magiques/ Retrouvez tous les liens avec les versions gratuites et offres négociées 🎥 Tous nos prochains webinars : https://app.livestorm.co/pilot-in Toutes nos vidéos en ligne : https://bit.ly/youtube-pilotin 📩 Soyez au courant de tous nos prochains contenus premiums gratuits : https://www.pilot-in.com/nos-webinars/ (remplir le formulaire)
- 35. Agence de prospection digitale Experte WordPress
- 36. Croissance continue 13 ans d’histoire 2008 Julien Dereumaux lance son activité webmarketing #optimiste 2013 Lancement de la SAS Pilot’in #pilotine 2017 Rachat de Lyon Entreprises #cargo 2021 21 personnes dans l’équipage #vedette
- 37. 21 marins spécialistes ! Actuellement en plein coeur de Lyon (Place des Terreaux) Nos prochains locaux : 370m2 + terrasses et BBQ à 5 min de Bellecour & 100m de la piscine du rhône Associés Pilotes de clientèle Stratégie digitale Webdesign Développement WordPress Consulter les CVs des matelots Création de contenu vidéo et SEO Conseil avant-vente
- 39. Nos labels de qualité et récompenses Certifié agence Partner Certifié fournisseur solutions Partenaire France Certifié Facebook Ads Certifié Google Ads Récompense webdesign TOP 30 FRANCE de 2015 à 2020 des agences digitales
- 40. Ces organismes soutiennent Pilot’in au quotidien, au niveau de la RSE, de l’amélioration continue, du recrutement et de sa R&D. Nos partenaires & engagements
- 41. Innovation 6 ans de R&D sur WordPress Et de nombreux projets en cours et en prévision WordPress Pro Pilo’board Pilo’Press Contributeur actif WordPress Nos équipes contribuent à l’amélioration continue de WordPress. Nous publions en Open Source différents plugins et participons aux meetups et grands événements
- 42. Chiffres clés Plus de 250 clients heureux !
- 43. Notre offre
- 44. Création et refonte de sites WordPress & WooCommerce Maintenance de sites et TMA Accompagnement stratégie digitale et prospection digitale Création de contenu Articles Communiqués de presse Etudes de cas Interviews vidéo Formations en Entreprise Ecole Test utilisateur UX