News

Use jQuery to apply gradual transition effects to page elements

MamboMambo’s David Lapointe Gilbert describes the coding techniques behind the header logo CSS transitions on intromusique.ca

IntroMusique

MamboMambo’s David Lapointe Gilbert describes the coding techniques behind the header logo CSS transitions on intromusique.ca

DOWNLOAD TUTORIAL FILES

Design the states

The idea for controlled transitions came from GUI effects within Apple’s OS X and iOS 7 and applying that to a webpage. An obvious action here was applying it to scrolling down to reveal more content, and attaching it to the header logo and main menu of intromusique.ca. It begins in the design of a first state for the start of the transition and a second where the transition ends. So, you would set up the HTML elements, mostly likely <div> tags, in each state to plot the transition initially.

Define scroll position ratios

Our code then goes into a window.onscroll event or, as in our case, a jQuery window scroll event to capture the active scroll state. Here we make sure to define a selection of variables, with winscroll storing scroll state. The ratio amount is calculated from static values according to the design, so here 3,000 is chosen also for marginratio to synchronise the transition speed. By applying plus and minus operators, we can achieve the offsets for the start and end scroll positions. Lastly, the revratio and revmarginratio variables hold a reversed ratio by subtracting from 1, which will reduce the element size on scroll:

001 var winscroll = $(window).scrollTop();
 002 var ratio = (winscroll-600)/3000;
 003 var revratio = 1-ratio;
 004 var maxed = false;
 005 var marginratio =
 006 (winscroll+1897)/3000;
 007 var revmarginratio = 1-marginratio;

Calculate margins and widths

Using this ratio we can calculate the new width, with the ratio being a value from zero to one that represents the progress between transition states. We get those ratios by multiplying them with the maximum width or margin we want the elements to have. This way we check if the newly calculated values fall within our defined boundaries and store the result in the newmargin and newwidth variables.

001 var maxwidth = 353;
 002 var minwidth = 298;
 003 var newwidth = revratio*maxwidth;
 004
 005 if(newwidth< =minwidth){ 006 newwidth=minwidth; 007 } 008 if(newwidth>=maxwidth){
 009 newwidth = maxwidth;
 010 }
 011 var maxmargin = 920;
 012 var minmargin = 720;
 013 var newmargin = marginratio*maxmargin;
 014 if(newmargin< =minmargin)  015 { 016 newmargin=minmargin; 017 } 018 if(newmargin>=maxmargin){
 019 maxed = true;
 020 newmargin=maxmargin;
 021 }
 022 else
 023 {
 024 maxed = false;}

Apply the new values

Here we basically apply the CSS code to the corresponding elements, setting an adjusted left margin and width. For instance, on the website we apply the calculated width to the menu, so that when we scroll down the page the menu shrinks. In addition, the calculated margin is applied so that the column containing the logo and the menu shifts over to the right to make way for content below.

001 $(‘#logonav’).css(‘margin-left’, newmargin);
 002 $(‘#logo’).width(newwidth);

Toggle classes on transition

From the ‘maxed’ Boolean variable we know the ratios have reached the final values at each end of the transition. This can be used to trigger subsequent page effects, in this case toggling the visibility of nested elements within the main navigation. As you can see from the website, each menu link contains a large version with more text and also a smaller one so that it will not be offset out of screen.

001 if(maxed)
 002 {
 003 $(document.documentElement). 004 addClass(‘menu_maxed’);
 005 }
 006 else
 007 { $(document.documentElement). 008 removeClass(‘menu_maxed’);
 009 }
×