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.
Related
I know CSS is not supporting position: fixed for only x or y but only for both a the same time.
The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.
My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?
I think we need a fixed-x and and fixed-y positioning value.
This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.
Here's a fiddle:
http://jsfiddle.net/UfZPa/1/
which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.
Update
From the CSS ED:
Intersection between the stickily positioned element and the bottom of
the sticky-constraint rectangle limits movement in any direction, so
the offset never pushes the stickily positioned element outside of its
containing block. However, when the element is free to move within its
containing block as the page is scrolled, it appears to be pinned to
the relevant flow root edges, similarly to a fixed position element.
I think this is describing what I want but I'm not sure...
Update 2
To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)
A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.
There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.
Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.
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 trying to make a page where a rocket follows a predetermined path which snakes up the page (the page will load at the bottom) as the user scrolls.
I can animate an element along a path using something like jQuery.path and using SVG's animateMotion but I can't quite figure out a solution where the element would move along that path as the user scrolls.
jQuery Scroll Path isn't quite what I'm looking for as it moves the elements into the center of the page.
I've seen on the TEDxGUC website, they move the apple along a curved path as you scroll down. I can see they're using Raphael.js and an 'animation along a path' extension but I still can't get my head around how they've actually achieved it – I'm not quite a JS ninja just yet.
Any pointers in the right direction would be really appreciated!
EDIT
For anyone still interested in this kind of thing, I stumbled across Skrollr Path, which pretty much does exactly what I was looking for: example
I'm the developer of the www.tedxguc.com website.
I think you're already on the right path (pun intended) with regards to how I got the animation to work with the scrolling. I simply conceptualized the animation as if the scroll bar is a seek bar in a video player.
So I set the height of the page to the length of my animation, such that every 1 pixel my element moves correspond to 1 ms in the animation, as if I was moving in a timeline.
You'll notice the animation set up code at the end of the homepage.js file.
In makeAnim() you'll find a lot of code that looks like this
setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);
What this basically does is: set up the apple such that it will move from it's 0 (start of the path) to 1 (end of path) and it will do so within 1000px of scrolling
starting form the "start" of animation + an offset of 3200 pixels.
I kind of cheated and fixed the code a bit to make it simpler to understand.
Here's a jsfiddle of the earlier concept in development and I hope my comment helped.
You have to create your formula that takes y value and computes x but here's what I came up with...
http://codepen.io/anon/pen/zCuEb
HTML
<div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div>
<div style="height:25000px;width:20px;background-color:#000033"> </div>
JS
var $w = $(window);
var $d = $('#oh');
$w.scroll(function(){
$d.css('left',formula400())
});
function formula400(){
return Math.sin($w.scrollTop()/100)*100
}
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