Norfolk School
of Music + Art
Scroll down to discover
Prototype of Parallax
Scrolling by Lynn Stanikmas
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.
An Elegant Effect
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.
It Starts with the Art
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.
Single Page
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.
catalog
Simply Appealing Story-telling
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.