john-azzaro / Study-CSS-Transitions

A handy study in the implementation of basic CSS color transitions on a webpage, including removing and adding special class to achieve the effect, as well as special conditional logic as well.

CSS Transitions Study

See it Live: https://john-azzaro.github.io/Study-CSS-Transitions/

What is CSS Transitions Study?

The CSS Transitions Study examines the implementation of transitional effects to web pages using HTML, CSS, JavaScript, and jQuery for the buisness logic. In this particular study, when the user scrolls down the page, the background will change colors as the second page reveals itself.

Here are a few questions from the study to explore:

• What are the key takeaways from the calculator study?
• Does CSS Transitions Study feature commentary?
• What are the key features of CSS Transitions Study?
• Screenshots

What are the key takeaways from the calculator study?

Primary objective revolves around the background-active class.

---

So the transition for the study is pretty basic, changes the color of the background as the user scrolls down. The effect itself is pretty straight forward, specifically that on scroll, if the if the user scroll is greater than the inner height of the window (divided by 4 so it changes at a later point in the scoll), then add the class "background-active" class. If not, remove it.

function backgroundChange() {                      
    if(window.scrollY > window.innerHeight / 4) {       
        $('body').addClass('background-active');      
    } else {                                    
        $('body').removeClass('background-active');   
    }         
}

function handleScroll() {                          
    $(window).on('scroll', backgroundChange)           
}

Does CSS Transitions Study feature commentary?

Yes! I use extensive commentary (mostly in the form of my thought process) so that the new and curious can follow the logic in the program and get an idea of my reasoning behind each and every line of code. In addition to my line-by-line commantary, I also provide a Process text file that gives a good outline of my implementation process.

What are the key features of CSS Transitions Study?

Since this study is ongoing, basic functionalities are covered first and more advanced features are added or will be added in the future:

Features:	Feature Notes:
color transition	When the user scrolls down (and back up) the background color will change color.

Screenshots