Is There a Way to Blink Just one line of text?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Is there a way to make just one line of text blink or flash to grab attention
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Scott


In the presentation, create a Placeholder with two identical copies of the Text Widget. These two copies should only have the line of text that you want to blink.


For one of the Widgets, give it a lighter text color. For the second Widget, give it a darker text color.


For one of the Widgets, give it a duration of 2 seconds. For the second Widget, set a duration of 1 second.


In the Placeholder properties, change the Transition setting from None to Fade.


In this way you are able to create some sort of blinking effect to help the text stand out.


See sample at http://g.recordit.co/BYux32Scsw.gif created entirely with the Text Widget.

Thanks!
(Edited)
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb
Thanks for the response,

That's not quite what I'm after. I want more of a fast "Flashing" effect.
I have a place holder with 7 text widgets in it to basically scroll in a message, one word at a time.

You Are What Makes US Great  ThankYou!

Each word stays for 2 seconds, I want to make the Thank You stay for 6-10 seconds but flash quickly Maybe between black and white or 0%  transparency to 100% or show/hide... not sure but it needs to happen faster than 1 sec. 

Thank You!
(Edited)
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks for the further info Scott.
I was able to locate the presentation that you are working on. For the Thank You! to blink a bit faster you will need to replace the Text Widget with the HTML Widget and add the code below:


<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
.blink {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
</head>
<body>
<p class="blink" style="margin: 0px; text-align: center;"><span style="font-family: impact, sans-serif; font-size: 396px;"><strong><span style="line-height: 1;">THANK<br />YOU !</span></strong></span></p>
</body>
</html>



If you need to make changes to the font/size/color of the text, what you can do is:

1. Add the Text Widget and to the font size/color/styling of the text there.
2. On the top right corner, click on the "Source Code" button which looks like <>
3. Copy and paste all of the code
4. In the HTML Widget replace anything from style=" in the original code with this new code
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb
Thank You, That's what I need.  Just so that I understand, Can you edit the html in a text widget (add css, javascript etc.) or does it have to be done in an HTML widget?

In other words, could I have assigned thank you to a class and used css to style it from within the text widget ?

Thanks Again, I'm trying to wrap my head around all of this.  
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Scott,

Yes you can edit the HTML in the Text Widget - it is a bit limited though. There is a bit more freedom to customize on the HTML Widget. For example, the code that I've supplied requires adding the <p> class (the info is in the <style></style> tag) which lies in the <head></head> tags that is available from the HTML Widget.

Looking at the source of the text in the Text Widget is a quick way for you to style the font size/family/etc and then you can copy/paste it over to code in the HTML Widget.

However.. if you are able to do what you need to do on the Text Widget and the code view within it, feel free to share the steps also :)

Hannah
(Edited)
Photo of Scott Williams

Scott Williams

  • 594 Points 500 badge 2x thumb
Thank You Hannah,
I have a question about scheduling, but I will start another thread.
Thanks again!
(Edited)