|
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400); |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
html, body { |
|
height: 100%; |
|
} |
|
section { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
section::after { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
content: ''; |
|
width: 100%; |
|
height: 80%; |
|
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); |
|
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); |
|
} |
|
section h1 { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
z-index: 2; |
|
-webkit-transform: translate(-50%, -50%); |
|
transform: translate(-50%, -50%); |
|
color: #fff; |
|
font : normal 300 64px/1 'Josefin Sans', sans-serif; |
|
text-align: center; |
|
white-space: nowrap; |
|
} |
|
|
|
#section01 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg01.jpg) center center / cover no-repeat;} |
|
#section02 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg02.jpg) center center / cover no-repeat;} |
|
#section03 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg03.jpg) center center / cover no-repeat;} |
|
#section04 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg04.jpg) center center / cover no-repeat;} |
|
#section05 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg05.jpg) center center / cover no-repeat;} |
|
#section06 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg06.jpg) center center / cover no-repeat;} |
|
#section07 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg07.jpg) center center / cover no-repeat;} |
|
#section08 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg08.jpg) center center / cover no-repeat;} |
|
#section09 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg09.jpg) center center / cover no-repeat;} |
|
#section10 { background: url(http://www.nxworld.net/codepen/css-scroll-down-button/bg10.jpg) center center / cover no-repeat;} |
|
|
|
#thanks { |
|
background-color: #fff; |
|
} |
|
#thanks::after { |
|
content: none; |
|
} |
|
#thanks div { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
z-index: 2; |
|
-webkit-transform: translate(-50%, -50%); |
|
transform: translate(-50%, -50%); |
|
text-align: center; |
|
} |
|
#thanks h1 { |
|
position: static; |
|
-webkit-transform: translate(0, 0); |
|
transform: translate(0, 0); |
|
margin-bottom: 60px; |
|
color: #333; |
|
} |
|
#thanks p { |
|
color: #333; |
|
font : normal 400 20px/1 'Josefin Sans', sans-serif; |
|
} |
|
#thanks p a { |
|
color: #333; |
|
text-decoration: none; |
|
transition: color .3s; |
|
} |
|
#thanks p a:hover { |
|
color: #888; |
|
} |
|
.demo a { |
|
position: absolute; |
|
bottom: 20px; |
|
left: 50%; |
|
z-index: 2; |
|
display: inline-block; |
|
-webkit-transform: translate(0, -50%); |
|
transform: translate(0, -50%); |
|
color: #fff; |
|
font : normal 400 20px/1 'Josefin Sans', sans-serif; |
|
letter-spacing: .1em; |
|
text-decoration: none; |
|
transition: opacity .3s; |
|
} |
|
.demo a:hover { |
|
opacity: .5; |
|
} |
|
|
|
|
|
|
|
#section01 a { |
|
padding-top: 60px; |
|
} |
|
#section01 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 24px; |
|
height: 24px; |
|
margin-left: -12px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
box-sizing: border-box; |
|
} |
|
|
|
|
|
|
|
#section02 a { |
|
padding-top: 60px; |
|
} |
|
#section02 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 46px; |
|
height: 46px; |
|
margin-left: -23px; |
|
border: 1px solid #fff; |
|
border-radius: 100%; |
|
box-sizing: border-box; |
|
} |
|
#section02 a span::after { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
content: ''; |
|
width: 16px; |
|
height: 16px; |
|
margin: -12px 0 0 -8px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
box-sizing: border-box; |
|
} |
|
|
|
|
|
|
|
#section03 a { |
|
padding-top: 60px; |
|
} |
|
#section03 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 46px; |
|
height: 46px; |
|
margin-left: -23px; |
|
border: 1px solid #fff; |
|
border-radius: 100%; |
|
box-sizing: border-box; |
|
} |
|
#section03 a span::after { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
content: ''; |
|
width: 16px; |
|
height: 16px; |
|
margin: -12px 0 0 -8px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
box-sizing: border-box; |
|
} |
|
#section03 a span::before { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
content: ''; |
|
width: 44px; |
|
height: 44px; |
|
box-shadow: 0 0 0 0 rgba(255,255,255,.1); |
|
border-radius: 100%; |
|
opacity: 0; |
|
-webkit-animation: sdb03 3s infinite; |
|
animation: sdb03 3s infinite; |
|
box-sizing: border-box; |
|
} |
|
@-webkit-keyframes sdb03 { |
|
0% { |
|
opacity: 0; |
|
} |
|
30% { |
|
opacity: 1; |
|
} |
|
60% { |
|
box-shadow: 0 0 0 60px rgba(255,255,255,.1); |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes sdb03 { |
|
0% { |
|
opacity: 0; |
|
} |
|
30% { |
|
opacity: 1; |
|
} |
|
60% { |
|
box-shadow: 0 0 0 60px rgba(255,255,255,.1); |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
|
|
|
|
#section04 a { |
|
padding-top: 60px; |
|
} |
|
#section04 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 24px; |
|
height: 24px; |
|
margin-left: -12px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
-webkit-animation: sdb04 2s infinite; |
|
animation: sdb04 2s infinite; |
|
box-sizing: border-box; |
|
} |
|
@-webkit-keyframes sdb04 { |
|
0% { |
|
-webkit-transform: rotate(-45deg) translate(0, 0); |
|
} |
|
20% { |
|
-webkit-transform: rotate(-45deg) translate(-10px, 10px); |
|
} |
|
40% { |
|
-webkit-transform: rotate(-45deg) translate(0, 0); |
|
} |
|
} |
|
@keyframes sdb04 { |
|
0% { |
|
transform: rotate(-45deg) translate(0, 0); |
|
} |
|
20% { |
|
transform: rotate(-45deg) translate(-10px, 10px); |
|
} |
|
40% { |
|
transform: rotate(-45deg) translate(0, 0); |
|
} |
|
} |
|
|
|
|
|
|
|
#section05 a { |
|
padding-top: 70px; |
|
} |
|
#section05 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 24px; |
|
height: 24px; |
|
margin-left: -12px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
-webkit-animation: sdb05 1.5s infinite; |
|
animation: sdb05 1.5s infinite; |
|
box-sizing: border-box; |
|
} |
|
@-webkit-keyframes sdb05 { |
|
0% { |
|
-webkit-transform: rotate(-45deg) translate(0, 0); |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
-webkit-transform: rotate(-45deg) translate(-20px, 20px); |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes sdb05 { |
|
0% { |
|
transform: rotate(-45deg) translate(0, 0); |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: rotate(-45deg) translate(-20px, 20px); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
|
|
|
|
#section06 a { |
|
padding-top: 70px; |
|
} |
|
#section06 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 24px; |
|
height: 24px; |
|
margin-left: -12px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotateZ(-45deg); |
|
transform: rotateZ(-45deg); |
|
-webkit-animation: sdb06 1.5s infinite; |
|
animation: sdb06 1.5s infinite; |
|
box-sizing: border-box; |
|
} |
|
@-webkit-keyframes sdb06 { |
|
0% { |
|
-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0); |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px); |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes sdb06 { |
|
0% { |
|
transform: rotateY(0) rotateZ(-45deg) translate(0, 0); |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
|
|
|
|
#section07 a { |
|
padding-top: 80px; |
|
} |
|
#section07 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 24px; |
|
height: 24px; |
|
margin-left: -12px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
-webkit-animation: sdb07 2s infinite; |
|
animation: sdb07 2s infinite; |
|
opacity: 0; |
|
box-sizing: border-box; |
|
} |
|
#section07 a span:nth-of-type(1) { |
|
-webkit-animation-delay: 0s; |
|
animation-delay: 0s; |
|
} |
|
#section07 a span:nth-of-type(2) { |
|
top: 16px; |
|
-webkit-animation-delay: .15s; |
|
animation-delay: .15s; |
|
} |
|
#section07 a span:nth-of-type(3) { |
|
top: 32px; |
|
-webkit-animation-delay: .3s; |
|
animation-delay: .3s; |
|
} |
|
@-webkit-keyframes sdb07 { |
|
0% { |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes sdb07 { |
|
0% { |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
|
|
|
|
#section08 a { |
|
padding-top: 60px; |
|
} |
|
#section08 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 30px; |
|
height: 50px; |
|
margin-left: -15px; |
|
border: 2px solid #fff; |
|
border-radius: 50px; |
|
box-sizing: border-box; |
|
} |
|
#section08 a span::before { |
|
position: absolute; |
|
top: 10px; |
|
left: 50%; |
|
content: ''; |
|
width: 6px; |
|
height: 6px; |
|
margin-left: -3px; |
|
background-color: #fff; |
|
border-radius: 100%; |
|
box-sizing: border-box; |
|
} |
|
|
|
|
|
|
|
#section09 a { |
|
padding-top: 80px; |
|
} |
|
#section09 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 30px; |
|
height: 50px; |
|
margin-left: -15px; |
|
border: 2px solid #fff; |
|
border-radius: 50px; |
|
box-sizing: border-box; |
|
} |
|
#section09 a span::before { |
|
position: absolute; |
|
top: 10px; |
|
left: 50%; |
|
content: ''; |
|
width: 6px; |
|
height: 6px; |
|
margin-left: -3px; |
|
background-color: #fff; |
|
border-radius: 100%; |
|
box-sizing: border-box; |
|
} |
|
#section09 a span::after { |
|
position: absolute; |
|
bottom: -18px; |
|
left: 50%; |
|
width: 18px; |
|
height: 18px; |
|
content: ''; |
|
margin-left: -9px; |
|
border-left: 1px solid #fff; |
|
border-bottom: 1px solid #fff; |
|
-webkit-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
box-sizing: border-box; |
|
} |
|
|
|
|
|
|
|
#section10 a { |
|
padding-top: 60px; |
|
} |
|
#section10 a span { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
width: 30px; |
|
height: 50px; |
|
margin-left: -15px; |
|
border: 2px solid #fff; |
|
border-radius: 50px; |
|
box-sizing: border-box; |
|
} |
|
#section10 a span::before { |
|
position: absolute; |
|
top: 10px; |
|
left: 50%; |
|
content: ''; |
|
width: 6px; |
|
height: 6px; |
|
margin-left: -3px; |
|
background-color: #fff; |
|
border-radius: 100%; |
|
-webkit-animation: sdb10 2s infinite; |
|
animation: sdb10 2s infinite; |
|
box-sizing: border-box; |
|
} |
|
@-webkit-keyframes sdb10 { |
|
0% { |
|
-webkit-transform: translate(0, 0); |
|
opacity: 0; |
|
} |
|
40% { |
|
opacity: 1; |
|
} |
|
80% { |
|
-webkit-transform: translate(0, 20px); |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes sdb10 { |
|
0% { |
|
transform: translate(0, 0); |
|
opacity: 0; |
|
} |
|
40% { |
|
opacity: 1; |
|
} |
|
80% { |
|
transform: translate(0, 20px); |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 0; |
|
} |
|
} |