Help with animation behind text -...

User 2706435 Photo


Ambassador
444 posts

I am looking to do a lot of text, for slides.
Behind the text, I want that effect that at a reading pace, the text lights up, or there is a "star shine" behind it, and it goes left to right. There will be about 2 dozen quotes I'd like to randomly show. I am hoping there is some engine that can do this automatically without having to render a movie or a gif, or a way to do all the rendering easy for me.
User 187934 Photo


Senior Advisor
20,245 posts

Here's a plugin.
https://www.jqueryscript.net/text/progr … ation.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,245 posts

Easy implementation.
https://ericrohloff.com/coffeecup/ccfor … highlight/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

This looks interesting....

https://codepen.io/FrankieDoodie/pen/dgVGad
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,567 posts

Yes, it does. And if the various text chunks are given their own ID, the speed could be set differently for each of them, related to the length of each paragraph.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
5,123 posts
Online Now

Twinstream wrote:
This looks interesting....

https://codepen.io/FrankieDoodie/pen/dgVGad


Works fine on most browsers except IE of course, I have it on my site landing page for a while now

problem is that it loops and is quite fiffly to adjust speeds & text size and can get a bit boring for the visitor if they stay on the page too long,

but it is a nice effect for that initial view
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 244626 Photo


Registered User
811 posts

I think this one works in IE....

https://codepen.io/StephenScaff/pen/oLBqmw/
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,123 posts
Online Now

Wayan Jaya wrote:
Twinstream wrote:
This looks interesting....

https://codepen.io/FrankieDoodie/pen/dgVGad


Works fine on most browsers except IE of course, I have it on my site landing page for a while now

problem is that it loops and is quite fiffly to adjust speeds & text size and can get a bit boring for the visitor if they stay on the page too long,

but it is a nice effect for that initial view

mind you it should be easy enough to make a fall back for IE users that just shows the text without the moving background
something that looks for if the browser is IE then just show the text,, I am very rusty on that sort of stuff, and havent yet got it to weork, but it should work if the code is right and don't seem to be able to make it work just using SD
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 244626 Photo


Registered User
811 posts

You might look into this for IE....

https://github.com/TimPietrusky/backgro … t-polyfill
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,123 posts
Online Now

Twinstream wrote:
You might look into this for IE....

https://github.com/TimPietrusky/backgro … t-polyfill

Thanks for the suggestion Twinstream but

"Use it on any element, but keep in mind that the SVG text can't handle line breaks, so your content will be in one line."

Not much use for paragraphs :D
but thanks anyway, someone may find it useful if they want to use that shiny text thingy for a header for example,

Personally I don't give a fig about IE users, my site has a pop-up message that informs any IE user that they have an out of date browser and the site won't look or work properly, kindly go away and update the browser.

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.