Solved

photo parallax effect

Posted on 2014-04-09
5
734 Views
Last Modified: 2014-04-15
Hi,

I just saw this site and I'm wondering how to code a photo background parallax effect like on this page:
https://bench.co

When you scroll a part of the background remains till a certain point. It's a neat effect.

Thank you<><
0
Comment
Question by:Victor Kimura
  • 2
  • 2
5 Comments
 
LVL 12

Accepted Solution

by:
KRUNAL TAILOR earned 166 total points
ID: 39990634
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 334 total points
ID: 39990642
I have only bookmarked these for future use but not used....

https://github.com/Prinzhorn/skrollr
http://inner.geek.nz/javascript/parallax/
This one is more of what I think of parallax http://wagerfield.github.io/parallax/

Are you interested in the scrolling?
0
 

Author Comment

by:Victor Kimura
ID: 39990681
Wow, thank you, fellas! Those are great links.

This page states parallax is just one page and it's not responsive but these sites seem to counter that:
http://wagerfield.github.io/parallax/
http://themeforest.net/item/salient-responsive-multipurpose-theme/4363266?ref=Ihatetomatoes

Will look for more tutorials and play around with the skrollr.js and parallax.js. Really neat.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 334 total points
ID: 39990717
It is really about point of view http://en.wikipedia.org/wiki/Parallax

I wouldn't focus on the name, but rather the effect.  Is the scrolling down and revealing that you like?  When I think of parallax, I think more of the wavy wooden sea link I gave you.  But to somebody else, using that term may mean something else.
0
 

Author Closing Comment

by:Victor Kimura
ID: 40001022
Thank you, fellas! Father God bless<>< =)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question