388 lines
22 KiB
HTML
388 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.jpg" />
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css?family=Ma+Shan+Zheng|Zhi+Mang+Xing|Liu+Jian+Mao+Cao|Ma+Shan+Zheng|Noto+Serif+SC|Zhi+Mang+Xing|Lakki+Reddy|Comfortaa|Pacifico&display=swap"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcss.com/jquery-smoove/0.2.11/jquery.smoove.min.js"></script>
|
||
|
|
<link
|
||
|
|
href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<!-- <script src="https://cdn.bootcss.com/jquery-parallax/1.1.3/jquery-parallax-min.js"></script> -->
|
||
|
|
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
||
|
|
<title>百变皮影, Shadow Puppets</title>
|
||
|
|
<style>
|
||
|
|
#global_load {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 9998;
|
||
|
|
opacity: 1;
|
||
|
|
clip-path: circle(100%);
|
||
|
|
-webkit-clip-path: circle(100%);
|
||
|
|
/* background: url(./home_wire.png) no-repeat center center; */
|
||
|
|
/* background-size: cover; */
|
||
|
|
transition: opacity 1s ease-in-out;
|
||
|
|
cursor: wait;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: #ede4cd;
|
||
|
|
transition: clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1),
|
||
|
|
-webkit-clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
|
|
}
|
||
|
|
#global_load .loader {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: nowrap column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
/* background-color: rgba(170, 57, 57, 0.781); */
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader .loader_content {
|
||
|
|
position: relative;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: nowrap column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
align-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader .loader_content .content_text {
|
||
|
|
display: inline-block;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 600;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader .loader_content .content_text svg {
|
||
|
|
width: 4em;
|
||
|
|
height: 4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader .loader_content .circle {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: rgba(204, 66, 57, 0.575);
|
||
|
|
background-color: #971919c5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader .loader_content .loading_text {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 2rem;
|
||
|
|
bottom: -100px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: auto;
|
||
|
|
margin: auto;
|
||
|
|
width: 300px;
|
||
|
|
height: 27px;
|
||
|
|
color: #111;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#global_load .bg_text {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: center;
|
||
|
|
align-content: center;
|
||
|
|
align-items: center;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
text-indent: -0.1em;
|
||
|
|
z-index: -1;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#global_load .bg_text .txt {
|
||
|
|
position: relative;
|
||
|
|
top: -30px;
|
||
|
|
color: #e6dcc3;
|
||
|
|
font-size: 26vw;
|
||
|
|
font-family: "Liu Jian Mao Cao", cursive;
|
||
|
|
/* 该字体存在加载问题 */
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: -0.001em;
|
||
|
|
white-space: nowrap;
|
||
|
|
/* transform: rotate(-6deg) translate3d(0, -.1em, 0); */
|
||
|
|
}
|
||
|
|
|
||
|
|
#u-loader {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9999;
|
||
|
|
clip-path: circle(0%);
|
||
|
|
-webkit-clip-path: circle(0%);
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #722626;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: nowrap row;
|
||
|
|
justify-content: center;
|
||
|
|
align-content: center;
|
||
|
|
align-items: center;
|
||
|
|
transition: clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1),
|
||
|
|
-webkit-clip-path 1000ms cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
|
|
}
|
||
|
|
#u-loader .loader-mask-container {
|
||
|
|
width: 40vw;
|
||
|
|
height: auto;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
#u-loader .loader-bg-text {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: center;
|
||
|
|
align-content: center;
|
||
|
|
align-items: center;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
text-indent: -0.1em;
|
||
|
|
z-index: 1;
|
||
|
|
pointer-events: none;
|
||
|
|
color: #e6dcc3;
|
||
|
|
/* color:#115cbd; */
|
||
|
|
/* color: #111; */
|
||
|
|
font-size: 18vw;
|
||
|
|
font-weight: 400;
|
||
|
|
font-family: "Zhi Mang Xing", cursive;
|
||
|
|
/* font-family: "Liu Jian Mao Cao", cursive; */
|
||
|
|
}
|
||
|
|
::selection {
|
||
|
|
color:rgb(206, 57, 57);
|
||
|
|
background-color:transparent;
|
||
|
|
}
|
||
|
|
::-moz-selection {
|
||
|
|
color:rgb(206, 57, 57);
|
||
|
|
background-color:transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-selection{
|
||
|
|
color:rgb(206, 57, 57);
|
||
|
|
background-color:transparent;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function IsSafari() {
|
||
|
|
console.log("User Agent", navigator.userAgent);
|
||
|
|
let isSafari = /^((?!chrome|android).)*safari/i.test(
|
||
|
|
navigator.userAgent
|
||
|
|
);
|
||
|
|
return isSafari;
|
||
|
|
}
|
||
|
|
function IsFireFox(){
|
||
|
|
let userAgent = navigator.userAgent
|
||
|
|
if(userAgent.indexOf("Firefox")!==-1){
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
//随机添加svg到content_text下
|
||
|
|
// 暂时不用
|
||
|
|
function randomInsertSVG() {
|
||
|
|
let randNum = Math.floor(Math.random() * 2) + 1;
|
||
|
|
console.log(randNum);
|
||
|
|
let filename = "./loader_" + randNum + ".svg";
|
||
|
|
let req = new XMLHttpRequest();
|
||
|
|
let svgHack = document.getElementsByClassName("content_text");
|
||
|
|
console.log(svgHack);
|
||
|
|
req.open("GET", filename, true);
|
||
|
|
req.setRequestHeader("Content-Type", "text");
|
||
|
|
req.onreadystatechange = function() {
|
||
|
|
if (req.readyState === 4 && req.status !== 200) {
|
||
|
|
alert("Loading svg Failed");
|
||
|
|
// show the text
|
||
|
|
svgHack[0].innerHTML = "<h4>资源未找到<h4>";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
req.onload = function() {
|
||
|
|
// insert svg into content_text
|
||
|
|
svgHack[0].innerHTML = req.responseText;
|
||
|
|
};
|
||
|
|
req.send();
|
||
|
|
}
|
||
|
|
function transitionToHome() {
|
||
|
|
// now, the page has already been loaded.
|
||
|
|
|
||
|
|
// do something when page loaded but have not executed transition process.
|
||
|
|
setTimeout(function() {
|
||
|
|
$(".loading_text").text("100");
|
||
|
|
// now, 2s after loaded done, time to transite into home page.
|
||
|
|
|
||
|
|
// remove all animated class
|
||
|
|
$(".animated").removeClass("animated");
|
||
|
|
// 缩小成圆圈切换页面
|
||
|
|
$("#global_load").css({
|
||
|
|
"clip-path": "circle(0%)",
|
||
|
|
"-webkit-clip-path": "circle(0%)"
|
||
|
|
});
|
||
|
|
window.loaddone = true; // 标记动作执行完成
|
||
|
|
// $("#global_load").fadeOut(1000)
|
||
|
|
}, 8000);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = transitionToHome;
|
||
|
|
|
||
|
|
// document.onmousemove = function(e){
|
||
|
|
// var w = $('#global_load').width()
|
||
|
|
// var h = $('#global_load').height()
|
||
|
|
// var eX = e.clientX
|
||
|
|
// var eY = e.clientY
|
||
|
|
// let rotateX = (-1+ 2 *eX/w)*10
|
||
|
|
// console.log(rotateX)
|
||
|
|
// let rotateY = -(-1 + 2 *eY/h)*10
|
||
|
|
// console.log(rotateY)
|
||
|
|
// $('#global_load').css({transform:'scale(0.85) rotateX('+rotateY+'deg) rotateY('+rotateX+'deg) perspective(1000)'})
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="overflow-x:hidden;">
|
||
|
|
<noscript>
|
||
|
|
<strong
|
||
|
|
>We're sorry but front doesn't work properly without JavaScript enabled.
|
||
|
|
Please enable it to continue.</strong
|
||
|
|
>
|
||
|
|
</noscript>
|
||
|
|
<div class="wrapper">
|
||
|
|
<div id="global_load">
|
||
|
|
<div class="loader">
|
||
|
|
<div class="loader_content">
|
||
|
|
<div class="content_text zoomIn animated">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
viewBox="0 0 519.68 643.03"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<style>
|
||
|
|
.path {
|
||
|
|
fill: none;
|
||
|
|
stroke: #fff;
|
||
|
|
stroke-miterlimit: 10;
|
||
|
|
}
|
||
|
|
.path {
|
||
|
|
stroke-width: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</defs>
|
||
|
|
<title>正式效果</title>
|
||
|
|
<g id="图层_2" data-name="图层 2">
|
||
|
|
<g id="图层_19" data-name="图层 19">
|
||
|
|
<g id="皮影-张飞">
|
||
|
|
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="circle zoomIn animated fast"></div>
|
||
|
|
<div class="loading_text fadeInUpBig faster animated">
|
||
|
|
请稍等
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg_text">
|
||
|
|
<div class="txt fadeInUpBig faster animated">
|
||
|
|
百变皮影
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="u-loader">
|
||
|
|
<!-- 备用的全局切换效果 -->
|
||
|
|
<div class="loader-mask-container">
|
||
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.22 576.21"><defs><style>.u-load{fill:none;stroke:#111;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>正在加载2_refined</title><g id="图层_2" data-name="图层 2"><g id="图层_14_复制" data-name="图层 14_复制"><g id="正在加载2_refined"><path class="u-load" d="M25.51,212.58c4-.79,2.15-19.9,4-38,1.78-17.37,6.58-30,10-39,7.7-20.25,17.47-34,26-46,6.55-9.19,14.65-20.55,28-33,21.63-20.17,42.85-30,54-35a221.45,221.45,0,0,1,52-16,192.07,192.07,0,0,1,44-4,198.51,198.51,0,0,1,28,3c12.62,2.06,30.09,5,51,14a196.37,196.37,0,0,1,25,13,194.32,194.32,0,0,1,34,25,177.55,177.55,0,0,1,30,36c4.88,7.88,7.83,14.15,12,23a271.74,271.74,0,0,1,14,35c3.14,9.86,6.55,20.55,8,34,1.19,11,1.79,16.56.61,22.68-.51,2.64-1.57,6.91-.61,7.32,1.51.65,4.93-9.6,11-10,4.16-.27,7.62,4.2,9,6,3.1,4,4.13,8.32,5,16a124.28,124.28,0,0,1,1,24c-.43,7.39-.88,15.18-4,25a81.37,81.37,0,0,1-8,18c-3.82,6.32-5.8,7.54-9,14a63.39,63.39,0,0,0-5,14c-2.07,9.24-.34,12.05-2,21a65.87,65.87,0,0,1-5,15,37.36,37.36,0,0,1-5,9c-2.65,3.37-4.17,3.85-5,4-2.76.5-4.21-1.61-6-1-2.94,1-3,8.12-3,9-.17,11.41-3.23,22.62-4,34-.8,11.87-3.83,20-9,34a183.56,183.56,0,0,1-27,48c-12.2,15.74-23.67,25.35-34,34-10.62,8.9-21.86,18.21-39,27a174.15,174.15,0,0,1-37,14c-9.82,2.46-23.29,5.82-41,5-21.95-1-38-7.89-50-13a195.13,195.13,0,0,1-31-17,222.83,222.83,0,0,1-40-35c-10-11.05-22.7-25.2-33-47a192.47,192.47,0,0,1-12-33c-1.1-4.3-6.43-23.41-7-37-.06-1.47-.37-4.31-1-10-1-8.88-1.42-10.76-3-12-2.8-2.2-5.56.45-10-1-5.66-1.84-8.22-8.44-10-13-.78-2-2.11-5.91-3-22-.7-12.74,0-12.87-1-17-1.32-5.52-2.79-6.24-10-19-7.91-14-10.63-21.08-12-25a70.09,70.09,0,0,1-3-11,78.15,78.15,0,0,1-1-15c.14-9.71,1.44-15.51,4-27,.63-2.81,1.6-6.85,5-10,1.06-1,3.18-2.93,6-3C21.34,207.47,23.3,213,25.51,212.58Z"/><path class="u-load" d="M128,529.08c-4.55-4.92-7.7-14.62-14-34a85.13,85.13,0,0,1-4-18c-.55-5.18-2.07-22,6-39a115.06,115.06,0,0,1,7-12c5.15-8.18,7.69-10.94,10-13,3-2.7,3.84-2.58,7-5,10.76-8.23,15-20.05,16-23,2.22-6.45.48-5.84,3-14,2.26-7.31,4.25-13.77,10-19,.68-.61,10.14-9,18-6a8.26,8.26,0,0,1,4,3c2.71,4.05.3,9.87-1,13-2.66,6.41-5.07,6.31-7,12a21.07,21.07,0,0,0-1,11,19.84,19.84,0,0,0,11,14c5.82,2.64,13.19,2.24,14,0,.89-2.45-6.67-5.51-6-10,.39-2.56,3.33-4.74,6-5,2.86-.28,4.64,1.7,9,5,4,3,8.43,6.37,13,8,1.44.51,8.85,3,16,0,6.83-2.84,6.86-7.92,16-12,5.35-2.39,7.26-1.5,8-1,2,1.34,2.56,4.56,2,7-1.1,4.83-6.54,6.29-6,8,.64,2,8.5,1.06,9,1,3.75-.47,7.68-1,11-4s4.1-6.78,5-11c.65-3,1.66-7.76,0-13-1.73-5.5-4.47-5.5-7-12-1.38-3.56-3.12-8-1-11,2.9-4.05,11.05-2.23,12-2,5.58,1.32,8.7,5.38,14,12a21,21,0,0,1,4,7c.7,2.2.45,2.87,1,6a51.74,51.74,0,0,0,3,10,62.65,62.65,0,0,0,4,9c2.74,5,5.57,8.14,9,12,4,4.48,6.13,6.14,9,9a86.31,86.31,0,0,1,16,22,81,81,0,0,1,7,21,83.23,83.23,0,0,1,1,24c-1,9.49-3.34,16.32-6,24-.15.43-2.43,6-7,17-1.6,3.88-2.44,5.87-4,8-1.81,2.48-4.54,4.66-10,9-.39.32-.31.25-8,6-4.95,3.7-5.67,4.25-6,4-1.09-.83,5.27-8.2,9-19,3-8.63,3-15.7,3-28,0-8.63,0-14.8-2-23-1.45-5.92-3.27-13.32-9-21a49.41,49.41,0,0,0-21-16c-5.9-2.37-13-2.94-27-4-11.39-.86-14.83-2.2-20-1-7.44,1.73-11.16,2.6-14,5-1,.85-2.31,2.16-4,2-2.28-.22-2.87-2.91-6-5-1-.7-2.13-1.16-6-2a71,71,0,0,0-13-2c-7.63-.34-13.52.91-23,3s-14.34,3.16-20,6a45.44,45.44,0,0,0-14,10c-7.33,8-9.5,16.88-11,23a84.17,84.17,0,0,0-2,15,134.4,134.4,0,0,0,0,20c.62,8.29,1,13,3,19,1.43,4.22,3.28,9.73,8,15,2.72,3,5.21,4.7,5,5-.37.52-8-4.1-15-9C134.69,534.93,131,532.35,128,529.08Z"/><path class="u-load" d="M170,441.08a44,44,0,0,1,18,3c3.18,1.29,3.88,2.05,10,5a121.45,121.45,0,0,0,14,6c8.18,2.71,14.83,2.85,22,3a94.52,94.52,0,0,0,22-2,68.84,68.84,0,0,0,13-4c7.41-3.16,6.66-4.49,13-7a42.5,42.5,0,0,1,19-3,38.49,38.49,0,0,1,6,1"/><path class="u-load" d="M35,177.08c-3.95,7.74-4,14.8-4,28,0,1.92,0,8.65,1,18,.23,2.27.85,8,4,25,2.25,12.12,3.37,18.18,5,25,2.54,10.58,5.11,18.9,7,25,5,16.2,6.57,18.15,8,26,.93,5.09-.1,3.25,1,23a77.19,77.19,0,0,1,0,13c-.44,4.58-.85,9-2,12a17.84,17.84,0,0,0-1,4,18.83,18.83,0,0,0-.09,3c0,.62-.06.85.09,1,.69.78,3.73-.85,4-1,4.65-2.5,6.2-12.15,7-18,1.48-10.72,2.21-16.08,2-22-.26-7.33-1.51-13.55-4-26-1.82-9.11-
|
||
|
|
</div>
|
||
|
|
<div class="loader-bg-text">
|
||
|
|
百变皮影
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="app"></div>
|
||
|
|
</div>
|
||
|
|
<!-- built files will be auto injected -->
|
||
|
|
<script>
|
||
|
|
// randomInsertSVG()
|
||
|
|
// load loader
|
||
|
|
const svgPath = document.querySelectorAll(".path");
|
||
|
|
|
||
|
|
const svgText = anime({
|
||
|
|
targets: svgPath,
|
||
|
|
loop: true,
|
||
|
|
direction: "alternate",
|
||
|
|
strokeDashoffset: [anime.setDashoffset, 0],
|
||
|
|
easing: "easeInOutSine",
|
||
|
|
duration: 1000,
|
||
|
|
delay: (el, i) => {
|
||
|
|
return i * 500;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const progressNum = document.querySelectorAll('.loading_text')
|
||
|
|
anime({
|
||
|
|
targets: progressNum,
|
||
|
|
direction:'normal',
|
||
|
|
innerText:[0, 99],
|
||
|
|
round:1,
|
||
|
|
duration:8000,
|
||
|
|
easing:'linear'
|
||
|
|
})
|
||
|
|
// u-load
|
||
|
|
// const svgPath2 = document.querySelectorAll(".u-load");
|
||
|
|
|
||
|
|
// const svgText2 = anime({
|
||
|
|
// targets: svgPath2,
|
||
|
|
// loop: true,
|
||
|
|
// direction: "alternate",
|
||
|
|
// strokeDashoffset: [anime.setDashoffset, 0],
|
||
|
|
// easing: "easeInOutSine",
|
||
|
|
// duration: 1000,
|
||
|
|
// delay: (el, i) => {
|
||
|
|
// return i * 500;
|
||
|
|
// },
|
||
|
|
|
||
|
|
// });
|
||
|
|
</script>
|
||
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcss.com/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|