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
}
Related
I was looking at a website Firstborn website and it's not the first time I've seen this effect, i wonder how it works.
When you scroll down the page, you can see the images "curve" on top and bottom. I know I'm supposed to present some code, but I don't have any clue on how to create this type of curve on scroll effect!
Does anyone have ideas about how to make this effect is javascript? (Not the glitch, only the curvy image)?
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 looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps
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 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