{"id":33885,"date":"2017-10-23T03:01:53","date_gmt":"2017-10-22T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33885"},"modified":"2017-10-22T12:04:12","modified_gmt":"2017-10-22T02:04:12","slug":"css3-animations-below-the-fold-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-animations-below-the-fold-tutorial\/","title":{"rendered":"CSS3 Animations Below the Fold Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Animations Below the Fold Tutorial<\/p><\/div>\n

There is a general term “Below the Fold”<\/a> that says, as far as web design goes …<\/p>\n

\nFar 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.\n<\/p><\/blockquote>\n

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.<\/p>\n

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<\/i><\/a> or (perhaps hugely) positive margin-top<\/i><\/a> that would, respectively, place your data off to the left of the visible screen or (truly) “below the fold”, either way, another “reveal”<\/a> 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.<\/p>\n

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<\/a>‘s css3_animation_belowthefold.html<\/a> pretty simple HTML and CSS (and tiny bits of Javascript (DOM)) code, inspired by this “framework” to the idea<\/a>, 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<\/i> and into view. Like yesterday’s CSS3 Animations with Javascript DOM Primer Tutorial<\/a> 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<\/i> while a different set of things is going on on-screen<\/i>. 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”<\/a> regarding all this.<\/p>\n

\n

Previous relevant CSS3 Animations with Javascript DOM Primer Tutorial<\/a> is shown below.<\/p>\n

\"CSS3<\/a>

CSS3 Animations with Javascript DOM Primer Tutorial<\/p><\/div>\n

We’re extending some ideas first played with CSS3 @keyframes Rule Primer Tutorial<\/a> 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 …<\/p>\n