Schedule > Alternative Inputs / Outputs

Today we’ll be taking a tour of some front-end techiques involving multimedia and animation. We’ll just be glancing at a series of ideas. Some interesting links and resources I found online:

CSS Transitions & Animation

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://thoughtbot.com/blog/transitions-and-transforms
• https://thoughtbot.com/blog/css-animation-for-beginners
• https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation–cms-21068

Image Backgrounds

• background-attachment
• CSS filters

Scrollytelling

• http://www.rleonardi.com/interactive-resume/
• Horizontal scroll tutorial
• https://codepen.io/tutsplus/pen/QWGYKMN?editors=0010
• https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic–cms-24795
• https://speckyboy.com/10-css-javascript-parallax-scrolling-code-snippets/
• https://codepen.io/animaticss/pen/orWRWp?editors=0010

Parallax Libraries

• https://github.com/dixonandmoe/rellax
• https://alexfox.dev/lax.js/
• https://github.com/electerious/basicScroll#demos
• https://bashooka.com/coding/parallax-animation-javascript-libraries-2019/
• https://chriscavs.github.io/rallax-demo/
• https://github.com/geosigno/simpleParallax.js

Processing (p5.js)

• To download the starter kit: https://p5js.org/download/support.html
• Get Started (the “hello world” example): https://p5js.org/get-started/
• Learn: https://p5js.org/learn/
• Examples: https://p5js.org/examples/

Other Animation Libraries and Tutorials

• AnimeJS
• Some interesting CSS Shorts on LinkedIn learning, which deconstruct various design techniques / flourishes.

Slides

• Alternative Inputs / Outputs

Lecture Video(s)

• Recorded Lecture Video (51:06)