I have an array of divs which are dimensionally larger than its container (parent). I have overflow set to hidden on the container and call the JQuery Overscroll on the map to give it the feel of an iPhone http://www.azoffdesign.com/overscroll.
I am having an issue tackling how to implement a tracking arrow for when the user scrolls the array and the center div (home) goes into overflow out-of-sight. When the user scrolls "home" out of view into the overflow region, I would like an arrow to appear at the inside edge of the container and follow it around the edge wherever it goes out of view. It makes sense to me to use an image for the arrow, then rotate it so it points in the correct direction as "home" gets moved around.
Here is my fiddle with the base work > http://jsfiddle.net/virtuapete/QVQ5r/1/
So there are 3 elements to this to make it work properly... the image following "home' as it moves around in overflow, rotation of the image with respect to where home is (so the arrow always points to "home" and then simply hiding the arrow once home becomes visible within the container.
I am pretty sure I have seen this effect before and to begin tackling the issue I started looking up scroll follow techniques since that would be a close 1-dimensional example of this concept. Kind of like a multi-directional scroll follow almost. I have reached the point where I have completely confused myself now and I am def not strong enough in my skills to meld diff code snippets I have found into the desired result yet!
I found a jsfiddle ( http://jsfiddle.net/hj57k ) of something that could be along the lines of what I want, without the div following the object (in that example the cursor) once it has left the container boundaries. Any help would be amazing as i am just stuck on how to get going... getting the div to follow the object around the sides would be a great start and I could probably take it from there...
Have a look: http://jsfiddle.net/green/F8gd4/ or http://jsfiddle.net/green/GpG3U/.
Here is updated fiddle for multi directional scrolling.
Just add four line javascript like this
$(".container").overscroll({
direction: 'auto'
});
Jsfiddle Demo
Related
I have to "lead" respectively move an Element (the red one in the sketch below) through the page in a given way (so it won't collide with the content). The box should move along the given path while the user is scrolling.
I tried to set the position of the element to fixed at the left / top corner and then just move it along the horizontal axis while scrolling. But i think this is not the best solution and the code is pretty ugly.
I also tried to solve this with the skrollr parallax framework, but this isn't possible.
Here is a sketch of what i'm trying to achieve:
So what is the best approach to solve this?
Edit:
To get a better idea of what i'm trying to achieve here's a link to a page which has something similar: http://rit-team.ru/
That page is unbelievably cool...
If you want to preset the path (as they did) then the principal is pretty straight forward. Define an array of 'checkpoints', essentially x coordinates. You then use the vertical scroll offset as an index into that array, setting the position of your moving element accordingly.
If you want to 'drive around' elements of arbitrary size, then I have no idea. These guys won a design award for their efforts, so I'm guessing it's not a walk in the park.
I'm trying to make a webpage that scrolls horizontally using fullpage.js.
I have the divs set-up and it works perfectly when I click the dot menu or use my keyboard to control it. Now I need it to work with scrolling.
So When I scroll down, I want to go to my 2nd div anchor point (just like it does when I press my right arrow key).
Is this possible in anyway? So far I only found this example but does that mean I have to pay incase I want this functionality or am I missing something?
Just set:
scrollHorizontally: true
In your instantiate function.
You can find all the available properties for fullpage here:
https://github.com/alvarotrigo/fullPage.js#fullpagejs
Edit: updated answer. Misread question.
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.
Could anybody pleae explain me how could I create an effect like https://www.spotify.com/us/ Please click on Find out more on this page.
It looks like a 3D effect. Eg: The image doesn't move as much as the scroll does. If we have two paragraphs on page and 2nd paragraph below 1st paragraph, the 2nd paragraph moves quickly before the 1st paragraph does.
Any guidelines how can I create these effect or if any Jquery plugin, then also it would do.
Thanks!
The effect you have linked to is know as a 'parallax scroll'. There are numerous websites and plugins that describe how to implement this:
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
http://abduzeedo.com/super-easy-parallax-effect-jquery
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
That's parallax effect ,
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
check this SITE
and PLUGIN
I have made a very basic parallax effect on a site of my own.
$(window).scroll(
function() {
x = $("html").scrollTop() * -.05;
$(".bg_img").animate({top: x + "px"}, 0);
});
Feel free to use this and I'm always open to suggestions.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.