|
|
| Zeile 2: |
Zeile 2: |
| | https://codepen.io/kholja/pen/JjEZBeN?editors=1111 | | 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://greensock.com/forums/topic/10230-what-is-the-best-method-for-scrolling-text-horizontally-across-a-div/ |
| − | <syntaxhighlight lang="javascript">
| |
| − | // 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>
| |
