Chapter 11
In this chapter I learned learn all about scroll-activated animations and the various techniques we can use to bring scrolled elements to life and into my web pages to add enhance the designs. This can be seen in the example I have added below, and depending on how far and how fast you are scrolling and what content is currently visible you are going to see all sorts of awesomeness in the form of animations where your background color changes, content slides in from all directions, things fade into view, and so on. I also learned that there are two (very closely related) approaches you can take for this. One approach involves simply checking whether any part of an element is visible while the other approach involves checking whether an element is fully visible. While the difference between both of these approaches seems subtle, the end result of whatever effect you decide to apply to your elements will be noticeably different.
Example from textbook:
Scroll Down
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis massa a arcu efficitur suscipit vehicula et risus.
- Nam sagittis est non enim ultrices elementum.
- Sed id ligula sed mi tempor ornare.
- Aenean feugiat risus eget sagittis volutpat. Proin quis orci a metus lacinia auctor eget id nisi.
- Donec pulvinar nunc feugiat semper consequat.
- Etiam cursus justo eget libero gravida, nec faucibus mauris posuere.
- In nec sem id libero egestas cursus vel a urna.
- Fusce pulvinar arcu eu lobortis egestas. Maecenas eleifend felis ut urna consectetur, et pellentesque mi molestie.
- Aliquam ut felis venenatis, dapibus ante non, gravida nulla.
- Donec consectetur quam in urna commodo, sed aliquet metus vehicula.
- Mauris eget est sit amet felis eleifend sagittis non id nulla.
Phasellus tortor nisl, dapibus at posuere sed, tempor in massa. Pellentesque eu sodales orci, finibus congue libero. Mauris molestie bibendum posuere.
Nunc blandit varius sapien quis ultrices. Vestibulum et consequat augue. Pellentesque et maximus nisl, sit amet dictum ante.
Nullam magna augue, consequat eu augue ut, volutpat fringilla est. Ut commodo ac magna vulputate dictum.