Skip to content

Instantly share code, notes, and snippets.

@slbug

slbug/gist:18b0c315f4aeae94af08

Created April 8, 2015 06:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save slbug/18b0c315f4aeae94af08 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save slbug/18b0c315f4aeae94af08 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. slbug created this gist Apr 8, 2015.
    168 changes: 168 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,168 @@
    /* ### Transitions between Sections ##################################################################### */
    (function() {
    // detect if IE : from http://stackoverflow.com/a/16657946
    var ie = (function(){
    var undef,rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
    // IE 10 or older => return version number
    rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    } else if (trident > 0) {
    // IE 11 (or newer) => return version number
    var rvNum = ua.indexOf('rv:');
    rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
    }

    return ((rv > -1) ? rv : undef);
    }());


    // disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179
    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [32, 37, 38, 39, 40], wheelIter = 0;

    function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
    e.preventDefault();
    e.returnValue = false;
    }

    function keydown(e) {
    for (var i = keys.length; i--;) {
    if (e.keyCode === keys[i]) {
    preventDefault(e);
    return;
    }
    }
    }

    function touchmove(e) {
    preventDefault(e);
    }

    function wheel(e) {
    // for IE
    //if( ie ) {
    //preventDefault(e);
    //}
    }

    function disable_scroll() {
    window.onmousewheel = document.onmousewheel = wheel;
    document.onkeydown = keydown;
    document.body.ontouchmove = touchmove;
    }

    function enable_scroll() {
    window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
    }

    var docElem = window.document.documentElement,
    scrollVal,
    isRevealed,
    noscroll,
    isAnimating,
    container = document.getElementById( 'container' ),
    trigger = container.querySelector( 'button.trigger' );
    trigger_up = container.querySelector( 'div.top' );

    function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
    }

    function scrollToTitle(){
    var elm = document.getElementById('title');
    var stopY = elm.offsetTop - 20;
    var startY = 0;
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    var speed = 20;
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
    for ( var i=startY; i<stopY; i+=step ) {
    console.log(leapY);
    setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
    leapY += step; if (leapY > stopY) leapY = stopY; timer++;
    }
    }
    }

    function scrollPage() {
    scrollVal = scrollY();

    if( noscroll && !ie ) {
    if( scrollVal < 0 ) return false;
    // keep it that way
    window.scrollTo( 0, 0 );
    }

    if( classie.has( container, 'notrans' ) ) {
    classie.remove( container, 'notrans' );
    return false;
    }

    if( isAnimating ) {
    return false;
    }

    if( scrollVal <= 0 && isRevealed && !trigger_up ) {
    toggle(0);
    }
    else if( scrollVal > 0 && !isRevealed ){
    toggle(1);
    }
    }

    function toggle_up(){
    if( scrollVal <= 0 && isRevealed ) {
    toggle(0);
    }
    }

    function toggle( reveal ) {
    isAnimating = true;
    if( reveal ) {
    classie.add( container, 'modify' );
    }
    else {
    noscroll = true;
    disable_scroll();
    classie.remove( container, 'modify' );
    }

    //simulating the end of the transition:
    setTimeout( function() {
    isRevealed = !isRevealed;
    isAnimating = false;
    if( reveal ) {
    noscroll = false;
    enable_scroll();

    }
    }, 600 );
    }

    // refreshing the page...
    var pageScroll = scrollY();
    noscroll = pageScroll === 0;

    disable_scroll();

    if( pageScroll ) {
    isRevealed = true;
    classie.add( container, 'notrans' );
    classie.add( container, 'modify' );
    }

    if (trigger_up) {
    trigger_up.addEventListener( 'click', toggle_up );
    }
    window.addEventListener( 'scroll', scrollPage );
    trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
    })();