CSS3 Animations Below the Fold Asynchronous Tutorial
Yesterday’s CSS3 Animations Below the Fold Tutorial got us talking about “below the fold” and that concept’s natural “partner”, to our mind, is talk of “asynchronous” processing. These two ideas are very powerful. If you can be arranging your webpages to be doing two things at once, and compartmentalising those two things to be …
- something relatively quick and responsive “above the fold” … while …
- “below the fold” processing can be your “slower off the mark” functionality, because you have all that extra time of the user processing the “above the fold” content
… you can make things seamless, yet hard working, and with a faster overall loading time, because of your “asynchronous” arrangements.
What is the easiest to understand “asynchronous” concept after the (Javascript) timers (setTimeout and setInterval)? Well, to us, it is the HTML script tag attributes async=”async” and defer=”defer” teamed with src=[ExternalJavascriptFile] as with today’s HTML css3_animation_belowthefold.htm‘s …
<script type='text/javascript' src='css3_animation_belowthefold.js' async='async'></script>
… and that external Javascript (you could call css3_animation_belowthefold.js introduced via the changed HTML), simply, consists of …
// css3_animation_belowthefold.js
// RJM Programming
// October, 2017
// Help out css3_animation_belowthefold.htm
function soonish() {
mydiv.innerHTML='<iframe style="width:100%;height:700px;" onload="mydiv.style.width=' + "'" + '100%' + "';" + ' mydiv.style.height=' + "'" + '700px' + "'" + ';" src="//www.rjmprogramming.com.au/HTMLCSS/dams_usa.html" title="Dams in the USA"></iframe>';
}
setTimeout(soonish, 12000);
… the setTimeout line of code allowing enough time for its parent HTML to busy itself loading …
<iframe style="width:100%;height:700px;" src="//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort" title="Lighthouses in Australia"></iframe>
… effectively working vertically, whereas, earlier on, we used these same two web applications of the past to load horizontally (right to left) when we presented Promise All Object Tutorial.
Are the possibilities growing in your mind here, if you give today’s work a live run go? We hope so.
Previous relevant CSS3 Animations Below the Fold Tutorial is shown below.
CSS3 Animations Below the Fold Tutorial
There is a general term “Below the Fold” that says, as far as web design goes …
Far enough down that it is not likely to be visible in the initial display of a standard browser window, such that the reader will probably have to scroll down before seeing it.
Well, as you might surmise, we are coming from a hardcopy world into the new “softcopy” digital world, and this “below the fold” initially referred to the writing below the “fold” of a folded newspaper, moving into our modern world not only to cover the webpage bits below the bottom of your screen. It can cover all webpage goings on off-screen.
If you are like me, you might have to grow up, and like me, accept that it is okay to allow for (perhaps huge) negative CSS style property margin-left or (perhaps hugely) positive margin-top that would, respectively, place your data off to the left of the visible screen or (truly) “below the fold”, either way, another “reveal” type tool in your armoury. Still too much like me?! If so, let me get you thinking by this analogy. When you go to the theatre and you are watching, say, a musical, and the cast amazes you by their costumes in one scene, and then minutes later while you are distracted by a shorter inconsequential scene, that main cast comes back again dressed totally differently, and amazing you again. Well, that costume change, off-screen, is what we might be able to harness using “below the fold” thinking.
And so today represents our slow “lateral thinking” acceptance of ideas in this line of thinking. We’re going to start with today’s live run‘s css3_animation_belowthefold.html pretty simple HTML and CSS (and tiny bits of Javascript (DOM)) code, inspired by this “framework” to the idea, thanks, of starting with a CSS3 Animation initially positioned (truly) “below the fold”, and then the user is invited to click or touch amongst the “introductory blurb” we present to bring that CSS3 Animation out of hiding and into view. Like yesterday’s CSS3 Animations with Javascript DOM Primer Tutorial we offer the changing of the CSS3 Animation’s look a bit too, though the main “creeping up on knowledge” lesson today is that you can be doing things off-screen while a different set of things is going on on-screen. Cute, huh?! This can be augmented with some of the asynchronous ideas in HTML and Javascript too, and we’ll be doing a “Fu Manchu” regarding all this.
Previous relevant CSS3 Animations with Javascript DOM Primer Tutorial is shown below.
CSS3 Animations with Javascript DOM Primer Tutorial
We’re extending some ideas first played with CSS3 @keyframes Rule Primer Tutorial regarding CSS3 Animations, an important topic. Now in that previous work we never used Javascript, and today, we don’t clobber that version, because that is an important consideration here. CSS3 Animations can speed up your webpages by doing away with so much Javascript load inefficiency, at its best. But today, we introduce Javascript DOM logic in order to start you thinking about the flexibility of these @keyframes CSS3 Animation rules, adding today thoughts regarding dynamic arrangements for …
- animation duration
- animation delay
- colour
- background image
So maybe you want to compare the old and the new below …
| Old CSS3 Animation keyframes_test.html |
New CSS3 Animation keyframes_test.htm (changed this way) |
|---|---|
Previous relevant CSS3 @keyframes Rule Primer Tutorial is shown below.
CSS3 @keyframes Rule Primer Tutorial
Here is a tutorial that introduces you to the idea that you can use CSS (CSS3) to perform animation tasks. One such idea is to use CSS3 @keyframes Rules on web browsers (for Internet Explorer you would need Internet Explorer 10 or above).
As mentioned in the tutorial WordPress CSS Change helped by Firebug Primer Tutorial CSS works with static scenarios where you can define everything ahead of time, with no new dynamic resources, but the effect of animation can make it seem that dynamic things are going on, and can add great interest to your websites. You could try your animations right in front (the distance being inversely proportional to your regard for your regal beasting) of your cat (no cat … try origami … but the results are unpredictable).
Useful tutorials for the contents here (thanks) were:
Here is a link to some downloadable HTML programming source code which you may want to rename to keyframes_test.html
And here is a live run.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
