Code to make an image slide or move to certain spot when scrolling page?

21st of November 2013 0

Code to make an image slide or move to certain spot when scrolling page?

I am trying to find a way to build code to have an image move to a certain spot on a webpage when you scroll the page. So, say I load a page an image shows up at the right of the page, and when you scroll down, the image slides or moves to the middle of the page next to specific text and it stays there.

I have thought of using JavaScript or JQuery, and use the animate and scrolly attributes to try this, something like this: ({“top”:(window.scrollY), but I cannot get it to work right, I also just tried this: if($ (window).scrollTop() with .animate, and still cannot get it to work. Can this be done easier with CSS3 or even HTML5, or is this too choppy or unstable? I want the image to be the top element, this is not a background effect, or anything like that. I just want a regular image to be the top element and then move to a spot with text by just scrolling down the page and then stay there.

Does anyone have an idea of how to go about this? Hopefully I explained myself thoroughly.
@Spencer Killen – The email you provide: contact@pillower.com does not work. Received transmission error…could not be delivered.

Could you provide a basic code of what you mean? I tried this site: http://www.wduffy.co.uk/jScroll/

However, I cannot get it to work on my end, and I cannot get it to stay in place of the text when reached. I didn’t think this would have been as difficult as it has been. Driving me nuts.

Best answer:

Answer by Spencer Killen
Personally, since I’m not a jquery guy, I would create a CSS class for it that make sure the z-index is on top and enable fixed positioning so it doesn’t interfere with your other elements, then get a javascript interval going that runs a function that updates the image.style.cssText so that it moves slowly or however you want it to.

Alternatively you could use an HTML5 canvas element to position the element in almost the steps,
this would be a little slicker, but a little more difficult and canvas is only supported in newer browsers

if you need anymore help feel free to contact me at contact@pillower.com

Know better? Leave your own answer in the comments!

Filed under § jquery animate — Tagged with , , , , , , ,

Share it!

Was it good for you to?

Sponsors

Support for the site!

No sponsors at the moment.



Your opinion matters. Add it below.


Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments

Categories



Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.