Project 2 Option: JavaScript Widgets

Instructions

1. Browse the links below to get some ideas regarding techniques you might use in a current or future website.
2. Select a technique you would like to explore
   • Hint: The carouselse and some of the first few scrollytelling demos are the simplest, but all are workable.
3. Integrate this technique into your website. This should involve:
   • Changing the styling / content
   • Integrating it into a comprehensive webpage

Demos and Examples to Explore

1. Carousels

Experiment with one of the following:

1. Swipper
   • Documentation
   • Code Demos
2. Other Interesting Carousels
   • TutsPlus
   • Free Frontend

2. Scrollytelling

• Sample code from class:
  • Scrolling Effects 1
  • Scrolling Effects 2
  • Text Animations
• Other Internet Demos:
  • 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

3. 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

4. Other Animation Libraries and Tutorials

• AnimeJS
• Three.js
• Text Animations

What to Submit

• See Project 2 instructions