Various Color Chameleon Vertical Navigation

index.html

<div id="container"><!-- container -->
    <div id="sizer"></div>
    <div id="wrapper">
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 1</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 2</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 3</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 4</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 5</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
        <div class="container flex-middle">
            <div class="wrap">
                <div class="module">
                    <h1>container 6</h1>
                    <p>Paragraph</p>
                </div>
            </div>
        </div>
    </div>
</div><!-- // container -->

<div id="navigation" class="navigation"><!-- navigation -->
    <div class="nav-wrap">
        <div class="nav-inner">
            <div class="nav-head">
                <h2>navigation</h2>
            </div>
            <div class="nav-bottom">
                <ul>
                    <li><a href="#!"><span>menu 1</span></a></li>
                    <li><a href="#!"><span>menu 2</span></a></li>
                    <li><a href="#!"><span>menu 3</span></a></li>
                    <li><a href="#!"><span>menu 4</span></a></li>
                    <li><a href="#!"><span>menu 5</span></a></li>
                    <li><a href="#!"><span>menu 6</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div><!-- // navigation -->

script.babel

$(function() {

    // dom
    var $window = $(window);
    var $container = $('#container');
    var $wrapper = $('#wrapper');
    var $section = $container.find('.container');
    var $sizer = $('#sizer');

    var $navigation = $('#navigation');

    var windowHeight = $window.height();
    var wrapperHeight = $wrapper.height();
    var length = $section.length;

    var idx = 0;
    var prevIdx = -1;

    // set nav item
    var setNavItem = function(){
        var i = 0;
        var navHtml = $navigation.html();
        var htmlNavigtion = '';
        while (i < length) {
            htmlNavigtion += navHtml;
            i++;
        }
        $navigation.html(htmlNavigtion);
    };
    setNavItem();

    // get nav item
    var $navWraps = $navigation.children();
    var $navInners = $navWraps.children();

    var doWrapper = function(_el, scrollTop) {
        var y = 0 - scrollTop;
        _el.css('transform', 'translateY(' + y + 'px)');
        _el.css({
            'transition-timing-function': 'ease-in-out',
            'transition-duration': '500ms'
        });
    };

    var doInner = function(_el, _scrollTop) {
        var j = 0;
        while (j < length) {
            var $this = _el.eq(j);
            var y = 0 - windowHeight * j + _scrollTop;
            $this.css('transform', 'translateY(' + y + 'px)');
            $this.css({
                'transition-timing-function': 'ease-in-out',
                'transition-duration': '500ms'
            });
            j++;
        }
    };

    // doScroll
    $window.on('load resize', function() {
        windowHeight = $window.height();
        wrapperHeight = $wrapper.height();
        $sizer.height(wrapperHeight);
    });

    $window.on('scroll', function() {
        var scrollTop = $window.scrollTop();

        // do core
        doWrapper($navWraps, scrollTop);
        doInner($navInners, scrollTop);
    });

    var timerDebounce = null; // timer debounce
    var fired = false; // fi
    var timerAnim = null;
    var isAnimating = false;
    var goTo = function(idx){
        var y = 0 - (windowHeight * idx);
        clearTimeout(timerAnim);
        isAnimating = true;

        $wrapper.off('transitionend webkitTransitionEnd oTransitionEnd');

        $wrapper.css({
            'transform': 'translateY(' + y + 'px)',
            'transition-timing-function': 'ease-in-out',
            'transition-duration': '500ms'
        });

        var to = (windowHeight * idx);

        doWrapper($navWraps, to);
        doInner($navInners, to);

        $wrapper.one('transitionend webkitTransitionEnd oTransitionEnd', function(){
            console.log('end');
            clearTimeout(timerAnim);
            isAnimating = false;
        });
        timerAnim = setTimeout(function(){
            isAnimating = false;
        }, 400);
    };

    var moveTo = function(_dir){
        idx += _dir;
        if (idx < 0) idx = 0;
        if (idx >= length - 1) idx = length - 1;
        if (idx != prevIdx) {
            prevIdx = idx;
            goTo(idx);
        }
    };

    $window.on('mousewheel DOMMouseScroll', function(e) {
        clearTimeout(timerDebounce);
        var _dir = 1;
        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
            _dir = -1;
        }
        if (fired !== true && isAnimating !== true) {
            fired = true;
            moveTo(_dir);
        }
        timerDebounce = setTimeout(function() {
            fired = false;
        }, 100);
    });

    var init = function(){
        $container.css({
            'position': 'relative',
            'overflow': 'hidden',
            'height': '100vh'
        });
        $wrapper.css({
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'right': '0'
        })
    };
    init();

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.less

* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  height: 100vh;
  color: #fff;
  &:nth-child(6n+1) {
    background-color: #3F51B5;
  }
  &:nth-child(6n+2) {
    background-color: #673AB7;
  }
  &:nth-child(6n+3) {
    background-color: #9C27B0;
  }
  &:nth-child(6n+4) {
    background-color: #E91E63;
  }
  &:nth-child(6n+5) {
    background-color: #F44336;
  }
  &:nth-child(6n) {
    background-color: #4CAF50;
  }
}
.wrap {
  text-align: center;
}
.flex-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 0 20px;
  z-index: 10;
  h2,
  a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
  }
  .nav-wrap {
    position: relative;
    z-index: 11;
    height: 100vh;
    overflow: hidden;
    &:nth-child(6n+1) {
      h2, a {
        color: #fff;        
      }
    }
    &:nth-child(6n+2) {
      h2, a {
        color: #341D5C;        
      }
    }
    &:nth-child(6n+3) {
      h2, a {
        color: #FFFF00;        
      }
    }
    &:nth-child(6n+4) {
      h2, a {
        color: #fff;        
      }
    }
    &:nth-child(6n+5) {
      h2, a {
        color: #7A221B;        
      }
    }
    &:nth-child(6n) {
      h2, a {
        color: #265828;        
      }
    }
    
  }
  .nav-inner {
    position: relative;
    height: 100vh;
    .nav-head {
      margin-top: 20px;
    }
    .nav-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      ul {
        margin-bottom: 40px;
      }
    }
  }
}

various-color-chameleon-vertical-navigation.markdown

Various Color Chameleon Vertical Navigation

A Pen by richard park on CodePen.

License.