Response title
This is preview!
Move this topic
S-shape motion
in Using jQuery
•
12 years ago
I have a client who wants something strange... and she's determined to have to it.
We have a background image that scrolls continuously up the page in a loop. You can see it here:
The client not only wants that, but she wants it to move from left to right in a sinewy movement a bit like an 's' as it rises.
I assume this requires some knowledge of math and sine curves or something like that that I have no idea about. Could anyone point me in the right direction?
I wouldn't need the image to repeat-fill in on the left and right as it moved out of the div - I can just fill with black for that.
Thanks.
Pat
1
Replies(11)
Re: S-shape motion
12 years ago
you would indeed have to calculate a number using Math.sin(y), y being the top position. here's the catch: if you are using sin, you will more than likely run into an issue with the image jumping left or right when y is reset. that is more than likely going to be the obstacle to overcome here.
Since Math.sin(y) will return a number between -1 and 1, you can multiply that by the max number of differentiation + 1 to get an actual pixel amount to offset the image on each interval.
in simpler terms, differentiation is the distance in pixels that you want the image to move left or right.
edit: after a bit more research, maybe a formula similar to
x = Math.sin(y*w)
w is the number of complete oscillations occur in an amount of time. in your case, 1 should be enough, so you can use the following to get a horizontal motion of 100 pixels in each direction
x = Math.sin(y)*100
you will have to round the number to an integer to be used as pixels
Edit: i'm sure there is more to it, such as specifying the wavelength, however i never got that advanced with trig in highschool -- http://en.wikipedia.org/wiki/Sine_wave
Leave a comment on Kevin B's reply
Re: S-shape motion
12 years ago
Leave a comment on sime.vidas's reply
Re: S-shape motion
12 years ago
Wow! Great answers. Thank you to both of you.
Past my work-time here but I'll give it a go tomorrow.
Thanks again,
Pat
Leave a comment on patrickgilmour's reply
Re: S-shape motion
12 years ago
Hi Guys,
After a little tweaking and Photoshoping my image I got what I think is a really great result with Šime's code - so thanks:
However, there is one problem (you guessed it): in IE8 and 7 (compatibility mode), I'm getting an error. This same error appears with Šime's page:
I tried replacing $box in the function with $("#wrap") - or, in my case $("#main_content") - but to no avail.Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0)Timestamp: Fri, 2 Jul 2010 13:46:29 UTCMessage: '$box.css(...)' is null or not an objectLine: 36Char: 4Code: 0
Anyone?
The code is at:
Thanks, Pat
Leave a comment on patrickgilmour's reply
Re: S-shape motion
12 years ago
Yea, background-position cannot be accessed in IE using css("backgroundPositon") ...
Read this:
Try fixing the code by yourself, I'm gonna update my example later (after the game Brazil - Netherlands)
Leave a comment on sime.vidas's reply
Re: S-shape motion
12 years ago
Thanks, I'll give it a go...
[update]
Got it...
Here's the fixed code so it works in ie 7 & 8:
- var $box;
- var v, h, bp;
- var sinusPosition = 0;
- var sinusSpeed = 0.005;
- var sinusAmplitude = 110;
- $(document).ready(function() {
- $box = $("#main_content");
- step();
- });
- function step() {
- bp = $box.css("backgroundPosition");
- //ie 7,8 fix (see: http://dextrose.be/2008/11/10/jquery-background-position-and-internet-explorer/ )
- if(typeof(bp) == 'undefined') {
- bp = $box.css('background-position-x') + ' ' + $box.css('background-position-y');
- }
- bp = bp.split(" ");
- h = parseInt(bp[0], 10);
- v = parseInt(bp[1], 10);
- v = v - 1;
- h = parseInt(Math.sin(sinusPosition)*sinusAmplitude, 10);
- sinusPosition += sinusSpeed;
- bp = h + "px " + v + "px";
- $box.css("backgroundPosition", bp);
- setTimeout(step, 10);
- }
Example:
(will be at http://www.aesajewelry.com/ soon)
Rare are the days I manage to fix something so easily! Thanks Šime!
Pat
Leave a comment on patrickgilmour's reply
Re: 8 instead of shape motion
12 years ago
On a similar note, is it easy or possible to add to this script so it would produce an '8' motion on the page rather than a continuously scrolling 's' type motion?
Curious, as it might look slightly less strange!
Leave a comment on patrickgilmour's reply
Re: S-shape motion
12 years ago
Man, I spent two hours trying to figure out how to make an element move in an "8 motion", and I figured it out :-)
The best thing: the function that calculates the position is only 11 lines long !!!
Leave a comment on sime.vidas's reply
Re: S-shape motion
12 years ago
Ha! Ha! That is soooooo cool I'm laughing out loud looking at it. Awesome! Brilliant!
You were obviously quite good at math in school, right?
Thanks man!
Leave a comment on patrickgilmour's reply
Re: S-shape motion
12 years ago
I had a good high-school math teacher :)
Once you figure it out, it's actually quite simple. Good that you asked.
Leave a comment on sime.vidas's reply
Re: S-shape motion
12 years ago
So my beloved client is now enamored of the idea of a loop like this:
But she would like it to scroll slowly vertically up and down. I appreciate this is pushing my luck a bit - apologies - but would anyone know how to get the bg image to follow this motion (see attached - plz excuse terrible freehand drawing)?
She wants a slightly flatter curve and for the image to go up then down then up then down etc. Yes, I've told her this is the last chance!
Thanks, Pat
Attachments
Leave a comment on patrickgilmour's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to patrickgilmour's question
Statistics
- 11 Replies
- 2898 Views
- 0 Followers