combining transitions

[jeffreybarry]

Background jumbotron image, followed by glitch effect, followed by screen static, followed by tv out.

[jeffreybarry]

directory: monica-combined-effects

[jeffreybarry]

how to delay start of glitch effect?

[jeffreybarry]

How to change from glitch effect to grain?

[jeffreybarry]

adding glitch effect and grain: by default, the two will run simultaneously. We want the glitch to start, run for a few seconds, stop, then start the grain.

[jeffreybarry]

Focus first on figuring out how to start static grain only after glitch has run for 5 seconds.

[jeffreybarry]

Catch the end of the animation with JS.

Or, could we have the entire chain of animation triggered by a button on the page? And know that the glitch runs for 5 seconds, then just set a delay on the grain?

[jeffreybarry]

Adding the following line to grained.js will delay the animation of the static by 5 seconds:

            rule += prefixes[pre] + 'animation-delay: 5s;';

[jeffreybarry]

But...the static png already appears over the background image once the page is loaded. Can JS be used to only add the class that triggers the animation after 5 seconds?

[jeffreybarry]

links:

design of page: http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/

clip path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay https://www.creativebloq.com/how-to/how-to-create-glitch-text-and-image-effects-in-css https://stackoverflow.com/questions/19625646/javascript-adding-an-id-attribute-to-another-created-element https://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such https://stackoverflow.com/questions/20079971/changing-the-class-of-a-div-after-a-time-delay

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://stackoverflow.com/questions/36631762/returning-html-with-fetch https://www.youtube.com/watch?v=Oive66jrwBs https://stackoverflow.com/questions/52523188/getting-html-from-fetch-request https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/

https://thoughtbot.com/blog/css-animation-for-beginners https://www.sitepoint.com/css3-animation-javascript-event-handlers/ https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ https://eloquentjavascript.net/15_event.html https://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

[jeffreybarry]

The static animation is triggered by setting an ID #main-section in mygrain.js.

How do add this ID after a 5 second delay after the page is loaded and the glitch animation has started?

[jeffreybarry]

okay, add a new script, main.js, before the other scripts:

var grainClass = document.getElementsByClassName("jumbotron")[0]; grainClass.id="main-section";

[jeffreybarry]

Could that code be added to grained.js?

And then a delay?

Yes, eliminated mygrain.js file and added a delay to end of grained.js: window.grained = setTimeout(grained, 10000);

[jeffreybarry]

Now, how to fire tv out effect after static noise?