@import url('https://fonts.googleapis.com/css?family=Electrolize');
/* reset */
*{margin:0; padding:0}
li,ul {list-style:none}
a {text-decoration:none}
body {font-family: 'Electrolize', sans-serif;}
/* nav */
#dot {position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index:1000;}
#dot li {}
#dot li a {position: relative; width: 15px; height: 15px; background-color: rgba(255,255,255,0.5); border-radius: 15px; margin: 8px; display: block;}
#dot li.active a {position: relative; background-color: rgba(255,255,255,1);}
/* dot style */
#dot li a {
background-color: transparent;
box-shadow: inset 0 0 0 2px white;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
#dot li a::after {
content: '';
position: absolute;
bottom: 0;
height: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1px #fff;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
#dot li a:hover {
background-color: rgba(255,255,255,0.4);
}
#dot li.current a::after {
height: 100%;
}
/* contents */
#contents {
font-size: 60px;
color:#fff;
text-align: center;
}
#contents > div {
height: 100vh; line-height: 100vh;
position: relative;
}
/* section */
#section1 {background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
#section2 {background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);}
#section3 {background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);}
#section4 {background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);}
#section5 {background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);}
#section6 {background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
.sec1 .animate.show span {animation: ani1 .35s ease forwards;}
.sec2 .animate.show span {
animation: ani2 .4s forwards;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
}
.sec3 .animate.show span {
animation: ani3 .3s forwards;
transform: translate(200px, -100px) scale(2);
}
.sec4 .animate.show span {
animation: ani4 .5s forwards;
transform: translate(-300px, 0) scale(0);
}
.sec5 .animate.show span {
animation: ani5 .8s forwards;
transform: translate(0, -100px) rotate(360deg) scale(0);
}
.sec6 .animate.show span {
animation: ani6 .5s forwards;
transform: translate(0, -100px) rotate(360deg) scale(0);
}
.animate span {opacity: 0;}
#section1.show .animate span {animation: ani1 .35s ease forwards;}
#section2.show .animate span {animation: ani2 .35s ease forwards;}
#section3.show .animate span {animation: ani3 .35s ease forwards;}
#section4.show .animate span {animation: ani4 .35s ease forwards;}
#section5.show .animate span {animation: ani5 .35s ease forwards;}
#section6.show .animate span {animation: ani6 .35s ease forwards;}
.animate span {opacity: 0; display: inline-block;}
.animate.show span:nth-of-type(1) {animation-delay: 0s;}
.animate.show span:nth-of-type(2) {animation-delay: .05s;}
.animate.show span:nth-of-type(3) {animation-delay: .1s;}
.animate.show span:nth-of-type(4) {animation-delay: .15s;}
.animate.show span:nth-of-type(5) {animation-delay: .2s;}
.animate.show span:nth-of-type(6) {animation-delay: .25s;}
.animate.show span:nth-of-type(7) {animation-delay: .3s;}
.animate.show span:nth-of-type(8) {animation-delay: .35s;}
.animate.show span:nth-of-type(9) {animation-delay: .4s;}
.animate.show span:nth-of-type(10){animation-delay: .45s;}
.animate.show span:nth-of-type(11){animation-delay: .5s;}
.animate.show span:nth-of-type(12){animation-delay: .55s;}
.animate.show span:nth-of-type(13){animation-delay: .6s;}
.animate.show span:nth-of-type(14){animation-delay: .65s;}
.animate.show span:nth-of-type(15){animation-delay: .7s;}
.animate.show span:nth-of-type(16){animation-delay: .75s;}
.animate.show span:nth-of-type(17){animation-delay: .8s;}
.animate.show span:nth-of-type(18){animation-delay: .85s;}
.animate.show span:nth-of-type(19){animation-delay: .9s;}
.animate.show span:nth-of-type(20){animation-delay: .95s;}
.animate.show span:nth-of-type(21){animation-delay: 1.05s;}
.animate.show span:nth-of-type(22){animation-delay: 1.10s;}
.animate.show span:nth-of-type(23){animation-delay: 1.15s;}
.animate.show span:nth-of-type(24){animation-delay: 1.20s;}
.animate.show span:nth-of-type(25){animation-delay: 1.25s;}
.animate.show span:nth-of-type(26){animation-delay: 1.30s;}
.animate.show span:nth-of-type(27){animation-delay: 1.35s;}
.animate.show span:nth-of-type(28){animation-delay: 1.40s;}
.animate.show span:nth-of-type(29){animation-delay: 1.45s;}
.animate.show span:nth-of-type(30){animation-delay: 1.50s;}
@keyframes ani1 {
0% {opacity: 0}
100% {opacity: 1;}
}
@keyframes ani2 {
60% {transform: translate(20px, 20px) rotate(30deg) scale(.3);}
100% {transform: translate(0) rotate(0) scale(1); opacity: 1;}
}
@keyframes ani3 {
60% {transform: translate(0, 20px) rotate(-180deg) scale(.5);}
100% {transform: translate(0) rotate(0deg) scale(1); opacity: 1;}
}
@keyframes ani4 {
60% {transform: translate(20px, 0) scale(1); color: #b10e81;}
80% {transform: translate(20px, 0) scale(1); color: #b10e81;}
99% {transform: translate(0) scale(1.2); color: #00f0ff;}
100% {transform: translate(0) scale(1); color: #fff; opacity: 1;}
}
@keyframes ani5 {
30% {transform: translate(0, -50px) rotate(180deg) scale(1);}
60% {transform: translate(0, 20px) scale(.8) rotate(0deg);}
100% {transform: translate(0) scale(1) rotate(0deg); opacity: 1;}
}
@keyframes ani6 {
30% {transform: translate(0, -50px) rotate(180deg) scale(1);}
50% {transform: translate(0, 20px) scale(.8) rotate(0deg); opacity: 1;}
80% {transform: translate(-100px, -100px) scale(1.5) rotate(-180deg); opacity: 0;}
100% {transform: translate(0) scale(1) rotate(0deg); opacity: 1;}
}
var dot = $("#dot ul li");
var contents = $("#contents > div");
dot.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
var section = contents.eq(index);
var offset = section.offset().top;
$("html,body").animate({scrollTop:offset},600,"easeInOutExpo");
});
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= contents.eq(0).offset().top){
dot.removeClass("active");
dot.eq(0).addClass("active");
}
if(wScroll >= contents.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active");
}
if(wScroll >= contents.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active");
}
if(wScroll >= contents.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active");
}
if(wScroll >= contents.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active");
}
if(wScroll >= contents.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active");
}
if(wScroll >= contents.eq(0).offset().top - $(window).height()/3){
contents.eq(0).find("h2").addClass("show");
}
if(wScroll >= contents.eq(1).offset().top - $(window).height()/3){
contents.eq(1).find("h2").addClass("show");
}
if(wScroll >= contents.eq(2).offset().top - $(window).height()/3){
contents.eq(2).find("h2").addClass("show");
}
if(wScroll >= contents.eq(3).offset().top - $(window).height()/3){
contents.eq(3).find("h2").addClass("show");
}
if(wScroll >= contents.eq(4).offset().top - $(window).height()/3){
contents.eq(4).find("h2").addClass("show");
}
if(wScroll >= contents.eq(5).offset().top - $(window).height()/3){
contents.eq(5).find("h2").addClass("show");
}
});
