加载中
</div>
<div class="text-frame js-animate animated" data-animate="rotateIn" data-time="1200" data-sec="pulseing"
data-sectime="1200">
</div>
</div>
<div class="ele-wrap">
<h4 class="js-animate animated animation-500" data-animate="bounceInDown" data-time="500" data-sec="zoomOut"
data-sectime="700" style="position: absolute;top: 40%;width: 100%;text-align: center;">准备</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="1500"
data-sec="bounceOutUp" data-sectime="500" style="position: absolute;top: 40%;left: 15%">准备</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="1500"
data-sec="bounceOutDown" data-sectime="500" style="position: absolute;top: 40%;right: 15%">好了吗</h4>
<div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="2500"
data-sec="rotateOutDownLeft" data-sectime="500"
style="position: absolute;top: 40%;width: 100%;text-align: center;">
<h4>这</h4>
<h4 style="margin-top: 10%;">是一个</h4>
</div>
<h4 class="js-animate animated animation-500" data-animate="swing" data-time="3000" data-sec="zoomOutDown"
data-sectime="500" style="position: absolute;top: 20%;width: 100%;text-align: center;">
甜蜜的
</h4>
<h4 class="js-animate animated animation-500" data-animate="swing" data-time="3500" data-sec="fadeOutUpBig"
data-sectime="500" style="position: absolute;top: 30%;width: 100%;text-align: center;">
婚礼
</h4>
<h4 class="js-animate animated animation-500" data-animate="swing" data-time="3500" data-sec="fadeOutDownBig"
data-sectime="500" style="position: absolute;top: 40%;width: 100%;text-align: center;">
邀请函
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="4000" data-sec="fadeOutUp"
data-sectime="500" style="position: absolute;top: 35%;width: 100%;text-align: center;">
各位
</h4>
<!-- <h4 class="js-animate animated animation-500"
data-animate="fadeInUp"
data-time="4500"
data-sec="fadeOutUp"
data-sectime="5000"
style="position: absolute;top: 10%;width: 100%;text-align: center;">
各位
</h4> -->
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4500" data-sec="zoomOut"
data-sectime="3600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
姨娘
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4700" data-sec="zoomOut"
data-sectime="3400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
姨夫
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4900" data-sec="zoomOut"
data-sectime="3200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
伯伯
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5100" data-sec="zoomOut"
data-sectime="3000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
婶婶
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5300" data-sec="zoomOut"
data-sectime="2800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
姑姑
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5500" data-sec="zoomOut"
data-sectime="2600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
姑爷
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5700" data-sec="zoomOut"
data-sectime="2400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
侄儿
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5900" data-sec="zoomOut"
data-sectime="2200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
侄女
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6100" data-sec="zoomOut"
data-sectime="2000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
兄弟
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6300" data-sec="zoomOut"
data-sectime="1800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
姐妹
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6500" data-sec="zoomOut"
data-sectime="1600" style="position: absolute;top: 60%;left: 35%;text-align: center;">
舅舅
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6700" data-sec="zoomOut"
data-sectime="1400" style="position: absolute;top: 40%;right: 40%;text-align: center;">
舅妈
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6900" data-sec="zoomOut"
data-sectime="1200" style="position: absolute;top: 23%;left: 40%;text-align: center;">
同事
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7100" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 45%;right: 28%;text-align: center;">
同学
</h4>
<h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7300" data-sec="zoomOut"
data-sectime="800" style="position: absolute;top: 58%;right: 20%;text-align: center;">
好友
</h4>
<h4 class="js-animate animated animation-600" data-animate="bounceInDown" data-time="8000" data-sec="zoomOut"
data-sectime="1500" style="position: absolute;top: 30%;width: 100%;text-align: center;">
诚<br>挚
</h4>
<h4 class="js-animate animated animation-600" data-animate="bounceInUp" data-time="8500" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 45%;width: 100%;text-align: center;">
邀<br>请
</h4>
<h4 class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="9500" data-sec="slideOutUp"
data-sectime="1100" style="position: absolute;top: 30%;width: 100%;text-align: center;">
您
</h4>
<h4 class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="10000"
data-sec="slideOutDown" data-sectime="600"
style="position: absolute;top: 45%;width: 100%;text-align: center;">
携家人
</h4>
<h3 class="js-animate animated animation-500" data-animate="bounceInUp" data-time="11000"
data-sec="zoomOutDown" data-sectime="600"
style="position: absolute;top: 20%;width: 100%;text-align: center;letter-spacing: 3px;line-height: 40px;">
参加<br>婚礼
</h3>
<h2 class="js-animate animated" data-animate="bounceInDown" data-time="12500"
style="position: absolute;top: 28%;width: 100%;text-align: center;font-size: 32px;font-weight: 500;">
我<br>们<br>结<br>婚<br>啦<br>!
</h2>
</div>
</div>
<div class="page page2">
<div class="photo-wrap">
<div class="full-bg js-animate animated animation-1000"
style="background-image: url(./public/photo/3.jpg);width: 100%;height: 100%;" data-animate="myzoomIn">
</div>
</div>
<div class="ele-wrap">
<div class="js-animate animated" data-animate="bounceInDown" data-time="0"
style="position: absolute;top: 60%;width: 80%;left: 15%;text-align: center;">
<img style="max-width: 100%;" src="./public/meta/wedding.png">
</div>
<div style="position: absolute;top: 69%;left: 0;width: 100%;text-align: center;height: 20%;">
<img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="500"
src="./public/meta/hun.png" style="position: absolute;left: 15%;">
<img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="600"
src="./public/meta/li.png" style="position: absolute;left: 30%;">
<img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="700"
src="./public/meta/yao.png" style="position: absolute;left: 44%; top: 5%;">
<img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="800"
src="./public/meta/qing.png" style="position: absolute;left: 56%;top: 5%;">
<img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="900"
src="./public/meta/han.png" style="position: absolute;left: 69%;top: 5%;">
</div>
<div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="1500"
style="position: absolute;top: 80%;text-align: center;">
</div>
<div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="2000"
style="position: absolute;top: 80%;text-align: center;">
<div class="js-animate animated animation-500" data-animate="fadeInRight" data-time="2500"
style="position: absolute;left: 10%;">
新娘: 三笠
</div>
<div class="js-animate animated animation-500" data-animate="fadeInLeft" data-time="2500"
style="position: absolute;right: 10%;">
新郎: 兵长
</div>
<div class="js-animate animated animation-800 circle-box" data-animate="myzoomIn" data-time="3000"
data-sec="shake" data-sectime="800">
<img src="./public/meta/zuanshi.png">
</div>
</div>
<div class="js-animate animated" data-animate="bounceInUp" data-time="3800"
style="position: absolute;top: 88%;left: 0;width: 100%;text-align: center;color: #3a3f58;font-size: 14px;">
欢迎12月25日参见我们的婚礼
</div>
<div class="js-animate animated animation-2000" data-animate="zoomIn" data-time="5000"
style="position: absolute;top: 95%;left: 0;width: 100%;text-align: center;">
<img src="./public/meta/invitation.png" style="max-width: 75%;">
</div>
</div>
</div>
<div class="page page3">
<div class="photo-wrap">
<div class="full-bg js-animate animated animation-5000"
style="background-image: url(./public/photo/6.jpg);width: 100%;height: 100%;" data-sec="zoomCycle"
data-time="0">
</div>
<div class="full-bg js-animate animated animation-800"
style="background-image: url(./public/photo/4.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
data-animate="zoomIn" data-time="10500">
</div>
<div class="text-frame js-animate animated" data-animate="bounceInUp" data-time="1000" data-sec="fadeOutUp"
data-sectime="9000">
</div>
<div class="text-frame js-animate animated" data-animate="bounceInDown" data-time="1000"
data-sec="fadeOutDown" data-sectime="9000">
</div>
</div>
<div class="ele-wrap">
<h4 class="js-animate animated animation-800" data-animate="myzoomIn" data-time="1500" data-sec="zoomOut"
data-sectime="800" style="position: absolute;top: 40%;width: 100%;text-align: center;">她是</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500"
data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
人见</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY"
data-sectime="500" style="position: absolute;top: 50%;width: 100%;text-align: center;">人爱</h4>
<div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000"
data-sec="zoomOutDown" data-sectime="500"
style="position: absolute;top: 45%;width: 100%;text-align: center;">
<h4>花见</h4>
<h4>花开</h4>
</div>
<h2 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut"
data-sectime="3000" style="position: absolute;top: 35%;width: 100%;text-align: center;">
集
</h2>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut"
data-sectime="2600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
温柔
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut"
data-sectime="2400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
善良
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut"
data-sectime="2200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
聪明
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut"
data-sectime="2000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
美丽
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut"
data-sectime="1800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
可爱
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut"
data-sectime="1600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
性感
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut"
data-sectime="1400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
贤惠
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut"
data-sectime="1200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
萝莉
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
御姐
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7300" data-sec="zoomOut"
data-sectime="800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
女王
</h4>
<h4 class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 30%;width: 100%;text-align: center;">
于一身
</h4>
<h4 class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
的
</h4>
<h4 class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 50%;width: 100%;text-align: center;">
新娘
</h4>
<div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="flashing"
data-time="900"
style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">
</div>
<div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500"
style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;">
<p style="margin-top: 43%;color: #3a3f58;">新 娘</p>
<img src="./public/meta/bride.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
</div>
<h3 class="js-animate animated animation-800" data-animate="fadeInRight" data-time="10500"
style="position: absolute;top: 71%;width: 40%;right: 10%;text-align: center;">
三 笠
</h3>
</div>
</div>
<div class="page page4">
<div class="photo-wrap">
<div class="full-bg js-animate animated animation-5000"
style="background-image: url(./public/photo/7.jpg);width: 100%;height: 100%;" data-sec="zoomCycle"
data-time="0">
</div>
<div class="full-bg js-animate animated animation-600"
style="background-image: url(./public/photo/8.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
data-animate="zoomIn" data-time="10500">
</div>
<div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="1000"
data-sec="lightSpeedOut" data-sectime="7500">
</div>
<div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="2000"
data-sec="lightSpeedOut" data-sectime="8000">
</div>
</div>
<div class="ele-wrap">
<h4 class="js-animate animated animation-800" data-animate="myzoomIn" data-time="1500" data-sec="zoomOut"
data-sectime="800" style="position: absolute;top: 40%;width: 100%;text-align: center;">他不仅</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500"
data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
风趣</h4>
<h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY"
data-sectime="500" style="position: absolute;top: 50%;width: 100%;text-align: center;">幽默</h4>
<div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000"
data-sec="zoomOutDown" data-sectime="500"
style="position: absolute;top: 45%;width: 100%;text-align: center;">
<h4>器宇</h4>
<h4>轩昂</h4>
</div>
<h2 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut"
data-sectime="3000" style="position: absolute;top: 35%;width: 100%;text-align: center;">
而且
</h2>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut"
data-sectime="2600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
英俊
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut"
data-sectime="2400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
潇洒
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut"
data-sectime="2200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
聪明
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut"
data-sectime="2000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
善良
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut"
data-sectime="1800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
诚恳
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut"
data-sectime="1600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
开朗
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut"
data-sectime="1400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
才华
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut"
data-sectime="1200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
细心
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
勤劳
</h4>
<h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7300" data-sec="zoomOut"
data-sectime="800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
总裁范
</h4>
<h4 class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 30%;width: 100%;text-align: center;">
能做饭
</h4>
<h4 class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
会挣钱
</h4>
<h4 class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut"
data-sectime="1000" style="position: absolute;top: 50%;width: 100%;text-align: center;">
新郎
</h4>
<div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="pulseing"
data-time="900"
style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">
</div>
<div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500"
style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;">
<p style="margin-top: 43%;color: #3a3f58;">新 郎</p>
<img src="./public/meta/lang.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
</div>
<h3 class="js-animate animated animation-800" data-animate="fadeInRight" data-time="10500"
style="position: absolute;top: 71%;width: 40%;left: 10%;text-align: center;">
兵 长
</h3>
</div>
</div>
<div class="page page5">
<div class="photo-wrap">
<div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="500" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;
background-image: url(./public/photo/9.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="fadeInDown" data-time="3000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;
background-image: url(./public/photo/10.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="fadeInUp" data-time="6000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;
background-image: url(./public/photo/11.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="9000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;
background-image: url(./public/photo/12.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="rollIn" data-time="12000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;
background-image: url(./public/photo/18.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="15000"
style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 6;
background-image: url(./public/photo/14.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="rotateIn" data-time="18000" style="position: absolute;width: 100%;height: 38%;top: 0;left: 0;z-index: 7;
background-image: url(./public/photo/15.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="18000"
style="position: absolute;width: 100%;height: 62%;top: 38%;left: 0;z-index: 8;
background-image: url(./public/photo/16.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="21000"
style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;
background-image: url(./public/photo/17.jpg);"></div>
<div class="photo-box js-animate animated animation-2000" data-animate="zoomIn" data-time="24000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;
background-image: url(./public/photo/13.jpg);"></div>
<h4 class="js-animate animated animation-2000" data-animate="myzoomIn" data-time="24000"
style="position: absolute;width: 100%;bottom: 6%;left: 0;z-index: 11;text-align: center;line-height: 28px;">
12月25日<br>
成都市高新区会展中心
</h4>
<div class="text-frame js-animate animated" data-animate="zoomInLeft" data-time="1000" data-sec="pulseing"
data-sectime="1000">
</div>
<div class="text-frame js-animate animated" data-animate="zoomInRight" data-time="1000" data-sec="pulseing"
data-sectime="1500">
</div>
</div>
<div class="ele-wrap">
</div>
</div>
<div class="page page6" style="position: relative;">
<div id="map"></div>
<div id="location-btn"><i class="iconfont" style="font-size: 32px;"></i></div>
<div id="map-msg">
<p class="js-animate animated" data-animate="bounceInDown" data-time="0"><i
class="iconfont red-icon"></i>成都市高新区新国际会展中心，距离天府广场约13公里</p>
<p class="js-animate animated" data-animate="bounceInLeft" data-time="1000"><i
class="iconfont red-icon"></i>天府大道中段转世纪城路</p>
<p class="js-animate animated" data-animate="bounceInRight" data-time="2000"><i
class="iconfont red-icon"></i>一号线世纪城站</p>
<p class="js-animate animated" data-animate="bounceInUp" data-time="3000"><i
class="iconfont red-icon"></i>有任何疑问请致电 新郎&新娘</p>
</div>
</div>
</div>
<span class="start"><i class="iconfont" style="color: #fff;font-size: 30px;"></i></span>
<audio id="mp3" src="./public/music/music.mp3" autoplay loop></audio>
<script src="./public/js/js.fullpage.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=S6EO9oPso0n8aTMvfH1g0aLUX6vGZx1l"></script>
<script>
// 滚屏动画控制
if (isMobile !== false) {
var loadTimer = setInterval(() => {
console.log(loadSum)
if (loadSum >= 17) {
start()
}
}, 300);
}
var domLists = []
var mapFlag = false
function start() {
clearInterval(loadTimer);
var forEach = [].forEach;
setTimeout(() => {
document.getElementById('loading-mask').style.display = 'none'
}, 100);
document.getElementsByClassName('wp-inner')[0].fullpage({
change: function (e) {
clearTime()
// 移除动画属性
forEach.call(document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate'), function (v) {
v.classList.add('hide');
v.classList.remove(v.dataset['animate']);
if (v.dataset['sec']) {
v.classList.remove(v.dataset['sec']);
}
});
},
afterChange: function (e) {
if (e.cur === 5 && !mapFlag) {
initMap()
}
domLists = document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate')
forEach.call(domLists, v => {
var time = v.dataset.time;
v.timer = setTimeout(function () {
v.classList.add(v.dataset['animate']);
v.classList.remove('hide');
if (v.dataset['sec']) {
var time = v.dataset.sectime || 0
v.sectimer = setTimeout(function () {
v.classList.remove(v.dataset['animate']);
v.classList.add(v.dataset['sec']);
}, time);
}
}, time);
})
}
});
}
function clearTime() {
domLists.forEach((dom, i, arr) => {
if (dom.timer) {
clearTimeout(dom.timer);
}
if (dom.sectimer) {
clearTimeout(dom.sectimer);
}
if (arr && arr.splice) {
arr.splice(i, 1)
}
})
}
// 地图
function initMap() {
if (window.BMap) {
mapFlag = true
var mapCenter = [104.083002, 30.5621]
var map = new BMap.Map("map", { minZoom: 10, maxZoom: 14 })
map.centerAndZoom(new BMap.Point(mapCenter[0], mapCenter[1]), 13);
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#E60000";
div.style.borderRadius = "3px";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px 4px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
var arrow = this._arrow = document.createElement("div");
// arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "0";
arrow.style.height = "0";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
arrow.style.border = "6px solid transparent";
arrow.style.borderTop = "6px solid #E60000";
div.appendChild(arrow);
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(mapCenter[0], mapCenter[1]), "婚礼", "N and Y");
map.addOverlay(myCompOverlay);
document.querySelector('#location-btn').addEventListener('click', () => {
map.panTo(new BMap.Point(mapCenter[0], mapCenter[1]))
})
}
}
// 音乐播放控制
window.onload = function () {
let mp3 = document.querySelector('#mp3')
let playBtn = document.querySelector('#play-btn')
let play
mp3.load()
document.addEventListener("WeixinJSBridgeReady", function () {
mp3.play()
if (!mp3.paused) {
this.style.animationPlayState = 'running'
mp3.play()
play = true
}
}, false)
play = !mp3.paused && mp3.readyState === 4
if (play) {
playBtn.style.animationPlayState = 'running'
} else {
playBtn.style.animationPlayState = 'paused'
}
playBtn.addEventListener('click', function (event) {
if (play) {
this.style.animationPlayState = 'paused'
mp3.pause()
play = false
} else {
if (mp3.readyState === 4) {
this.style.animationPlayState = 'running'
mp3.play()
play = true
}
}
})
}
</script>