<header class="js-header header">
<div class="header__content">Header</div>
<div class="js-header-bg header__bg"></div>
</header>
<section class="js-page page">
Section 1
</section>
<section class="js-page page">
Section 2
</section>
<section class="js-page page">
Section 3
</section>
<section class="js-page page">
Section 4
</section>
* {
box-sizing: border-box;
}
.header {
background-color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
color: white;
padding: 12px 0;
text-align: center;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
&__content {
z-index: 99;
}
&__bg {
background-color: fuchsia;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
.page {
text-align: center;
padding: 48px 0 6px;
height: 100vh;
background-color: cornflowerblue;
&:nth-of-type(4n+2) {
background-color: goldenrod;
}
&:nth-of-type(4n+3) {
background-color: aquamarine;
}
&:nth-of-type(4n+4) {
background-color: mediumvioletred;
}
}
// jquery
// greensock
// scrollmagic
$(document).ready(function() {
// scrollmagic page transitions
var $pages = $('.js-page');
var $header = $('.js-header');
var $headerBg = $('.js-header-bg');
var headerHeight = $header.outerHeight();
var controller = new ScrollMagic.Controller();
$pages.each(function(i, item) {
var tweenHeaderColor = new TimelineMax()
.set('.js-header-bg', {
'background-color': $(item).css('background-color')
})
.call(function() { console.log($(item).css('background-color')); debugger; })
.to('.js-header-bg', 0.4, {
'height': headerHeight
})
.set('.js-header', {
'background-color': $(item).css('background-color')
})
.set('.js-header-bg', {
'height': 0
});
var transitionPages = new ScrollMagic.Scene({
reverse: true,
triggerElement: item,
triggerHook: 0,
offset: -headerHeight
})
.setTween(tweenHeaderColor)
.addIndicators()
.addTo(controller);
});
});
Also see: Tab Triggers