La meilleure façon de créer un défilement infini sur Webflow [Animation CSS]

Поделиться
HTML-код
  • Опубликовано: 6 авг 2024
  • Apprenez à créer un défilement infini sur Webflow en utilisant simplement du CSS. Que vous cherchiez à animer des logos ou des textes, ce guide étape par étape vous montrera comment réaliser des animations fluides et captivantes dans toutes les directions.
    ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
    📚 Au programme :
    - Création d'un défilement infini responsive sur Webflow.
    - Exploration des différentes méthodes pour réaliser cet effet.
    - Intégration de logos ou de textes dans votre animation.
    🔧 Snippet de code pour inverser l'animation :
    .reverse {
    animation-direction: reverse;
    }
    ❓ QUESTIONS ?
    Si vous avez des questions ou des commentaires, n'hésitez pas à les laisser ci-dessous. Nous y répondrons avec plaisir !
    👍 Aimez cette vidéo et abonnez-vous à notre chaîne pour ne rien manquer !
    ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
    ❖ TEMPS FORTS 🍿
    ◇ Introduction 00:00
    ◇ Les 3 options pour créer l'animation de défilement infini 00:24
    ◇ Tutoriel pour créer de A à Z l'animation de défilement de logo infini sur Webflow 01:02
    ◇ Comment faire l'animation avec du texte 03:48
    ◇ Comment inverser le sens de l'animation de défilement infini 04:32
    ◇ Conclusion & Questions 05:18
    ❖ DIGIDOP ACADEMIE 🎓
    ◇ Formation Figma : academie.digidop.fr/formation...
    ◇ Hors-série Webflow Editeur : academie.digidop.fr/formation...
    ❖ ARTICLE 📖
    ◇ www.digidop.fr/blog/comment-c...
    ❖ OUTILS 🔧
    ◇ Webflow : webflow.grsm.io/signup-webflo...
    ◇ Figma : www.digidop.fr/outils/figma
    ❖ RESSOURCES 🧠
    ◇ Académie : academie.digidop.fr/
    ◇ Blog : www.digidop.fr/blog/
    ◇ Outils : www.digidop.fr/ressources/outils
    ❖ CONTACT 👋
    ◇ Contact Digidop : www.digidop.fr/contact
    ◇ Instagram : / digidop.fr
    ◇ TikTok : / digidop.fr
    ◇ LinkedIn : / digidop
    ❖ HASHTAGS
    #webflow #animation #css
    Merci de nous suivre 💛

Комментарии • 33

  • @digidop
    @digidop  10 месяцев назад +3

    💡Petite correction : l'écart entre les listes (5:06) doit être géré avec du padding, et non pas des margins, afin que le transform de -100% ramène exactement à la position initiale.

  • @Kebbab.213
    @Kebbab.213 10 месяцев назад +1

    Merci les gars c’est précisément le genre de tutoriel qu’il nous faut ! Continuez c’est vraiment excellent

    • @digidop
      @digidop  10 месяцев назад

      Yeaaaaah ! Merci pour ton retour 🔥

  • @lucasclairet3527
    @lucasclairet3527 10 месяцев назад +2

    Top la vidéo ! 👍
    L'effet reverse est niquel sur les logos ! Il faut éviter par contre de l'appliquer à des textes pour l'accessibilité, pour que le texte défile toujours dans le sens de la lecture. Bonne vidéo Flo 👌

    • @digidop
      @digidop  10 месяцев назад +1

      Super tips d'accessibilité. Merci pour l'ajout, Lucas !
      (Content que la vidéo te plaise, j'ai suivi un bon article pour la faire 😉.)

  • @MalidorDAxel
    @MalidorDAxel 9 месяцев назад

    Génial ! Je ne connaissais pas cette méthode. Merci ☺

    • @digidop
      @digidop  9 месяцев назад

      Avec plaisir ! Merci pour ton retour 🤗

  • @stephenadjamagbo
    @stephenadjamagbo 5 месяцев назад

    Vraiment cool ce tuto. 🙏

    • @digidop
      @digidop  5 месяцев назад

      Merci pour ton retour ! 😀

  • @user-pd5te5mx1v
    @user-pd5te5mx1v 6 месяцев назад +2

    Super vidéo ! Merci beaucoup ! est-il possible d'ajouter du code pour arrêter l'animation au survol si par exemple on ajoute un bouton clicable dans le défilement ?

    • @lucasclairet3527
      @lucasclairet3527 6 месяцев назад +1

      Merci pour ton commentaire !
      Très bonne question ; tu peux ajouter ce bout de code pour faire ce que tu veux : (où .marquee est le composant parent et .marquee_list est la liste que tu dupliques)
      .marquee:hover .marquee_list {
      animation-play-state: paused;
      }

    • @digidop
      @digidop  6 месяцев назад

      Merci Lucas 😉

    • @user-pd5te5mx1v
      @user-pd5te5mx1v 5 месяцев назад

      Merci beaucoup @@lucasclairet3527 t'es le best !

  • @gamingspecialunity
    @gamingspecialunity 10 месяцев назад +2

    Merci pour la video ! (Et les commentaires pour les petits details ) C est un effet qui est vraiment sympa.
    Je voulais savoir concernant les animations qui sont réalises sur un site pour un client. C est quelquechose qui se facture oui bien c est integre à la conception du site par défaut.
    Si vous pouvez m'éclairer un peu s'il vous plaît.
    Sinon ce serait cool une video d'une animation sur comment on faire apparaitre un element (par exemple quand tu passes en hover sur le mot webflow, il y aurait le logo en animation qui pop et bouge suivant me deplacement de la souris sur le mot. C est certainement un bout de code et ce n est pas natif sur webflow. J ai plus le lien mais je pense que vous m'avez compris..enfin j espere ! En article de blog ca convient aussi 😊

    • @digidop
      @digidop  10 месяцев назад +2

      Avec plaisir !
      Je ne sais pas comment travaillent les autres, mais chez Digidop, les animations sont facturées (indépendamment du site à plat) en fonction de leur nombre et de leur niveau de complexité. Une animation au survol (hover) ne peut pas être facturée de la même manière qu'une animation avancée en JavaScript.
      Donc, tu as un prix pour la maquette + développement, avec un supplément en fonction du nombre et de la complexité des animations. Est-ce que ça répond à ta question ?
      _____
      Je vois - ajoutée à la liste ✅

    • @gamingspecialunity
      @gamingspecialunity 10 месяцев назад

      @@digidop Ça réponds très bien a ma question du coup ! Je vous remercie l'équipe pour le retour. À très vite pour la prochaine vidéo !

  • @Grapfy
    @Grapfy 10 месяцев назад +1

    Je vais faire joujou ! 🤓

    • @digidop
      @digidop  10 месяцев назад

      Avec ça, tu as de quoi !

  • @LauranneSaillant
    @LauranneSaillant 18 дней назад

    Hello ! Merci pour cette vidéo complète. Je l'ai bien suivie étape par étape mais me retrouve toujours avec un espacement entre les deux div listes, à quoi cela peut être dû svp ?

    • @digidop
      @digidop  18 дней назад

      Hello ! Avec plaisir. As-tu essayé avec la correction mise en commentaire ?
      « Petite correction : l'écart entre les listes
      ( 5:06 ) doit être géré avec du padding, et non pas des margins, afin que le transform de -100% ramène exactement à la position initiale. »
      C’est peut-être ça ? Tiens nous au courant si ça ne résout pas le problème !

  • @Rosie_Morville
    @Rosie_Morville 5 месяцев назад +1

    J’ai tellement galéré avec les animation natives de Webflow alors qu’un bout le CSS suffisait?
    Je suis au bout 😂😫

    • @digidop
      @digidop  5 месяцев назад

      Ahahah on te comprends…
      Oui, parfois, les choses sont plus simples avec du code 😅

  • @yilmaz.design
    @yilmaz.design 10 месяцев назад +1

    Peux tu faire une vidéo un peu plus poussée en essayant de refaire le même marquee animation dans le site retool ? Merci

    • @digidop
      @digidop  10 месяцев назад

      Comme sur la section "Connect to anything" du site retool.com ?

    • @yilmaz.design
      @yilmaz.design 10 месяцев назад

      @@digidop Oui voilà exactement

    • @yilmaz.design
      @yilmaz.design 10 месяцев назад

      ​@@digidopLeur site vient de changer mais j'y suis arrivé !

  • @k_tusha
    @k_tusha 4 месяца назад

    Hello, j'ai un pb, plus je diminue la taille de l'écran, plus les 2 listes se chevauchent, savez-vous pourquoi, svp ?

    • @digidop
      @digidop  4 месяца назад

      Hello,
      Tu as bien changé la configuration Sizing de ton div Wrapper ? (02:03 dans la vidéo)

    • @k_tusha
      @k_tusha 4 месяца назад

      je n'ai pas ce paramètre justement, la partie Sizing est absente bizarrement @@digidop j'ai Layout et après Spacing, pas de Sizing

    • @k_tusha
      @k_tusha 4 месяца назад

      ah punaise, j'ai rebooté Webflow et ça a réapparu ! thanks !

    • @hormur977
      @hormur977 3 месяца назад

      @@digidop Hello et merci pour cette top vidéo :) Par contre comme cette personne je n'ai pas la configuration "Sizing", peux-tu m'indiquer comment la faire apparaitre stp ? Merci !

    • @hormur977
      @hormur977 3 месяца назад

      Plus précisément la partie "Flexchild" n'apparait pas... 😕 @digidop