Grow your CSS skills. Land your dream job.

Navigation or slider effect like www.melissahie.com

  • # June 20, 2009 at 12:38 am

    I’m trying to set up a 4-section "page" like http://www.melissahie.com (she has 6 pages). She clearly states in her site that she uses mootools, but I’m not understanding what exactly the javascript code is.

    I’d really like to stay within the jquery framework if possible, because I ultimately need to theme this layout for WordPress. My problem is that I cannot seem to find an explanation/tutorial on how to implement this effect–either in mootools or jquery framework.

    I’ve set up a dummy site, with CSS. What I ultimately want to do is slow down the navigation and "slide" from one page to the other.

    Here’s my test site: @Azzcat/”>http://www.azzcatdesign.com/azzcatdevel … il@Azzcat/

    Thanks in advance for any help or pointing me in the right direction!

    –Catherine

    Wes
    # June 20, 2009 at 2:35 am

    Its a moo tools JS pretty easy to use and implement

    http://demos111.mootools.net/Fx.Scroll

    If you need some more help let me know

    # June 21, 2009 at 5:08 am

    first set body css to {overflow: hidden;} /// This hides the scroll bars

    Next,

    wrap everything in a div (ie div#wrapper) this is what you going to move

    all you have to do know is animate the wrapper

    Code:
    $(function(){

    $wrapper = $(‘#wrapper’);
    $(‘body’).css(‘overflow’ , ‘hidden’); // change css via js so if javascript isnt allowed users can still use the site

    $(#nav a).click(function(){
    $wrapper.animate({left: 0px, top: 0px;});
    });
    });

    hope that helps

    # June 21, 2009 at 2:31 pm

    Thanks guys! I’ll work on this tomorrow. Happy Sunday!

    # June 22, 2009 at 8:14 pm
    "Wes" wrote:
    Its a moo tools JS pretty easy to use and implement

    http://demos111.mootools.net/Fx.Scroll

    If you need some more help let me know

    Help! :o

    I did work on this all afternoon. I think I’m missing something in the mootools library, but I’m not sure. I get the concept of the inner div being larger than the wrapper. And I can get links to go to right area. But I cannot, no way, no how–get it to scroll or slide slowly–so you know you’re looking @ one big page.

    New version loaded at @Azzcat/#home”>http://www.azzcatdesign.com/azzcatdevel … zcat/#home

    Thanks again!

    # June 22, 2009 at 8:18 pm
    "Mr KiTT3N" wrote:
    first set body css to {overflow: hidden;} /// This hides the scroll bars

    Next,

    wrap everything in a div (ie div#wrapper) this is what you going to move

    all you have to do know is animate the wrapper

    Code:
    $(function(){

    $wrapper = $(‘#wrapper’);
    $(‘body’).css(‘overflow’ , ‘hidden’); // change css via js so if javascript isnt allowed users can still use the site

    $(#nav a).click(function(){
    $wrapper.animate({left: 0px, top: 0px;});
    });
    });

    hope that helps

    Hi. And thanks for the suggestion! I tried it but couldn’t get it to work. :( So I went back again to try the Fx.Scroll. Still no luck.

    Gonna start reading the moo tools series (30 tutorials) from beginning.

    Can this effect be done in jQuery? I was hoping to become competent in one or the other. So far, not so good!

    # June 23, 2009 at 7:18 am
    "azzcat" wrote:
    Hi. And thanks for the suggestion! I tried it but couldn’t get it to work. :( So I went back again to try the Fx.Scroll. Still no luck.

    Gonna start reading the moo tools series (30 tutorials) from beginning.

    Can this effect be done in jQuery? I was hoping to become competent in one or the other. So far, not so good!

    Keep in mind that /** $wrapper.animate({left: 0px, top: 0px;}); **/
    changes to where you want to end up at….

    (change left:0px to left: 999px; — whatever is needed)

    Secondly,
    The div#wrapper should wrap everything…. your nav is going to be static no matter what being that its fixed position….

    You can aim me if you need help — MrKitt3n

    Thanks

    # June 23, 2009 at 5:12 pm

    Thanks MrKitt3n,

    I’ve been at this for hours and I’m just not getting it. Here’s my attempt with all content within #wrapper:
    @Azzcat/indexAlt.html”>http://www.azzcatdesign.com/azzcatdevel … exAlt.html

    Here’s my attempt adding duration of 2500–closely following jQuery directions: @Azzcat/indexAltjQ.html”>http://www.azzcatdesign.com/azzcatdevel … AltjQ.html

    Got the movement, but I simply cannot get the duration of slow movement (I also tried "slow").
    Head banging that this effect just isn’t working for me. :cry:

    # June 29, 2009 at 7:07 pm

    Greetings all javascript gurus!

    I’m still struggling with this thing. ARGH!

    Gone back to mootools and pretty much copied both http://melissahie.com/ Melissa Hie’s code and http://digitarald.de/playground/fly-over-background/>Harald Kirschner’s code. And I’m still not getting it to work. :(

    Here are my two examples. The first one is a la Melissa, and menu links do not work at all. The second is like Harald’s–the links work–but not the duration.
    @Azzcat/indexmhiecopy.html”>http://www.azzcatdesign.com/azzcatdevel … ecopy.html navigation like Melissa Hie’s site
    @Azzcat/indexFoBcopy.html#content1″>http://www.azzcatdesign.com/azzcatdevel … l#content1 navigation like Harald Kirschner’s example site

    If anyone could help, I’d really appreciate it. I know it’s doable, but I’m missing something.

    Thanks!
    Catherine

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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