Newb help with JS

[retropunk]

Hello, I’m new to JS and CSS. Is there a way to get the following storyboard to happen in an html page? Basically I’d like to have a series of images on a page and when you click on an image have them all slide off the page to the left while the relative image info slide in from the right. Then when you click the back button the reverse would happen. Thanks for the help! http://imgur.com/awPWL.jpg

[Brian Meyer]

retro, this certainly is possible. I haven’t implemented it myself, but I imagine it could be accomplished with jquery and css. Basically you could change the ‘position’ (position: absolute; top: -300px; left: -300px;) of a div (your main content) using Jquery. The effect of it flying off the page could be accomplished with animation effects.

This is going to be tricky if you are new to JS and CSS, but If you learn about positioning in CSS, and Jquery’s animation and selector tools, it should be a good start.

I know if a page which has a similar ‘paging’ effect, but I believe it’s done using flash.
http://speedvagen.com/

[retropunk]

yes, well I am new to Jquery but I am a seasoned Flash developer. I’ve been wanting to branch out a bit.
I can do this effect easily in Flash but haven’t had luck with the Jquery site examples yet.
I’m just starting out though so hopefully soon!

Thanks for responding!
– Patrick

[retropunk]

Just to give you an idea, this company has the exact effect I am looking to do! But I haven’t been able to hash through the source, it’s way over my head it seems. :)

http://www.codeandtheory.com/#/work/

[retropunk]

http://www.codeandtheory.com/#/work/

[jfreehill]

This is definitely doable using jQuery. One term that’s often used for it is “Coda slider”, as the technique apparently was popularized by Panic (Mac OS Developer) on their Coda site: http://www.panic.com/coda/

There are many resources if you Google ‘coda slider’ but Remy Sharp’s implementation is probably the most useful you’ll find: Coda Slider Screencast and the Demo.

Since it’s just sliding between divs you can of course put other div’s inside those and theoretically do it for whole pages.

[retropunk]

oh wow! Thats great. I was searching all around Google but I didn’t really know what term exactly described the technique I was trying to achieve! :)
This looks great. I’m going to check it out now.
Thanks so much
– P

[Author]

Posts