Grow your CSS skills. Land your dream job.

How difficult would it be to make the content scrolling effect in this site?

  • # July 5, 2012 at 12:00 am

    http://finalfantasyviipc.com/en

    # July 5, 2012 at 1:06 am

    Well, the layout itself is just a bunch of divs stacked together. If you’re talking about the side nav/the scrolldown when you click a side nav, it’s pretty easy jQuery. You just check the div top position in relation to the window and you can change things from there.

    # July 5, 2012 at 2:14 am

    Erm, could you please show me an example or anything to get me started?

    I’ve never, ever used jQuery. I would really love if you could help Chris.

    Couldn’t this also be done in CSS3?

    # July 5, 2012 at 11:39 am

    Check out Waypoints.js, it’s really easy to implement.

    http://imakewebthings.com/jquery-waypoints/

    # July 5, 2012 at 12:29 pm

    I don’t know enough CSS3 to say, but I feel like you’d have to have some jQuery. @Kralle‘s example looks pretty promising though, and probably a lot better than I could throw together for you. :P

    # July 5, 2012 at 1:33 pm

    Here’s a little JS Fiddle someone posted a while back: http://jsfiddle.net/joshnh/YxRqp/

    # July 5, 2012 at 5:24 pm

    I managed to make something like Odd’s jsfiddle.. but I can’t seem to figure out how to do the effect where if you scroll up or down, the side menu will change according to what div element you are in..

    # July 6, 2012 at 5:55 pm

    anyone have any suggestions? :P

    # July 6, 2012 at 7:22 pm

    I didn’t make the fiddle, and I know very little jQuery so I can’t help you, sorry. :-(

    # July 6, 2012 at 7:24 pm

    It’s okay, odd. I’m hoping Chris comes back. Haha.

    # July 7, 2012 at 11:04 pm

    Bump

    # July 8, 2012 at 5:44 am

    Fear not buddy, for I am here. I’ll throw something together for you on codepen in a sec.

    # July 8, 2012 at 7:28 am

    Alright, here’s what I came up with. For whatever reason, the waypoint plugin was doing something funky when you scrolled up, so I had to mess with doing a negative index, but now it works well. I tried to make the code pretty simple. Let me know if you have any questions.

    link: http://codepen.io/chrisxclash/pen/21/4

    # July 8, 2012 at 2:28 pm

    Hm, when you scroll up or down the active side bar doesn’t update to what section it is in unless you lower the height of the section, which it alright i think.. It works well though, thanks so much Chris.

    Why is there CSS in the HTML section? I’m confused by this.. I don’t see any div, class tags or anything.

    # July 8, 2012 at 5:00 pm

    Chris wrote it in HAML. To see the HTML, just click the word HTML in the header of that editor.

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".