悬停时滚动链接文本 - 无尽的选取框效果

Question

I'm looking for a performant and also smooth solution for links that scroll their text inside of their inline-block box like a marquee effect.

 $(document).ready(function() { function scroll(ele){ var s = $(ele).text().substr(1)+$(ele).text().substr(0,1); $(ele).text(s); } scrollInterval = null; function startScrolling(e) { if (!scrollInterval) { scrollInterval = setInterval(function(){ scroll(e) },100); } } function stopScrolling(e) { clearInterval(scrollInterval); scrollInterval = null; } $(".mali").hover(function(){ startScrolling($(this)); }); $(".mali").mouseout(function(){ stopScrolling($(this)); }); $(".mali").mousedown(function(){ stopScrolling($(this)); }); });

 .mali { display: inline-block; background: black; color: white; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete.

My solution so far is something I actually found here on stackoverlow in another thread and tried to work with it.

Two problems though.

1.) As this is basically using an interval to loop through the single letters this effect is not very smooth. The effect is stuttering.

Has anyone an Idea on how to make this more smooth? Maybe in that case don't use this method at all and maybe use a CSS transition to animate the text?

2.) Does anyone have a clever solution on how to return to the initial state once I hover off? I want the effect on hover but when moving the mouse off the link it should animate back to the initial text state.

Thanks, Matt

Answer 1

2) You can save initial state and then just revert it:

 $(document).ready(function() { function scroll(ele){ var s = $(ele).text().substr(1)+$(ele).text().substr(0,1); $(ele).text(s); } scrollInterval = null; function startScrolling(e) { if (!scrollInterval) { $(e).data("text", $(e).text()); scrollInterval = setInterval(function(){ scroll(e) },100); } } function stopScrolling(e) { clearInterval(scrollInterval); scrollInterval = null; $(e).text($(e).data("text")); } $(".mali").hover(function(){ startScrolling($(this)); }); $(".mali").mouseout(function(){ stopScrolling($(this)); }); $(".mali").mousedown(function(){ stopScrolling($(this)); }); });

 .mali { display: inline-block; background: black; color: white; padding: 10px; transition: all .2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete.

1) As a smooth animation, i thought of this as a PoC. Maybe it will help you with further ideas.

 $(document).ready(function() { // Those global data could be stored in element's data. var indent = 0, width = 0, padding = 10; function scroll(ele){ // Every iteration decrease indent by value indent -= 1; // If is indent greater than or equal than real width // (width with padding) reset indent. if(-indent >= width+padding) indent = 0; // Aplly property $(ele).css("text-indent", indent); } var scrollInterval = null; function startScrolling(e) { if (!scrollInterval) { // Get text and real width let text = $(e).text(); width = $(e).width() $(e) // Set real width & height, so that container stays .width($(e).width()) .height($(e).height()) // Save text to data for reset .data("text", text) // Add 2 spans with text: // <span>text</span><span>text</span> // Where second span has defined padding on the left .html($("<span>").text(text)) .append($("<span>").text(text).css("padding-left", padding+"px")); resumeScrolling(e); } } function stopScrolling(e) { pauseScrolling(e); // Reset $(e) // Revert real text and reset indent .text($(e).data("text")) .css("text-indent", indent = 0); } function pauseScrolling(e) { clearInterval(scrollInterval); scrollInterval = null; } function resumeScrolling(e) { if (!scrollInterval) { // Every 30ms repeat animation. It must be at least 25x per second // so it runs smoothly. (So 1 - 40). scrollInterval = setInterval(function(){ scroll(e) },30); } } $(".mali").hover(function(){ startScrolling($(this)); }); $(".mali").mouseout(function(){ stopScrolling($(this)); }); $(".mali").mousedown(function(){ stopScrolling($(this)); }); $("#start").click(function(){ startScrolling($(".mali")); }); $("#stop").click(function(){ stopScrolling($(".mali")); }); $("#pause").click(function(){ pauseScrolling($(".mali")); }); $("#resume").click(function(){ resumeScrolling($(".mali")); }); });

 .mali { display: inline-block; background: black; color: white; padding: 10px; /* This could help, but you can't reset text-indent without animation. transition: all .1s; */ overflow: hidden; vertical-align: middle; } /* When you hover element, new span elements can't take pointer events, so your elements stays hovered. */ .mali span { pointer-events: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete. <br><br> <button id="start">Start</button> <button id="stop">Stop</button> <button id="pause">Pause</button> <button id="resume">Resume</button>

Idea behind this is:

• make element overflow:hidden; so no text will overflow
• set fix dimension
• duplicate text inside
• change text indent every x miliseconds (x < 40 so it is smooth, must be at least 25fps)
• when it overflows, reset it so it can be in infinite loop