Week 2 - Scrolling Site and Parallax
- Class B Adapt your existing site to a scrolling model. Add a parallax background
- No homework is due today.
In Class and/or Homework if not completed
- Using the below resources, build a functioning clickable image slider.
Zipped file of images
Follow along pdf
- Create a new site with original photography, that has a one-page, scrolling model. Then, add a background image that creates a parallax effect.
Simple Scroll Example
Simple Scroll Example with parallax background
Simple Scroll Example with modal window aka Lightbox
- This example builds on the firt example, but if you click on Div 2 you'll now scroll down to an image gallery. The gallery uses the Lightbox plug in (Modal Window) link further down on this page. After having some issues with each jQuery framework specified in the tutorals, I opted for the "latest" version of jQuery that served both the scroll and the lightbox gallery functionality.
Scrolling site one page. Images are background images of divs.
- This example has a very simple one page structure. It has divs stacked on top of each other - some have images as backgrounds, some are filled with white. Scrolling script is used.
Scrolling site one page. Images have fixed positioning.
- Same site as above, but the fixed position of the backround images creates a different feel from the site above. Feels like a parallax but technically isn't.
Download framework Copy and paste code from example tutorials
- Horizontal scrolling
- Smooth vertical or horizontal scrolling with jQuery
- Side scrolling site layout
- Parallax scrolling
- Scrolling website with CSS and jQuery
- Horizontal and Vertical Scrolling
- Parallax Interaction
- Z layers