Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rotational “scrolling” in single page layout? jQuery? Canvas?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35293
    Rymf
    Member

    Sorry if this comes off as an abstract question, I’m a bit out of my comfort zone on this one. My roomate’s band is releasing a new record in a few weeks, and I’ve offered to make a one pager for the release. Mostly what I’m getting out of it is the opportunity to try out some experimental design ideas I wouldn’t normally consider.

    Here’s a quick sketch of the layout for the idea I have in mind:

    What I hope to accomplish is to rotate the page from the “home” view (bounded in red) to the content divs surrounding it

    I know about scrollTo and other jQuery tricks to scroll on the x-y axis or diagonally, I basically want to “scroll” on an arc.

    I’ve found some precedent for more advanced animations in jQuery, but I’m not well versed enough to know how it applies to my needs, if at all. I also don’t necessarily want to pigeonhole the solution into jQuery, or any other language, if there’s a suitable way to accomplish this in HTML/CSS.

    (Aside: the more I think about it, the more I become convinced that “home” should be transformed on an angle and everything else should be in line with the grid.)

    Is this possible? Anyone have any links that might be useful for me?

    Thanks in advance for any assistance anyone can provide.

    #91151
    Mottie
    Member

    Hi Rymf!

    Interesting… well, I guess you could go the css3 route, but then you are limiting the site to modern browsers. For older browsers you can use a separate stylesheet with plain css.

    Anyway, I think this “animate.css” library might help. Check out the rotating entrances and exits.

    #91153

    Awesome idea! I think that to do it properly it will have to use JavaScript. Here is a very rough (hover only at this stage) CSS version to get a feel for the idea: http://jsfiddle.net/sl1dr/8rxdT/show/

    #91154
    Rymf
    Member

    Thanks for the help you two.

    Animate.css looks interesting and I certainly wasn’t expecting a mockup, so thank you especially, Joshua.

    It seems that CSS3 transforms may be the way to go here, and in this case (an EP release for an indie electro rock/pop band) total IE compatibility isn’t the biggest concern (and as the developer of animate.css indicates, there’s no reason one can’t use jQuery as a fallback).

    But, this afternoon I spoke to the roommate and I don’t think he’s into it. Oh well, I may be able to use this for something in the future. I’ll post any developments I make in the event that I pursue it further.

    #91160
    BoringCode
    Member

    Problem of course is there is no way to “unhover” (in Joshua’s example). So once you hover on one section you can’t hover on the others.

    #91161

    @BoringCode As stated, it is a very basic prototype. I think I would rather have it on click than hover anyway.

    #91163
    Brightonmike
    Member

    I also think click would be better. The problem with hover here is for first time visitors it might be off putting that the whole pages spin around when they move their mouse.

    I suggest having a slider at the bottom of the page. When they drag it right, it rotates right, and vice versa.

    #91166
    BoringCode
    Member

    Right, click would be much better.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.