I am working on this parallax from git hub https://github.com/htdt/parallax.
The parallax effect is awesome here .I am trying to modify the code.Here the scroll is from right to left.I want a top /down scrolling.I have tried changing the positions(right to top ,left to bottom overflow-Y to overflow -x) ,but its not working .Any idea on how to to that?I would love to learn this one as the effect after the scroll to the element(box/image) is awesome.(It shows a little stirring kind of effect)I dint find it in any other project.Is there any other version (showing top down parallax of htdt)available. Please redirect in that case.
For Vertical Parallax scrolling you can use these other jQuery Plugins:-
http://darsa.in/
https://github.com/IanLunn/jQuery-Parallax
https://github.com/Prinzhorn/skrollr
and my Personal Favorite
http://johnpolacek.github.io/superscrollorama/
Related
Does anyone know how to combine vertical and horizontal parallax scrolling on a single webpage, like in this interactive resume?
http://www.rleonardi.com/interactive-resume/
He seems to transition seamlessly from vertical scrolling, to horizontal scrolling, back to vertical scrolling, all with parallax effects. Any help would be greatly appreciated!
Note: I did notice a potential hint: at certain parts of the webpage, if you scroll backwards, the transition becomes very jarring rather than smooth.
I haven't dealt with parallax in a while, but when I did I used scroll magic.
here is a link to an example with what your looking for
scrollmagic.io
I'm working on this website
http://1ne-studio.com/test2/
id : test　
pass : 2015
and I have this full screen vertical slider so that website
works as parallax.
This is the plugin that I used for this vertical slider - FSVS.JS
On their demo all the scrolling movements are smooth, but on my site
when you scroll back to top, every scroll has little glitch where the scrolling animation is smooth all the way to the end.(it has little...weird sudden move animation at the end of scrolling...)
This is the screencapture of my problem
https://www.youtube.com/watch?v=VgAhyONH0rM
What could be causing this? and how could I fix this..?
Thank you for your time!
I'm trying to get foundations navbar working, but somehow it won't work.
It snaps about 250px too early. Just scroll down, the scroll bar should get sticky on top once it hits the top.
Javascript and CSS is loaded correctly.
I'm using Foundation 4.2.2 btw :)
The website I'm talking about:
http://gaumengut.lucid-lemon.com/index.php
I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.
You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
I'm trying to create a site that has a parallax type effect with scrollTo navigation control.
Similar to http://www.nike.com/jumpman23/aj2012/ however I only need to scroll on left and right (up & down). I can do horizontal and vertical parallax, and scrollTo I just cant get the diagonal parallax working (with mouse scroll)
I've currently got it working using scrollTo however this disables the user being able to scroll with the mouse. I'm creating a dynamic one page site so some times a pages content may be longer then other areas so the user will need to scroll down, once they reach the end of this content the parallax effect kicks in.
Can anyone suggest a way to do this? Or point me in the right direction.