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.
Related
I am trying to build a website that moves to sections using arrow keys on the keyboard or swipe on mobile/tablets. I am using FullPage. Is it possible to have a grid like website where the user can move in a square grid like fashion rather then just up and down?
It is possible. But might be much easier without fullpage.js
So you could have the page fixed but it content overflow. So that would allow you to be able to scroll at all direction.
You could add a mouse listener to scrollTo(x,y). Where x and y are the mouse pointer location
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
Anyone knows what I can use to create an scroll effect like the one of this website? https://www.kissthebride.fr/
When mouse wheel is used the presentation pages are shown one by one and the user is forced to stay some seconds at least on the page (if he doesn't use the right navigation).
I built my site using React. It has a pinned site navigation menu on the left, a pinned page navigation menu (to navigate through the current presentation pages) on the right and the main content on the middle. I need to apply this effect to the main content only and keep the right and left parts as they are.
The effect itself
Animation ideas
.
Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).
Let's say I'm on the standard iPhone 4.
My menu bar is 2000px in width. When the user touches and holds on the menu div, he can move his finger left/right, and the menu bar will move. This allows the user to browse all of the menu's items using his finger. (Scrolling left/right)
How can I make that in javascript/jquery?
It's like the Google Images webview (go there on your phone). You're able to swipe left and right to navigate each image.
Except...I want it to be a menu bar, with no "snapping".
Here's a very very basic example. It should get you moving in the right direction though.
$('body').bind({
'touchmove': function(e){
$('.menu_bar').css({
'left': e.originalEvent.touches[0].pageX
});
}
});
To get where you're headed you'll need to also store the touchstart coordinates, the .menu_bar start position and then use a bit of math to move the bar relative to it's position rather than just snapping to the finger position each time like the example above will do.
Hope that helps :)
I'm still a little confused by the question but I believe the answer is just to use
-webkit-overflow-scrolling: touch;
This will work for iOS5 devices and give you a small scroll bar when active (i.e. when scrolling)
Otherwise you could try this plugin: http://cubiq.org/iscroll-4
Or: http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
(which is multi-device)