Jump to content

Recommended Posts

I'm not sure if this is the best place to ask this, but I'm not sure which section it fits best under. I've been asked to build a site that smoothly scrolls content and I don't know where to start. I'm trying to build something like the top part of this site where you click on the arrows and it scrolls to another set of stories. I've tried to disect the code on the site, but when I try to implement it myself it doesn't work. I pressume it's some sort of jquery plugin but that's as far as I've got with it. I'd be grateful for any help on this as I've been trying to work it out for months and haven't got anywhere - except now have less hair!! Thanks.

Edited by thehappyappy
  • Like 1
Link to post
Share on other sites

It may be a jQuery plugin, but a plugin isn't really necessary. All it requires is two divs and the animate() function. Obviously, you'll also have to have some buttons to trigger the scrolling (unless you want it automatic).You'll have one div which will have a fixed width/height, relatively positioned and overflow set to hidden. This will be your view pane. Inside the view pane div, you'll have another div which will hold the content you wish to scroll. This div will need to be absolutely positioned.Now you just need to bind click events to your buttons which will animate the left (or right) CSS property of the content div to move it around. EDIT: If you want to be fancy, and don't need to support older browsers, you could use CSS 3 transitions to do the same thing. This would be easier, since all you need to do is increment the left or right properties with regular JavaScript (no need for jQuery, though you could still use jQuery if you wish). The downfall, as mentioned, is that older browsers (most notably IE8 and down) do not support transitions, so there would be no animation (it would still scroll, just not smoothly).

Edited by ShadowMage
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...