Blinking text - Post ID 304169

User 2927179 Photo


Registered User
11 posts

Hello there! I would like to add a blinking text to my website. Can anyone help? Thanks in advance.
User 2699991 Photo


Registered User
5,077 posts
Online Now

You should consider the effect blinking text may have on your visitors, 1 some people don't like things like that, other may suffer from notion sickness and possibly trigger an attack of epilepsy, so the first thing to do is put a CSS property that disabled the custom CSS that is needed to make text blink (or any other element for that matter)


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 2699991 Photo


Registered User
5,077 posts
Online Now

The easy way is to set the opacity for the text to 0 then to set it to opacity 1 after a delay set a duration to whatever you think is effective set the iteration count to infinity and the fill move to both to prevent it from jumping about

I should have said in my previous post that if your visitor tells the browser that they don't want motion then the browser won't show it and will ignore the custom css
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 2927179 Photo


Registered User
11 posts

Thanks for the quick response. What is the iteration count?
User 2699991 Photo


Registered User
5,077 posts
Online Now

WM bv. BE0425 570 206 wrote:
Thanks for the quick response. What is the iteration count?

How many times you want it to blink
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 2927179 Photo


Registered User
11 posts

Ok, but under which menu can I find that?
User 2699991 Photo


Registered User
5,077 posts
Online Now

WM bv. BE0425 570 206 wrote:
Ok, but under which menu can I find that?

You have to write the custom CSS code in the text header, do you not know how to do that? I am out for another 20 mins if you need I shall post the CSS code needed to make flashing text.
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 2927179 Photo


Registered User
11 posts

It would be great if you could send me the code. Take it easy. It's not urgent.
User 2699991 Photo


Registered User
5,077 posts
Online Now

Hi again
Here is some simple CSS code to create a blinking text effect.
I know this code is a bit old fashioned nowadays but I think it is easier for newbies to look at and to follow and amend as necessary

First
give your text element an additional class name = to text-element-blinking

you can then style the text as you want in the normal way using Site Designer

Insert the following code (including the<style></style> tabs )
======================================

<style>
.text-animation-blinking { animation-name:blinking;
animation-duration: 1s;
animation-delay:0.5s;
animation-iteration-count:infinite;}


@keyframes blinking {from{opacity:0.5;}to{opacity:1;}}

</style>

===============================================
You can adjust the iteration count by replacing "infinite' with a number
you can adjust the duration and delay timings as you want

you can adjust the opacity 0.5 up or down (I gave the starting opacity 0.5 so that it doesn't completely appear then diss-appear.

I can let you know the user-preference code if you want to give your visitors that can't watch animations for whatever reason

I also have some more examples on a demo-website if you want other ideas how to animate for blinking text
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 2927179 Photo


Registered User
11 posts

Hi, I pasted the code into the Headcode of the element and changed the class name but without result.

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.