Landing page with magnetism effect on scroll
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello there,

I would like to build a Landing Page with a similar effect to this page: http://www.chanel.com/en_GB/.

Basically, I would like a static background with a centered logo, and a menubar at the bottom, with the following effect:

  1. If the user scrolls down or clicks on the "Title" element of the menubar, the real content of the page shows up over the static background.
  2. Then, if the user scrolls up or clicks again on the "Title" element of the menubar, the real content will go down, showing again the static background with the logo.

I have illustrated my objective here.

I do request your help, Bountifiers, can you do that? Thank you!

awarded to eji001

Crowdsource coding tasks.

2 Solutions


/** MAGNETISM */
function scrollStop() {
    if (isScrollingManual) {
        if ($mainNav.offset().top > 12 && $mainNav.offset().top < $footer.position().top+7) { //IE8 FIX marge de sécurité 12 au lieu de 7
            trackWT.tracking(trackWT.config.ch_scat1, "scroll", "");
            scrollTo();
        } else {
            if (($mainNav.offset().top <= 7 && !$btnscroll.hasClass('tobottom')) || ($mainNav.offset().top >= $footer.position().top+7 && $btnscroll.hasClass('tobottom'))) {
                switchScrollButton();
                if (!$btnscroll.hasClass('tobottom')) {  
                    $mediaController.css('display', "block");
                }
            }
            $('#container .jscroll-scrollbar.vertical').stop().animate({opacity: 0}, 300);
        }
    }
}

That can be adapted to your layout; I don't have access to it or I would have.

Hello, I have put online some piece of the layout. You can check it out at https://raw.github.com/tarraschk/Argaus/master/index.html
tarraschk over 5 years ago
View Timeline