GSAP - Infinite Textbanner: Unterschied zwischen den Versionen

Aktuelle Version vom 22. April 2021, 12:14 Uhr

aka Textscroller, Marquee Text

https://codepen.io/kholja/pen/JjEZBeN?editors=1111
https://greensock.com/forums/topic/10230-what-is-the-best-method-for-scrolling-text-horizontally-across-a-div/

https://codepen.io/kholja/pen/dyNQwLz?editors=1111

@@ Zeile 1: / Zeile 1: @@
+aka Textscroller, Marquee Text
   https://codepen.io/kholja/pen/JjEZBeN?editors=1111
-<syntaxhighlight lang="javascript">
+ https://greensock.com/forums/topic/10230-what-is-the-best-method-for-scrolling-text-horizontally-across-a-div/
-// Add Clone at the End
-// Scale text to at least 100% (container overflows and nowrap)
-// Move 100% text-width to the left
-$(window).resize(resizeHandler);
+ https://codepen.io/kholja/pen/dyNQwLz?editors=1111
-gsap.registerPlugin('ScrollTrigger');
-gsap.defaultEase = "power4.Out";
-var time = 12;
-// Set text animation
-function rollOne(){
-  //
-  var tlOne = gsap.timeline();
-  var $textOne = $(".text-one");
-  $textOne.css({width:"auto"});
-  var textWidth = $textOne.width();
-  console.log(textWidth);
-  $textOne.width(textWidth);
-  tlOne.to('.text-one',time,{
-    x:-textWidth,
-    ease: Linear.easeNone,
-    repeat: -1
-  });
-  return tlOne;
-}
-// Create a clone and roll it
-function cloneOne(){
-  $clone = $(".text-one").clone().appendTo(".banner-one");
-  $clone.addClass("clone");
-  rollOne();
-}
-function resizeHandler(){
-var progress = tlOne.progress(); //record timeline progress
-  tlOne.time(0).kill(); //rewind and kill the original tween.
-  //time = 5;
-  rollOne().progress(progress); //create a new tween based on the new size, and jump to the same progress value.
-}
-cloneOne();
-GSDevTools.create();
-</syntaxhighlight>

GSAP - Infinite Textbanner: Unterschied zwischen den Versionen

Aktuelle Version vom 22. April 2021, 12:14 Uhr

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge