Norfolk School
of Music + Art

Scroll down to discover

Norfolk School of Music + Art: Painting Program
sculpture school
Norfolk School of Music + Art: Film Program
painting school

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.

Norfolk School of Music + Art: Design Program
Norfolk School of Music + Art: Sculpture Program

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.

Norfolk School of Music + Art: Web Development Program

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.