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

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024

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

  • @digidop
    @digidop  11 месяцев назад +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 11 месяцев назад +1

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

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

      Yeaaaaah ! Merci pour ton retour 🔥

  • @lucasclairet3527
    @lucasclairet3527 11 месяцев назад +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  11 месяцев назад +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 10 месяцев назад

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

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

      Avec plaisir ! Merci pour ton retour 🤗

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

    Vraiment cool ce tuto. 🙏

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

      Merci pour ton retour ! 😀

  • @user-pd5te5mx1v
    @user-pd5te5mx1v 7 месяцев назад +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 7 месяцев назад +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  7 месяцев назад

      Merci Lucas 😉

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

      Merci beaucoup @@lucasclairet3527 t'es le best !

  • @Rosie_Morville
    @Rosie_Morville 6 месяцев назад +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  6 месяцев назад

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

  • @gamingspecialunity
    @gamingspecialunity 11 месяцев назад +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  11 месяцев назад +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 11 месяцев назад

      @@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 11 месяцев назад +1

    Je vais faire joujou ! 🤓

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

      Avec ça, tu as de quoi !

  • @LauranneSaillant
    @LauranneSaillant Месяц назад

    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  Месяц назад

      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 !

  • @yilmaz.design
    @yilmaz.design 11 месяцев назад +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  11 месяцев назад

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

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

      @@digidop Oui voilà exactement

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

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

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

    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  5 месяцев назад

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

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

      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 5 месяцев назад

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

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

      @@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 4 месяца назад

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