Flickering Animation with CSS and /or Javascript

Question

0.00/5 (No votes)

See more:

Hello,

I am trying to figure out for hours now how to create a "flickering" text animation as you can see in the examples:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/[^]

http://www.served-mcr.com/[^]

Could someone please explain with which Javascript-Plugin this works or if there is a CSS-only (ideal) solution?

Thanks a lot in advance.

Best regards

Posted 26-Nov-13 6:33am

Member 10427643

Add a Solution

Comments

Sergey Alexandrovich Kryukov 26-Nov-13 12:40pm

Nobody likes flicker, it makes people nervous. The animation in first site is not really flickering, but it has some of flicker-like irritation properties. Wouldn't you like to design something better?
—SA

Member 10427643 26-Nov-13 12:44pm

Thank you for your comment. The question was not about an evaluation of the aesthetics or design choice. It was simply about the technical implementation of this effect. Any idea how to get this done? Thanks for your advice.

Sergey Alexandrovich Kryukov 26-Nov-13 13:15pm

I understand what the question is about, thank you. Nevertheless, let me speak up on the important aspects of the aesthetics or design choice, as in real life they are, in a way, more important than the implementation. I answered your question, by the way.
—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-11-26T07:12:00

Please see my comment to the question. We already have too many irritating and distracting special effects on the Web pages.

On second site you reference looks better and could be implemented in such a simple as just one file, animated GIF: http://en.wikipedia.org/wiki/Animated_GIF#Animated_GIF[^].

There are many editors to edit them or compile from existing frames.

The first one… First of all, let me give you one method of looking how something is implemented on the page: Take your Web browser, open the page and use "View Page Source" (or something like that), download all scripts and style files, recursively. And then, see how it works.

This manual explains how to make CSS-only animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations[^].

You can find some simple samples, for example, here: https://daneden.me/animate/[^].

With Javascript, you can create much more advanced animations, especially if you use HTML5 Canvas feature:
http://en.wikipedia.org/wiki/HTML5_canvas[^],
some impressive samples: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

Now, the remaining steps is doing some work. Please go ahead, but please, don't make it excessive or irritating. :-)

—SA

Member 10427643 · Answer 2 · 2013-11-26T07:35:00

Thanks for your answer.

I already had a look at the source code of the "Terrible Takeways"-example. You can find the relevant sections attached.

What makes me wonder is the background image they used:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/img/screen-2-titles-stacked.png[^]

Why didn't they use a series of multiple pictures and instead cramped everything in one picture?

HTML:

<h1 class="flicker abs-mid ir">Terrible takeaways</h1>

CSS:

.habit.current .flicker {
-webkit-animation: flicker .2s steps(1) infinite;
-moz-animation: flicker .2s steps(1) infinite;
-ms-animation: flicker .2s steps(1) infinite;
-o-animation: flicker .2s steps(1) infinite;
animation: flicker .2s steps(1) infinite;
}

.screen.takeaways h1 {
width: 465px;
height: 333px;
margin: -330px 0 0 -524px;
background-image: url(../img/screen-2-titles-stacked.png);
}

Nevertheless, implementing this code is not working for me, which suggests that I am overlooking something, or there is some Javascript involved.

Any idea what is missing?

Flickering Animation with CSS and /or Javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0