Treehouse: Grow your CSS skills. Land your dream job.

need a solution

  • # April 9, 2012 at 6:34 am

    Hi to all,
    First of all, I want to say that i am very glad to be on this forum.

    I’m looking the css3 solution for this project

    All effects I want to repeat with css3. The basic problem – how to organize a smooth moving between screens when clicking on the menu.

    I know about jquery solution, but it is very rude.
    please, help


    # April 9, 2012 at 7:55 am

    I don’t know if you can do exactly the same, but as a start, check this out:

    -webkit-transition: all 0.42s ease;
    -khtml-transition: all 0.42s ease;
    -moz-transition: all 0.42s ease;
    -ms-transition: all 0.42s ease;
    -o-transition: all 0.42s ease;
    transition: all 0.42s ease;

    #default, #screen1, #screen2, #screen3, #screen4
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    #default:target, #screen1:target, #screen2:target, #screen3:target, #screen4:target
    left: 0;
    top: 0;

    Place screen1-4 somewhere out of the rendering area using the left and top properties.

    Use + and ~ selectors to update your positioning depending on which screen is currently displayed.

    (Didn’t test this, but should work. I also don’t know about browser support for these techniques.)

    # April 9, 2012 at 8:06 am

    ok, thanks!
    good start. i’ll try it today

    # April 9, 2012 at 8:12 am

    Check out jmpress.js and impress.js (with a builder). Both combine javascript with css3 animation to provide something that I think is even better than that flash demo you shared.

    You might want to also check out zoomooz.

    # April 9, 2012 at 9:10 am

    cool! thanks!

    # April 9, 2012 at 9:29 am

    I’m glad you’ve got this down, but just wanted to comment–

    jQuery is the better way to go since it has more browser support. If you base your site on CSS3 animations, unless you have some special browser detecting abilities, your site will FAIL in browsers without support, like IE6.

    # April 12, 2012 at 8:11 am

    hello again
    This is what i’ve done:

    I’ve made a big screen (.window) and placed inside it small screens (my pages)
    Now, with “position:absotule” & “left,top” i am moving the big screen to the coordinates

    The screen is start moving when i am clicking on the menu links (home,about us, etc.) – with :target
    And now i’ve been pushed against two problems:
    1) My “tranzition” animation is not working (i’m changing “left,top” of the big screen) when i am clicking on the menu links
    2) I do not know how to calculate the coordinates of a big screen at different resolutions (i want my page

    be absolutely in middle of the browser)

    ..lost in the code,
    thanks for your helping

    # April 12, 2012 at 12:27 pm

    pleeease ^_^

    # April 12, 2012 at 6:15 pm


    # April 13, 2012 at 4:35 am


    # April 13, 2012 at 6:47 am

    hm. is this spam? I do not understand what i need to look at :/

    # April 13, 2012 at 2:36 pm

    I’ve been looking at it… just no simple solution. Did you try any of those plugins?

    # April 14, 2012 at 4:55 am

    client doesn’t want Jquery or any scripts.
    we need pure css

    # April 15, 2012 at 5:58 pm

    no solution?

    # April 15, 2012 at 6:55 pm

    I don’t mean to sound rude, but if you’re in that much of a hurry. Try or maybe pay someone to do the work for you.

    Does the client know that sometimes scripting is necessary?

    I attempted to make this work, on Friday, but I tried to enjoy my weekend and work on projects that I enjoyed doing… I didn’t get a chance to look at this one.

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

You must be logged in to reply to this topic.