Skip to content

Instantly share code, notes, and snippets.

@riix

riix/index.html

Created July 25, 2019 02:21
Show Gist options
  • Save riix/b71220e3bfa4f02e6e0e11e40e764c50 to your computer and use it in GitHub Desktop.
Save riix/b71220e3bfa4f02e6e0e11e40e764c50 to your computer and use it in GitHub Desktop.
Download ZIP
Various Color Chameleon Vertical Navigation
Raw
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 -->
Raw
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();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment