10 Quick Tips to tighten your Landing Page design
New Video Tutorial! 10 Quick Tips to tighten your Landing Page design Watch Video

Adrian Cabrero Photography

Long scrolling One Pager forming the photographic portfolio of Adrian Cabrero. Good to see the considerate “lazy load” functionality on a long image-heavy Singe Page website. Cheers for the detailed build notes.

I wanted a simple one page scrolling site to display my photography with a goal of the user emailing me for more information. I wanted users with screens as small as an iPhone and as large as an iMac to admire the quality of images. To accomplish this I used VH + VW units in CSS to make the images responsive to the users window size.

To assist loading of the large images I needed to lazy load them. The lazy loading also needed to intelligently render images if a user used a hashtag in the URL to visit a specific section.

- stickyjs.com for sticky nav - luis-almeida.github.io/unveil for lazy loading - srobbin.com/jquery-plugins/backstretch for landing background slider - instansive.com to feed in a few images from instagram
Categories: Photography
Rob Hope

This original One Page website was reviewed by Rob Hope

I started One Page Love back in 2008 and want to keep adding more value. Please tweet or email me with suggestions or any questions.