Lessons > 18. 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
A review (also discussed in Lecture 8)
- 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
A review (also discussed in Lecture 8)
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
Lecture Video(s)
- Recorded Lecture Video (51:59)