1

I want to try and achieve this effect.

So I have a website 100% height. In the footer I have two buttons, contact and info. When you click one of the buttons the page should scroll down first then fade in the corresponding content. When the other button is clicked I want to fade the content out the fade the new content in, without the scroll.

Then I want to have a close button in the content that fades in, once clicked it would fade out the content then scroll back up.

I hope that makes sense.

Here is an example of what I mean http://www.10yearsintype.com/#!stories click on one of the designers or join our mailing list.

This is my pathetic attempt http://jsfiddle.net/ricoshift/LuMr7/

    function toggleSlider() {
if (jQuery("#panelThatSlides").is(":visible")) {
     jQuery('html, body').animate({
    scrollTop: 300
}, 600),
    jQuery("#contentThatFades").animate(
        {
            opacity: "0"
        },
        600,
        function(){
            jQuery("#panelThatSlides").slideUp();
        }
    );
}
else {
  jQuery('html, body').animate({
    scrollTop: 300
}, 600),
    jQuery("#panelThatSlides").slideDown(600, function(){

        jQuery("#contentThatFades").animate(
            {
                opacity: "1"
            },
            600
        );
    });
}   

}

I'd love some help to nail this.

0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.