Viewing Fade Text In and Out

Fade Text In and Out



User: Les C. 11 years ago
Does anyone have any code for the HTML widget?

Thanks.


L C
User: Roddy 11 years ago
Somewhere in this forum is a demo of this but who knows where.

Here's a test page showing the code and where it goes.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 11 years ago
Dear Roddy,
Fantastic! Elegant. Thanks.

Two follow up questions for you:
1. How do I set a delay between quotes?
2. How do I center the quotes in the text box?

Much appreciated.

L C
User: Roddy 11 years ago
Add "text-align:center" to the styles like this…

p.quotes {font: 20px 'Trebuchet MS', verdana, sans-serif;color:#FF0000;margin:0; padding: 0;text-align:center}

The timing is in the javascript…

.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);

The times are expressed in thousands of a second. To keep the text in view longer increase .delay to, say, 5000 for 5 seconds
Increase the fadeIn and fadeOut times to have a longer delay between paragraphs.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 11 years ago
Dear Roddy,
Appreciate the follow up.

The centering code works fine.

What I want to do is have 'dead space' delay—a fourth timed component—between a quote fading out and the next one fading in.

How do I add that?

Thanks,

L C
User: Roddy 11 years ago
Try adding a paragraph with no content like this…

<p class="quotes"></p>

… between each "real" paragraph.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 11 years ago
Thanks, Roddy. That is a creative solution :)

L C
User: Roddy 11 years ago
That's the product of a fractured and distorted mind!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 11 years ago
Here's a widget to fade headings…

http://everwebcodebox.com/widgetbox/tooltips-links/fade-text.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 11 years ago
Three follow up questions for a new web page:

1. What is the code I use to set a specific typeface? I tried:

font-style:light;

but the displayed font remained unchanged. (I am using a font family that has over a dozen typefaces, such as Light, Ultra Light, Extra Bold, etc.)


2. Is there a way to have different quotes with different features? For example, I would like a first quote/sentence to appear and remain (without the fade) to later to be followed by a second quote/sentence. Then both fade out to the next quote.


3. How to I have the quotes run through a list and stop (and display) on the final quote?


Thanks,

L C

Last edit 11 years ago


Post Reply
You must login or signup to post.