Scroll down to discover
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling, creating a 3D or layered effect. jQuery is used to achieve this effect by manipulating the position of elements based on the scroll position.
A floating parallax effect is given to div elements by manipulating the elements' y-position with jQuery and CSS transform. This website uses a customized jQuery parallax scrolling plugin.
The UX / UI design, illustration, color palette development, logo and icons were done by Lynn Stanikmas. The logos were done as a for-credit design project during Lynn's time as a student of Visual Design at The University of Massachusetts and later included here during Lynn's time as a student of Web Development at Boston University's Center for Digital Imaging Arts.
A basic single-page HTML structure is required, typically with sections for different content areas. Each section has a distinct background or element. CSS styling is implemented to position the background elements and sections. jQuery is used to detect the scroll position and adjust the background position accordingly.
By combining CSS and jQuery (optionally), by utilizing a 2d animation process that creates an illusion of depth, an engaging and visually appealing single-page website is created with parallax scrolling effects. Parallax effect is very useful for websites that tells a story.