简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 善良的好心人，请问这个巴拿马运河的效果是用什么技术做的呢？通过审查元素我没搞明白
怪我咯
怪我咯 2017-04-11 11:19:30
0
4
771

首先，这不是广告，这是auto cad的官网。
http://www.autodesk.com.cn/customer-stories/mwh-global
我在网上找资料是注意到了这条运河剖面图，在第四页，巨大的挑战，那里有一条巴拿马运河的剖面图，动态的。

我想高明白这个剖面图用什么技术做的，于是用了审查元素查看，然而，我是工程屌丝，所以，没看懂，求教各位大神，这个效果是用什么技术做的？
flash？html5？javascript?还是其他的？ p.s IE8也可以看到。另外我感觉不是flash，因为没找到下载链接，蓝色的水域可能使用p做的.

最近在看堂吉诃德，暂时沉浸其中，老是有意无意模仿里面的语气，请不要见怪，

怪我咯
怪我咯

走同样的路，发现不同的人生

全部回覆(4)
洪涛
洪涛2017-04-11 11:21:30 4樓

船只和水域都是图片，用js控制位置变化。

點贊 +0
新增回覆
迷茫
迷茫2017-04-11 11:21:30 3樓

http://videos.autodesk.com/zencoder/content/dam/autodesk/www/customer-stories/panama-canal//feature-banner-final-4-loop.mp4
一个视频播放

點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-04-11 11:21:30 2樓


在审查代码中，看到style一直在变化，大致推断是通过js去改变水的高度。
蓝色的水的部分应该是一个p,或者是图片,通过设置定时器setTimeOut在特定的时间段改变width属性就可以实现水的效果。
而小船是一个大小尺寸固定的图片，通过js修改position参数达到移动小船的效果。

點贊 +0
新增回覆
洪涛
洪涛2017-04-11 11:21:30 1樓

是用jquery实现的。临时扒下的代码。有点多，你可以再改改。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html{width:100%;height:100%;height:100vh}
.body-content a,.body-content a:hover,.body-content a:visited{border-bottom:none}
.wp-responsive-center{margin-top:100px}
p[class*=wp-section-overlay-]{overflow:hidden}
p[class*=wp-section-overlay-] .box-content{position:relative;z-index:1}
p[class*=wp-section-overlay-]:after,p[class*=wp-section-overlay-]:before{background-repeat:no-repeat;content:'';display:block;height:100%;position:absolute;top:0;width:100%;left:50%;margin-left:-512px;width:1024px}
@media only screen and (min-width:64.063em){p[class*=wp-section-overlay-]:after,p[class*=wp-section-overlay-]:before{left:auto;margin-left:auto;width:100%}
}
.page-container,body{height:100%;height:100vh}
.body-content{height:100%;height:100vh;padding-top:0!important}
.decorative-box{height:100%}
.parsys.body-content{height:100%;height:100vh}
.wp-grid-top{position:relative;z-index:1}
.page-container{background-color:#aaa}
.wp-fullpage{width:100%;height:100%;position:fixed;overflow:hidden}
#wp-layer-0{z-index:0;background-color:#000}
#wp-layer-1{z-index:1;background:#e8e8e8}
#wp-layer-2{z-index:2;background-color:#068a87}
#wp-layer-3{z-index:3;background-color:#0d3747}
#wp-layer-4{z-index:4;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/page5-bg.jpg);background-repeat:no-repeat;background-color:#000;background-size:auto 120%;background-position:50% 0}
#wp-layer-5{z-index:5;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/page6-bg.jpg);background-position:0 0;background-size:cover;background-color:#000}
#wp-layer-6{z-index:6;background-color:#005e30}
#wp-layer-7{z-index:7;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/panel_08_bg_long.jpg);background-position:100% 100%;background-size:100%;background-repeat:no-repeat;background-color:#B1C5E4}
#wp-layer-8{z-index:8;background:-webkit-linear-gradient(-90deg,#f5f5f5 0,#eee 100%);background:-moz-linear-gradient(-90deg,#f5f5f5 0,#eee 100%);background:-o-linear-gradient(-90deg,#f5f5f5 0,#eee 100%);background:-ms-linear-gradient(-90deg,#f5f5f5 0,#eee 100%);background:linear-gradient(180deg,#f5f5f5 0,#eee 100%);-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(Enabled=true,startColorStr=#f5f5f5,endColorStr=#eeeeee,gradientType=0)"}
.wp-navigation{z-index:9;width:98px;position:relative;right:0;position:fixed;bottom:0}
.wp-navigation ul{width:20px;height:189px}
.wp-navigation ul li{width:12px;height:12px;margin:11px 0 6px 3px;opacity:.5;border-radius:14px;border:2px solid #bbb;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;cursor:pointer;list-style-type:none;background-color:rgba(0,0,0,.5)}
.wp-navigation ul li.selected{border:none!important;background:#9fc966!important;background-color:#9fc966!important;opacity:1}
.wp-navigation .wp-next-title{color:#878787;font-size:14px;font-weight:500;line-height:16.8px;text-align:center;padding-top:18px}
.wp-navigation .wp-white-down{display:block;cursor:pointer;margin-top:25px}
.wp-navigation .wp-back-arrow,.wp-navigation .wp-dark-down{display:none;cursor:pointer;margin-top:25px}
.wp-navigation.wp-dark ul li{border:2px solid #888}
.wp-navigation.wp-dark .wp-next-title{color:#666}
.wp-navigation.wp-dark .wp-white-down{display:none}
.wp-navigation.wp-dark .wp-dark-down{display:block}
.wp-navigation.currIndex8 .wp-dark-down,.wp-navigation.currIndex8 .wp-white-down{display:none}
.wp-navigation.currIndex8 .wp-back-arrow{display:block}
.wp-navigation.currIndex1 .wp-next-title,.wp-navigation.currIndex2 .wp-next-title,.wp-navigation.currIndex6 .wp-next-title{color:#ddd}
.wp-navigation.currIndex0 ul li:nth-child(1),.wp-navigation.currIndex1 ul li:nth-child(2),.wp-navigation.currIndex2 ul li:nth-child(3),.wp-navigation.currIndex3 ul li:nth-child(4),.wp-navigation.currIndex4 ul li:nth-child(5),.wp-navigation.currIndex5 ul li:nth-child(6),.wp-navigation.currIndex6 ul li:nth-child(7),.wp-navigation.currIndex7 ul li:nth-child(8),.wp-navigation.currIndex8 ul li:nth-child(9){border:none!important;background:#9fc966!important;background-color:#9fc966!important;opacity:1}
#wp-layer-0 .wp-title.wd-color-white{color:#e6f1d8}
#wp-layer-0 .wp-title{color:#86ba3f;font-size:60px;font-weight:700;line-height:60px;text-align:left;text-shadow:4px 4px 0 rgba(0,0,0,.65);text-transform:uppercase;position:relative;left:-4px;margin-top:0;margin-bottom:0}
#wp-layer-0 .wp-title.wp-title-border{border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:18px;display:inline-block;margin-bottom:36px}
#wp-layer-0 .wp-subtitle{color:#ddd;font-size:19px;font-weight:700;line-height:23px;text-align:left;margin:15px 0 12px 0;text-transform:uppercase}
#wp-layer-0 .wp-content{color:#ccc;font-size:21px;font-weight:400;line-height:27px;text-align:left;max-width:520px;margin:15px 0 0 0}
#wp-layer-0 .wp-content-emphasis{color:#fff;font-size:21px;font-weight:700;line-height:27px;text-align:left;max-width:535px;margin:17px 0 42px 0}
#wp-layer-0 .wp-credits-container{position:absolute;bottom:12px;width:100%}
#wp-layer-0 .wp-credits{position:absolute;bottom:12px;color:#fff;font-size:12px;font-weight:700;line-height:14px;text-shadow:2px 2px rgba(0,0,0,.7)}
.wp-banner-vid{position:absolute;top:53px;background-color:#000;z-index:0;height:100%;width:100%}
.wp-banner-vid .wp-outer{width:100%;height:100%;margin:0 auto;overflow:visible;position:absolute}
.wp-banner-vid .wp-inner{position:relative;float:right;right:50%}
.wp-banner-vid video{width:auto;height:1220px;margin:0 auto;right:-50%;position:relative;display:block}
.wp-banner-vid-mobile-bg{width:120%;height:100%;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/page1-bg.jpg);background-size:200%;background-position:54% 0;position:absolute;left:-10%;background-repeat:no-repeat;background-color:#0f0f07;display:none}
.wp-replay-video{position:relative;top:-61px;left:225px;color:#ccc;font-size:16px;font-weight:500;line-height:0;text-align:left;text-transform:uppercase;cursor:pointer;border-left:1px solid #666;padding-left:15px;padding-bottom:10px;padding-top:5px;margin-left:4px}
.wp-replay-video:before{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/icon_rotate.png);position:relative;top:4px}
.wp-share-text{color:#ccc;font-size:16px;font-weight:500;line-height:19.2px;text-align:left;float:left;margin:0 5px 0 0;padding-top:2px}
.wp-share-text.wp-border-left{border-left:4px solid #86ba3f;padding-left:8px}
.social-share{position:relative;top:-2px}
.social-share-link{padding:0 0 0 3px;height:30px}
.social-share-link svg{position:relative;top:-5px}
.icon-svg-email,.icon-svg-facebook,.icon-svg-linkedin,.icon-svg-twitter{width:28px;height:28px;color:#bababa}
#wp-layer-1 .wp-title{margin-bottom:0;margin-top:0;color:#444;font-size:46px;font-weight:700;line-height:50px;text-align:left}
#wp-layer-1 .wp-title span{color:#999}
#wp-layer-1 .wp-horizontal-rule{margin:12px 0 36px 0;height:0;border-top:2px solid rgba(119,119,119,.6);max-width:302px}
#wp-layer-1 .wp-text-body-1{margin:0;color:#222;font-size:21px;font-weight:300;line-height:27px;text-align:left}
#wp-layer-1 .wp-text-body-2{margin:0;color:#666;font-size:16px;font-weight:400;line-height:22px;text-align:left;margin-top:21px}
#wp-layer-1 .wp-video-gradient{background:-webkit-linear-gradient(0deg,#ccc 0,rgba(204,204,204,.729412) 41%,rgba(204,204,204,0) 100%);background:-moz-linear-gradient(0deg,#ccc 0,rgba(204,204,204,.729412) 41%,rgba(204,204,204,0) 100%);background:-o-linear-gradient(0deg,#ccc 0,rgba(204,204,204,.729412) 41%,rgba(204,204,204,0) 100%);background:-ms-linear-gradient(0deg,#ccc 0,rgba(204,204,204,.729412) 41%,rgba(204,204,204,0) 100%);background:linear-gradient(90deg,#ccc 0,rgba(204,204,204,.729412) 41%,rgba(204,204,204,0) 100%);width:27px;height:100%;position:absolute;left:0;top:0}
#wp-layer-1 .wp-video-container{width:53%;overflow:hidden;position:absolute;top:0;left:0;height:100%}
#wp-layer-1 .wp-video-tower{position:absolute;top:0;left:-13%;height:100%;width:auto}
#wp-layer-2 .wp-title.wp-hide-for-small{display:inline-block}
#wp-layer-2 .wp-title{color:#83c1c0;font-size:46px;font-weight:700;line-height:44px;margin:0;margin-bottom:36px;text-transform:uppercase;display:inline-block;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.5)}
#wp-layer-2 .wp-title span{color:#fff}
#wp-layer-2 .wp-subtitle{color:#fff;font-size:21px;font-weight:700;line-height:27px;text-align:left;margin:0;max-width:345px}
#wp-layer-2 .wp-text-body{color:rgba(255,255,255,.6);font-size:16px;font-weight:400;line-height:21px;text-align:left;margin:4px 0 16px 0;max-width:345px}
#wp-layer-2 .wp-text-body-stub{color:rgba(255,255,255,.6);font-size:14px;font-weight:400;line-height:16px;text-align:left;margin:6px 0 0 0}
#wp-layer-2 .wp-text-header{color:rgba(255,255,255,.85);font-size:26px;font-weight:300;line-height:26px;text-align:left;margin:0}
#wp-layer-2 .wp-stub{background:#84bbb9;width:41px;height:2px;margin-top:34px;margin-bottom:12px}
#wp-layer-2 .wp-stub.wp-no-top-margin{margin-top:0}
#wp-layer-2 .wp-map{background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/page3-panama-map.png);width:100%;height:100%;background-size:2235px 935px;background-position:42% 150px;background-repeat:no-repeat;position:absolute}
#wp-layer-2 .wp-map-region{background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/gc_minimap_cn.png);position:absolute;width:204px;height:203px;bottom:10%;right:20%;padding-right:250px;background-repeat:no-repeat}
#wp-layer-3 .wp-title{color:#86ba3f;font-size:46px;font-weight:700;line-height:44px;text-align:left;margin-top:0;display:inline-block;padding-bottom:12px;margin-bottom:36px;border-bottom:2px solid rgba(255,255,255,.4)}
#wp-layer-3 .wp-title span{color:#aaa}
#wp-layer-3 .wp-subtitle{color:#fff;font-size:21px;font-weight:400;line-height:27px;text-align:left;margin-bottom:18px;margin-top:0}
#wp-layer-3 .wp-body-text{color:#9dafb5;font-size:16px;font-weight:400;line-height:20px;padding:0;margin:0}
#wp-layer-3 .wd-pl-med-up{padding-left:30px}
#wp-layer-3 .wd-pr-med-up{padding-right:30px}
.wp-pass-through-canal-animation{position:absolute;bottom:0;height:319px;width:100%}
.wp-mountain-1{background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/mountains.png);left:0;right:0;margin:auto;background-size:cover;width:1283.2px;height:226.4px;bottom:93.4px;position:absolute}
.wp-mountain-2{position:absolute}
.wp-sea{background:#338fb6;height:122.4px;width:100%;bottom:0;position:absolute}
.wp-canal-container{position:absolute;bottom:0;margin:auto;left:0;right:0;width:829.6px}
.wp-gates{position:absolute;left:0;right:0;margin:auto;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/locks.png);background-size:cover;width:829.6px;height:172px;bottom:0}
.wp-wall-1{position:absolute;left:22px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/wall_short.png);background-size:cover;width:130px;height:152px;bottom:0}
.wp-wall-2{position:absolute;left:173px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/wall_medium.png);background-size:cover;width:130px;height:164px;bottom:0}
.wp-wall-3{position:absolute;right:171px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/wall_medium.png);background-size:cover;width:130px;height:164px;bottom:0}
.wp-wall-4{position:absolute;right:21px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/wall_short.png);background-size:cover;width:130px;height:152px;bottom:0}
.wp-water-1{position:absolute;left:22px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/water_short.png);background-size:cover;width:130px;height:140px;bottom:0;-webkit-transition:all 2s;transition:all 2s}
.wp-water-2{position:absolute;left:173px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/water_medium.png);background-size:cover;width:130px;height:164px;bottom:0;-webkit-transition:all 2s;transition:all 2s}
.wp-water-3{position:absolute;right:0;left:0;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/gatun_lake.png);background-size:cover;width:186px;height:164px;bottom:0;margin:auto;-webkit-transition:all 2s;transition:all 2s}
.wp-water-4{position:absolute;right:171px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/water_medium.png);background-size:cover;width:130px;height:140px;bottom:0;-webkit-transition:all 2s;transition:all 2s}
.wp-water-5{position:absolute;right:21px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/water_short.png);background-size:cover;width:130px;height:124.4px;bottom:0;-webkit-transition:all 2s;transition:all 2s}
.wp-boat{position:absolute;left:1800px;background:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/boat.png);background-size:cover;width:114.4px;height:32px;bottom:122.4px}
#wp-layer-3 .wp-label-1{color:#fff;position:absolute;bottom:80px;left:-60px;margin:0;font-size:14px;font-weight:500;line-height:16.8px}
#wp-layer-3 .wp-label-2{color:#fff;position:absolute;bottom:100px;left:0;right:0;margin:auto;width:115px;text-align:center;font-size:14px;font-weight:500;line-height:16.8px}
#wp-layer-3 .wp-label-3{color:#fff;position:absolute;bottom:80px;right:-70px;margin:0;font-size:14px;font-weight:500;line-height:16.8px}
#wp-layer-4 .wp-title{color:#fff;font-size:46px;font-weight:700;line-height:44px;text-align:left;display:inline-block;margin:0;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.6)}
#wp-layer-4 .wp-title span{color:#bababa}
#wp-layer-4 .wp-content-container{margin-top:36px;padding-bottom:150px}
#wp-layer-4 .wp-content{color:#fff;font-size:19px;font-weight:400;line-height:26px;text-align:left;margin:5px 0 0 0;padding-left:42px;position:relative}
#wp-layer-4 .wp-content.wp-object-a:before{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/object_a.png);position:absolute;left:0}
#wp-layer-4 .wp-content.wp-object-b:before{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/object_b.png);position:absolute;left:0}
#wp-layer-4 .wp-content.wp-object-c:before{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/object_c.png);position:absolute;left:0}
#wp-layer-4 .wp-content-spacing{height:29px}
#wp-layer-4 .wp-credits{position:absolute;bottom:12px;color:#fff;font-size:12px;font-weight:700;line-height:14px;padding-left:42px;text-shadow:2px 2px rgba(0,0,0,.7)}
#wp-layer-5 .wp-title{color:#ffe566;font-size:46px;font-weight:700;line-height:44px;text-align:left;margin:0;padding-bottom:12px;margin-bottom:36px;display:inline-block;border-bottom:2px solid rgba(255,255,255,.6)}
#wp-layer-5 .wp-title span{color:#b9b9b9}
#wp-layer-5 .wp-subtitle{color:#fff;font-size:21px;font-weight:300;line-height:27px;margin:0;padding-bottom:12px;padding-right:79px}
#wp-layer-5 .wp-content-container{padding-right:79px;width:100%;color:#fff;font-size:16px;font-weight:400;line-height:22px}
#wp-layer-5 .wp-left-column{width:50%;color:#fff;font-size:16px;font-weight:400;line-height:22px;text-align:left;float:left;padding-right:30px}
#wp-layer-5 .wp-right-column{color:#fff;font-size:19px;font-weight:400;line-height:24px;text-align:left;width:50%;float:left;padding-left:40px;padding-right:40px;position:relative}
#wp-layer-5 .wp-content{color:#ddd;font-size:12px;font-weight:500;line-height:14px}
#wp-layer-5 .wp-right-column .wp-quote{position:relative;font-style:italic}
#wp-layer-5 .wp-right-column .wp-quote:before{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/o_quote.png);position:absolute;left:-40px}
#wp-layer-5 .wp-right-column .wp-quote:after{content:url(http://static-dc.autodesk.net/content/dam/autodesk/www/customer-stories/panama-canal/e_quote.png);position:absolute;right:-37px;bottom:0}
#wp-layer-5 .wp-quoted-by{color:#ddd;font-size:14px;font-weight:500;line-height:20px;text-align:left;margin:0}
#wp-layer-5 .wp-quote{background:#555;height:inherit;overflow:auto;position:relative;-moz-box-shadow:6px 4px 0 0 rgba(255,215,26,.5);-webkit-box-shadow:6px 4px 0 0 rgba(255,215,26,.5);box-shadow:6px 4px 0 0 rgba(255,215,26,.5);margin-top:48px}
#wp-layer-5 .wp-quote .wp-quote-line{color:#ccc;font-size:16px;font-weight:400;line-height:20px;margin-top:19px;margin-bottom:14px;font-style:italic;padding-right:15px}
#wp-layer-5 .wp-quote .wp-mwh-logo{width:70px;opacity:.4;position:absolute;bottom:14px;right:13px}
#wp-layer-5 .wp-quote .wp-newberry{height:139px;padding-right:20px;margin:auto;float:left;padding-top:16px;padding-left:16px;padding-bottom:16px}
#wp-layer-5 .wp-box-shadow{overflow:hidden}
#wp-layer-5 .wp-stub{background-color:#878983;width:40px;height:1px;margin-bottom:11px}
#wp-layer-5 .wp-header{color:rgba(255,224,77,.85);font-size:21px;font-weight:700;line-height:21px;margin:0;padding:0}
#wp-layer-5 .wp-content{margin-top:9px;margin-bottom:29px}
#wp-layer-5 .wp-fact{float:left;width:50%;padding-right:30px}
#wp-layer-5 .wp-credits{position:absolute;bottom:12px;color:#fff;font-size:12px;font-weight:700;line-height:14px;padding-left:42px;text-shadow:2px 2px rgba(0,0,0,.7)}
#wp-layer-6 .wp-bg-img{position:absolute;bottom:0;width:100%}
#wp-layer-6 .wp-bg-diagram-img{position:absolute;bottom:-40px;width:100%}
#wp-layer-6 .wp-bg-diagram-img img,#wp-layer-6 .wp-bg-img img{max-width:initial;width:100%}
#wp-layer-6 .wp-title{color:#fff;font-size:46px;font-weight:700;line-height:44px;text-align:left;padding-bottom:12px;margin:0 0 36px 0;border-bottom:2px solid rgba(255,255,255,.3);display:inline-block}
#wp-layer-6 .wp-title span{color:#8ab29f}
#wp-layer-6 .wp-subtitle{color:#fff;font-size:21px;font-weight:400;line-height:27px;margin:0}
#wp-layer-6 .wp-content{color:#83b49c;font-size:19px;font-weight:400;line-height:24px;margin:10px 0 40px 0}
#wp-layer-6 .wp-items{width:100%;position:relative}
#wp-layer-6 .wp-fact,#wp-layer-6 .wp-fact-end{width:25%;padding-right:40px;float:left;position:relative}
#wp-layer-6 .wp-fact:before{content:'\2022';position:absolute;left:-3px;top:0;color:#fff;font-size:22px}
#wp-layer-6 .wp-fact{padding-left:10px;color:#ccdfd6;font-size:14px;font-weight:400;line-height:17px}
#wp-layer-6 .wp-fact-end{color:#fff;font-size:19px;font-weight:400;line-height:21px}
#wp-layer-6 .wp-height-adjust{height:400px}
#wp-layer-7 .wp-title{color:#2f68b1;font-size:46px;font-weight:700;line-height:50px;text-align:left;padding-bottom:12px;margin:0 0 36px 0;border-bottom:2px solid rgba(34,34,34,.4);display:inline-block}
#wp-layer-7 .wp-title span{color:#fff}
#wp-layer-7 .wp-subtitle{color:#444;font-size:21px;font-weight:400;line-height:27px;margin:0 0 27px 0}
#wp-layer-7 .wp-left-column{width:50%;float:left;padding-right:20px}
#wp-layer-7 .wp-right-column{width:50%;float:left;padding-left:20px}
#wp-layer-7 .wp-left-column p,#wp-layer-7 .wp-right-column p{color:#555;font-size:16px;font-weight:400;line-height:21px;margin:0 0 16px 0}
#wp-layer-7 .wp-height-adjust{height:300px}
#wp-layer-7 .wp-custom-margin{margin-top:100px}
#wp-layer-8 .wp-title{color:#0696d7;font-size:35px;font-weight:300;line-height:40px;text-align:left;margin:0}
#wp-layer-8 .wp-horizontal-rule{border-top:2px solid rgba(153,153,153,.1);width:642px;height:0;margin:28px 0}
#wp-layer-8 .wp-left-col{display:table-cell;padding-right:71px}
#wp-layer-8 .wp-right-col{display:table-cell}
#wp-layer-8 .wp-product{display:table-row}
#wp-layer-8 .wp-product-icon{margin-right:15px;display:table-cell;margin-bottom:10px}
#wp-layer-8 .wp-product p{display:table-cell;position:relative;color:#666;font-size:21px;font-weight:400;line-height:40px;text-align:left}
#wp-layer-8 .wp-product p.wp-revit-struct-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/revit-structure-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-revit-mep-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/revit-mep-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-revit-arch-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/revit-architecture-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-autodesk-consulting-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/1436544077-autodesk-consulting-icon-75x75.jpg);background-repeat:no-repeat;padding:10px 0 25px 75px;background-size:60px 60px}
#wp-layer-8 .wp-product p.wp-navisworks-manage-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/navisworks-manage-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-autocad-civil-3d-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/autocad-civil-3d-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-3dsmax-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/3ds-max-design-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .wp-product p.wp-autocad-electrical-icon{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/autocad-electrical-2015-badge-60x60.png);background-repeat:no-repeat;padding:10px 0 25px 75px}
#wp-layer-8 .icon-svg-facebook{width:60px;height:60px;color:#666}
#wp-layer-8 .icon-svg-linkedin{width:60px;height:60px;color:#666}
#wp-layer-8 .icon-svg-twitter{width:60px;height:60px;color:#666}
#wp-layer-8 .icon-svg-email{width:60px;height:60px;color:#666}
#wp-layer-8 .social-share-link{border-left:2px solid #ccc;height:50px}
#wp-layer-8 .social-share-link:first-child{border:none}
#wp-layer-8 a{text-decoration:none}
#wp-layer-8 .wp-share-text{color:#666;font-size:20px;line-height:40px}
#wp-layer-8 .wp-dreamcatcher-link{font-size:21px;line-height:25px;color:#666;max-width:500px}
#wp-layer-8 .wp-dreamcatcher-link a,#wp-layer-8 .wp-dreamcatcher-link a:visited{font-size:21px;line-height:25px;color:#444;font-weight:700;border-bottom:1px dashed #666}
@media only screen and (min-width:64.063em) and (max-width:1300px){#wp-layer-2 .wp-responsive-center,#wp-layer-3 .wp-responsive-center,#wp-layer-4 .wp-responsive-center,#wp-layer-5 .wp-responsive-center,#wp-layer-6 .wp-responsive-center,#wp-layer-8 .wp-responsive-center{padding-left:20px}
#wp-layer-7 .wp-custom-margin{padding-left:20px}
}
@media only screen and (min-width:40.063em) and (max-width:64.063em){#wp-layer-0 .wp-subtitle{font-size:19px}
#wp-layer-0 .wp-content{font-size:19px;line-height:24px}
#wp-layer-0 .wp-content-emphasis{font-size:19px;line-height:24px}
#wp-layer-0 .wp-title{font-size:52px;line-height:50px}
#wp-layer-0 .wp-title.wp-title-border{margin-bottom:16px;padding-bottom:12px}
.wp-banner-vid video{height:1025px}
#wp-layer-0 .wp-credits{padding-left:0}
#wp-layer-1 .wp-title{font-size:40px;line-height:42px}
#wp-layer-1 .wp-horizontal-rule{margin:12px 0 40px 0;max-width:302px}
#wp-layer-1 .wp-text-body-1{font-size:19px;line-height:24px}
#wp-layer-1 .wp-text-body-2{font-size:16px;line-height:22px;margin-top:17px}
#wp-layer-1 .wp-video-tower{left:-40%}
#wp-layer-2 .wp-title{font-size:40px;line-height:42px;margin-left:20px;padding-bottom:12px;margin-bottom:40px;width:419px}
#wp-layer-2 .wp-subtitle{font-size:19px;font-weight:700;line-height:24px;padding-left:20px;padding-right:40px}
#wp-layer-2 .wp-text-body{font-size:16px;font-weight:400;line-height:21px;padding-left:20px;padding-right:40px}
#wp-layer-2 .wp-stub{margin-top:24px;margin-bottom:8px}
#wp-layer-2 .wp-text-header{font-size:19px;font-weight:300;line-height:24px}
#wp-layer-2 .wp-text-body-stub{font-size:14px;font-weight:400;line-height:16px}
#wp-layer-2 .wp-map{background-size:2000px auto;background-position:45% 50px}
#wp-layer-2 .wp-map-region{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/gc_minimap_cn.png);position:absolute;width:204px;height:203px;bottom:50px;right:70px;padding-right:0}
#wp-layer-3 .wp-title{font-size:40px;line-height:42px;padding-bottom:12px;margin-bottom:40px}
#wp-layer-3 .wp-subtitle{font-size:21px;line-height:27px;margin-bottom:14px;max-width:387px}
#wp-layer-3 .wd-pl-med-up{padding-left:20px}
#wp-layer-3 .wd-pr-med-up{padding-right:20px}
#wp-layer-3 .wp-pad-for-med{margin-left:30px}
.wp-pass-through-canal-animation{height:210px}
.wp-mountain-1{width:802px;height:142px;bottom:57px}
.wp-sea{height:75px}
.wp-canal-container{width:519px}
.wp-gates{width:519px;height:108px}
.wp-wall-1{left:14px;width:83px;height:95px}
.wp-wall-2{left:108px;width:83px;height:103px}
.wp-wall-3{right:106px;width:83px;height:103px}
.wp-wall-4{right:12px;width:83px;height:95px}
.wp-water-1{left:14px;width:83px;height:88px}
.wp-water-2{left:108px;width:83px;height:103px}
.wp-water-3{width:119px;height:103px}
.wp-water-4{right:106px;width:83px;height:95px}
.wp-water-5{right:12px;width:83px;height:77px}
.wp-boat{left:900px;width:72px;height:20px;bottom:75px}
#wp-layer-3 .wp-label-1{bottom:40px}
#wp-layer-3 .wp-label-2{bottom:40px}
#wp-layer-3 .wp-label-3{bottom:40px}
#wp-layer-4{padding-left:30px}
#wp-layer-4 .wp-title{font-size:40px;line-height:42px;padding-bottom:12px}
#wp-layer-4 .wp-content{margin-top:40px;font-size:16px;font-weight:400;line-height:21px}
#wp-layer-4 .wp-content-spacing{height:0}
#wp-layer-4 .wp-content-container{padding-bottom:100px}
#wp-layer-4 .wp-credits{padding-left:0}
#wp-layer-5{padding-left:30px;padding-right:30px}
#wp-layer-5 .wp-title{padding-bottom:12px;margin-bottom:40px;font-size:40px;line-height:42px}
#wp-layer-5 .wp-subtitle{color:#fff;font-size:21px;font-weight:300;line-height:27px;margin:0}
#wp-layer-5 .wp-content-container{font-size:16px;line-height:21px}
#wp-layer-5 .wp-box-shadow{overflow:hidden}
#wp-layer-5 .wp-stub{margin-bottom:13px}
#wp-layer-5 .wp-header{font-size:19px;font-weight:700;line-height:19px}
#wp-layer-5 .wp-content{margin-top:7px;margin-bottom:21px}
#wp-layer-5 .wp-fact{float:left;width:50%;padding-right:30px}
#wp-layer-5 .wp-quoted-by{color:#fff;font-size:14px;font-weight:500;line-height:20px;margin-bottom:42px}
#wp-layer-5 .wp-quote{margin-top:39px}
#wp-layer-5 .wp-quote .wp-quote-line{color:rgba(255,255,255,.8);font-size:16px;font-weight:400;line-height:22px;margin-top:18px;margin-bottom:10px}
#wp-layer-5 .wp-quote .wp-mwh-logo{width:70px;opacity:.4;position:absolute;bottom:12px;right:7px}
#wp-layer-5 .wp-quote .wp-newberry{height:148px;padding-right:16px;margin:auto;float:left;padding-top:15px;padding-left:13px;padding-bottom:15px}
#wp-layer-5 .wp-credits{padding-left:0}
#wp-layer-6 .wp-bg-img{position:absolute;bottom:0;width:100%}
#wp-layer-6 .wp-bg-diagram-img{position:absolute;bottom:-20px;width:100%}
#wp-layer-6 .wp-responsive-center{padding-left:20px}
#wp-layer-6 .wp-title{font-size:40px;line-height:42px;padding-bottom:12px;margin-bottom:22px}
#wp-layer-6 .wp-subtitle{color:#fff;font-size:21px;font-weight:400;line-height:27px;margin:0}
#wp-layer-6 .wp-content{font-size:16px;font-weight:500;line-height:21px;margin:2px 0 16px 0}
#wp-layer-6 .wp-height-adjust{height:200px}
#wp-layer-6 .wp-fact{padding-right:30px}
#wp-layer-6 .wp-fact-end{font-size:16px}
#wp-layer-7 .wp-title{font-size:40px;line-height:42px;margin:0 0 40px 0;padding-bottom:12px}
#wp-layer-7 .wp-title span{color:#fff}
#wp-layer-7 .wp-subtitle{font-size:21px;font-weight:400;line-height:27px;margin:0 0 15px 0}
#wp-layer-7 .wp-left-column{width:50%;float:left;padding-right:21px}
#wp-layer-7 .wp-right-column{width:50%;float:left;padding-left:21px}
#wp-layer-7 .wp-custom-margin{margin-top:60px;padding-left:20px}
#wp-layer-8{padding-left:30px}
#wp-layer-8 .wp-title{font-size:30px;line-height:34px}
#wp-layer-8 .wp-horizontal-rule{width:inherit;margin:20px 0}
#wp-layer-8 .wp-product p{line-height:initial}
#wp-layer-8 .wp-product p.wp-revit-struct-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-revit-mep-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-revit-arch-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-autodesk-consulting-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-navisworks-manage-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-3dsmax-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-autocad-civil-3d-icon{background-size:50px;padding:10px 0 25px 60px}
#wp-layer-8 .wp-product p.wp-autocad-electrical-icon{background-size:50px;padding:10px 0 25px 60px}
}
@media only screen and (max-width:40.063em){.wp-fullpage{position:relative;width:initial;height:initial;top:0!important}
.wp-navigation{display:none}
.decorative-box{height:initial}
.wp-small-only-push-1{position:relative;left:8.33333%;right:auto}
.wp-banner-vid video{display:none}
.wp-banner-vid-mobile-bg{display:block}
.wp-battery{display:none}
#wp-layer-0 .wp-subtitle{font-size:19px;line-height:23px;margin-bottom:8px;float:none;margin-top:45px}
#wp-layer-0 .wp-battery{display:none}
#wp-layer-0 .wp-title{font-size:42px;line-height:38px}
#wp-layer-0 .wp-title.wp-title-border{padding-bottom:12px;display:inline-block;margin-bottom:25px}
#wp-layer-0 .wp-content,#wp-layer-0 .wp-content-emphasis{font-size:19px;line-height:24px;margin-top:20px}
#wp-layer-0 .wp-share-text{margin:0;float:none}
#wp-layer-0 .social-share{margin-top:12px;top:-22px;left:0;margin-bottom:55px;border-left:4px solid #86ba3f;padding-top:14px}
#wp-layer-0 .social-share-link{padding:0 0 0 3px;height:30px;position:relative;top:8px;left:3px}
.wp-banner-vid-mobile-bg{width:1255px;height:100%;background:url(/content/dam/autodesk/www/customer-stories/panama-canal/page1-bg.jpg);background-size:100%;background-position:-180px -10px;position:absolute;background-repeat:no-repeat;background-color:#0f0f07}
#wp-layer-1{background:#e8e8e8}
#wp-layer-1 .wp-responsive-center{margin-top:0}
#wp-layer-1 .wp-title{font-size:40px;line-height:42px;position:absolute;top:-406px}
#wp-layer-1 .wp-horizontal-rule{margin:12px 0 40px 0;height:0;border-top:2px solid rgba(119,119,119,.6);max-width:271px;position:absolute;top:-280px;width:429px}
#wp-layer-1 .wp-text-body-1{font-size:19px;font-weight:400;line-height:24px;margin-top:21px}
#wp-layer-1 .wp-text-body-2{font-size:16px;font-weight:400;line-height:22px;margin-bottom:46px}
#wp-layer-1 .canal-tower-img{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/page2-bg-fade.jpg);width:100%;height:420px;background-size:466px auto;background-repeat:no-repeat;background-position:left bottom;position:relative;background-color:#ededed}
#wp-layer-2 .wp-title.wp-hide-for-small{display:none}
#wp-layer-2{background:#087773}
#wp-layer-2 .wp-responsive-center{margin-top:30px!important}
#wp-layer-2 .wp-mobile-bg{background:#008a89}
#wp-layer-2 .wp-title{font-size:40px;line-height:42px;margin-top:30px;padding-bottom:12px;margin-bottom:40px;max-width:188px}
#wp-layer-2 .wp-mobile-map{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/page3-panama-map.png);width:100%;height:260px;background-size:1500px auto;background-position:-700px 10px;background-repeat:no-repeat;position:relative;background-color:#068a87;border-bottom:2px solid rgba(255,255,255,.2)}
#wp-layer-2 .wp-mobile-map-region{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/gc_minimap_137x136_cn.png);width:137px;height:136px;position:absolute;top:12px;right:13px}
#wp-layer-2 .wp-subtitle{font-size:19px;font-weight:700;line-height:24px}
#wp-layer-2 .wp-stub{margin-top:29px;margin-bottom:12px}
#wp-layer-2 .wp-stub.wp-no-top-margin{margin-top:4px}
#wp-layer-2 .wp-text-body{font-size:16px;font-weight:400;line-height:21px}
#wp-layer-2 .wp-text-header{font-size:26px;font-weight:300;line-height:26px}
#wp-layer-2 .wp-text-body-stub{font-size:14px;font-weight:400;line-height:16px}
#wp-layer-2 .wp-mobile-last{margin-bottom:35px}
#wp-layer-3{background:#0d3747}
#wp-layer-3 .wp-responsive-center{margin-top:0}
#wp-layer-3 .wp-title{margin-top:28px;font-size:40px;line-height:42px;padding-bottom:12px;margin-bottom:40px;width:214px}
#wp-layer-3 .wp-subtitle{font-size:19px;font-weight:400;line-height:24px;margin-bottom:3px}
#wp-layer-3 .wp-body-text{font-size:16px;font-weight:400;line-height:21px margin-bottom: 13px}
#wp-layer-3 .wd-pr-med-up{padding-right:0}
#wp-layer-3 .wd-pl-med-up{padding-left:0}
#wp-layer-3 .wd-pl-med-up .wp-body-text{margin-bottom:250px}
.wp-pass-through-canal-animation{height:210px;right:0;width:800px}
.wp-mountain-1{width:802px;height:142px;bottom:57px}
.wp-mountain-2{width:373px;height:76px;left:550px;bottom:75px;top:initial}
.wp-sea{height:75px}
.wp-canal-container{width:519px}
.wp-gates{width:519px;height:108px}
.wp-wall-1{left:14px;width:83px;height:95px}
.wp-wall-2{left:108px;width:83px;height:103px}
.wp-wall-3{right:106px;width:83px;height:103px}
.wp-wall-4{right:12px;width:83px;height:95px}
.wp-water-1{left:14px;width:83px;height:88px}
.wp-water-2{left:108px;width:83px;height:103px}
.wp-water-3{width:119px;height:103px}
.wp-water-4{right:106px;width:83px;height:95px}
.wp-water-5{right:12px;width:83px;height:77px}
.wp-boat{left:900px;width:72px;height:20px;bottom:75px}
#wp-layer-3 .wp-label-1{bottom:40px}
#wp-layer-3 .wp-label-2{bottom:40px}
#wp-layer-3 .wp-label-3{bottom:40px}
#wp-layer-4{background-repeat:no-repeat;background-color:#000;background-position:59% 0}
#wp-layer-4 .wp-responsive-center{margin-top:0}
#wp-layer-4 .wp-title{font-size:40px;line-height:42px;padding-bottom:12px;margin-bottom:40px;margin-top:39px}
#wp-layer-4 .wp-title span{color:#868686}
#wp-layer-4 .wp-content{font-size:16px;line-height:20px}
#wp-layer-4 .wp-content-spacing{height:24px}
#wp-layer-4 .wp-content-container{margin-top:330px;padding-top:31px;padding-bottom:48px;margin-bottom:0}
#wp-layer-4 .wp-mobile-overlay{background-color:rgba(34,34,34,.8);position:absolute;top:479px;width:90%;left:0;right:0;bottom:28px;margin:auto}
#wp-layer-4 .wp-credits{position:relative;color:#999;font-size:12px;font-weight:700;line-height:14px;margin-top:31px;padding-left:0}
#wp-layer-5{background:#2a2a2a}
#wp-layer-5 .mobile-img{width:100%;height:300px;overflow:hidden;position:relative}
#wp-layer-5 .mobile-img img{max-width:initial;width:1024px;position:absolute;top:-300px;right:-50px}
#wp-layer-5 .wp-responsive-center{margin-top:0}
#wp-layer-5 .wp-title{font-size:40px;line-height:42px;margin-top:39px;padding-bottom:12px;margin-bottom:40px;position:absolute;top:-300px}
#wp-layer-5 .wp-title span{color:#b8b8b8}
#wp-layer-5 .wp-subtitle{font-size:21px;line-height:27px;padding-right:0;padding-bottom:14px;margin-top:28px}
#wp-layer-5 .wp-content-container{padding-right:0}
#wp-layer-5 .wp-left-column{width:100%;padding-right:0;color:#999;font-size:16px;font-weight:400;line-height:22px;float:none;margin-bottom:39px}
#wp-layer-5 .wp-fact{float:left;width:50%}
#wp-layer-5 .wp-right-column .wp-quote:before{-ms-transform:scale(.8);-webkit-transform:scale(.8);transform:scale(.8)}
#wp-layer-5 .wp-right-column .wp-quote:after{-ms-transform:scale(.8);-webkit-transform:scale(.8);transform:scale(.8)}
#wp-layer-5 .wp-right-column{width:100%;color:#ccc}
#wp-layer-5 .wp-quote{margin-top:7px;margin-bottom:27px}
#wp-layer-5 .wp-quoted-by{color:#fff;margin-bottom:45px;margin-left:15px;margin-right:15px}
#wp-layer-5 .wp-box-shadow{background:0 0;padding:0;margin-top:37px}
#wp-layer-5 .wp-stub{margin-bottom:13px}
#wp-layer-5 .wp-content{margin-top:9px;margin-bottom:36px;padding-right:40px}
#wp-layer-5 .wp-quote .wp-newberry{height:130px;padding-right:15px;margin:auto;float:none;padding-top:15px;padding-left:15px;padding-bottom:15px}
#wp-layer-5 .wp-quote .wp-quote-line{color:#ccc;font-size:16px;font-weight:400;line-height:20px;margin-bottom:14px;margin-top:1px;margin-left:15px;margin-right:15px}
#wp-layer-5 .wp-quote .wp-mwh-logo{bottom:12px;right:9px}
#wp-layer-5 .wp-credits{bottom:initial;top:280px;padding-left:30px}
#wp-layer-6 .wp-bg-img{position:absolute;bottom:0;width:100%}
#wp-layer-6 .wp-bg-diagram-img{position:absolute;bottom:0;width:100%}
#wp-layer-6 .wp-bg-diagram-img img,#wp-layer-6 .wp-bg-img img{max-width:initial;width:auto;height:165px;position:absolute;bottom:0;right:-190px}
#wp-layer-6 .wp-responsive-center{margin-top:0}
#wp-layer-6 .wp-title{font-size:40px;line-height:42px;padding-bottom:12px;margin:24px 0 40px 0;width:246px}
#wp-layer-6 .wp-subtitle{font-size:21px;font-weight:400;line-height:27px}
#wp-layer-6 .wp-content{font-size:16px;font-weight:400;line-height:21px;margin:12px 0 28px 0}
#wp-layer-6 .wp-items{margin-top:4px}
#wp-layer-6 .wp-fact,#wp-layer-6 .wp-fact-end{width:100%;padding-right:45px;float:none;margin-bottom:28px}
#wp-layer-6 .wp-height-adjust{height:165px}
#wp-layer-7{background:url(/content/dam/autodesk/www/customer-stories/panama-canal/panel_08_bg_long.jpg);background-position:80% -100px;background-size:auto 400px;background-repeat:no-repeat;background-color:#fff}
#wp-layer-7 .wp-title{font-size:39px;line-height:42px;padding-bottom:12px;position:absolute;top:29px}
#wp-layer-7 .wp-subtitle{font-size:21px;font-weight:400;line-height:27px;margin:334px 0 17px 0}
#wp-layer-7 .wp-left-column{width:100%;float:none;padding-right:0}
#wp-layer-7 .wp-right-column{width:100%;float:none;padding-left:0}
#wp-layer-7 .wp-left-column p,#wp-layer-7 .wp-right-column p{color:#555;font-size:16px;font-weight:400;line-height:21px;margin:0 0 16px 0}
#wp-layer-7 .wp-height-adjust{height:0}
#wp-layer-7 .wp-custom-margin{margin-top:0}
#wp-layer-8 .wp-responsive-center{margin-top:0}
#wp-layer-8 .wp-title{font-size:24px;line-height:28px;margin-top:48px}
#wp-layer-8 .wp-product-icon{width:40px}
#wp-layer-8 .wp-product{display:block;width:100%}
#wp-layer-8 .wp-left-col,#wp-layer-8 .wp-right-col{display:block;padding-right:0}
#wp-layer-8 .wp-horizontal-rule{width:inherit;margin:20px 0}
#wp-layer-8 .icon-svg-facebook{width:40px;height:40px}
#wp-layer-8 .icon-svg-linkedin{width:40px;height:40px}
#wp-layer-8 .icon-svg-twitter{width:40px;height:40px}
#wp-layer-8 .icon-svg-email{width:40px;height:40px}
#wp-layer-8 .social-share-link{border-left:2px solid #ccc;height:30px}
#wp-layer-8 .social-share-link:first-child{border:none}
#wp-layer-8 .wp-share-text{float:none;margin:0}
#wp-layer-8 .social-share{left:-7px}
}

    
    </style>
</head>

<body>
    <p class="code section">
        <p class="wp-pass-through-canal-animation">
            <p class="wp-mountain-1"></p>
            <p class="wp-mountain-2"></p>
            <p class="wp-sea"></p>
            <p class="wp-canal-container">
                <p class="wp-wall-1"></p>
                <p class="wp-wall-2"></p>
                <p class="wp-wall-3"></p>
                <p class="wp-wall-4"></p>
                <p class="wp-water-1"></p>
                <p class="wp-water-2"></p>
                <p class="wp-water-3"></p>
                <p class="wp-water-4"></p>
                <p class="wp-water-5"></p>
                <p class="wp-boat"></p>
                <p class="wp-gates"></p>
                <p class="wp-label-1">太平洋</p>
                <p class="wp-label-2">加通湖
                    <br/> 26 米/85 英尺</p>
                <p class="wp-label-3">大西洋</p>
            </p>
        </p>
</body>
<script src='jquery.js'></script>
<script>
var stopAnimationOnResize = false;
var animationIsRunning = false;

var resetBoatAnimation = function() {
    $(".wp-boat").removeAttr("style");
    $(".wp-water-1").removeAttr("style");
    $(".wp-water-2").removeAttr("style");
    $(".wp-water-3").removeAttr("style");
    $(".wp-water-4").removeAttr("style");
    $(".wp-water-5").removeAttr("style");
};

var boatAnimation = function() {
    animationIsRunning = true;
    if ($(window).width() < 642) {
        $(".wp-pass-through-canal-animation").animate({
            'right': $(".wp-pass-through-canal-animation").position().left
        }, 24000, function() {
            $(".wp-pass-through-canal-animation").animate({
                'right': 0
            }, 1400);
        });
    }
    $(".wp-boat").animate({
        'left': $(".wp-water-5").position().left + 5
    }, 3000, function() {
        if (!stopAnimationOnResize) {
            $(".wp-water-5").animate({
                'height': $(".wp-water-4").height()
            }, 0);
            $(".wp-boat").animate({
                'bottom': -$(".wp-water-4").position().top - 2
            }, 2200, function() {
                if (!stopAnimationOnResize) {
                    $(".wp-boat").animate({
                        'left': $(".wp-water-4").position().left + 5
                    }, 2000, function() {
                        if (!stopAnimationOnResize) {
                            $(".wp-water-4").animate({
                                'height': $(".wp-water-3").height()
                            }, 0);
                            $(".wp-boat").animate({
                                'bottom': -$(".wp-water-3").position().top
                            }, 2200, function() {
                                if (!stopAnimationOnResize) {
                                    $(".wp-boat").animate({
                                        'left': $(".wp-water-2").position().left + 5
                                    }, 2000, function() {
                                        if (!stopAnimationOnResize) {
                                            $(".wp-water-2").animate({
                                                'height': $(".wp-water-1").height()
                                            }, 0);
                                            $(".wp-boat").animate({
                                                'bottom': -$(".wp-water-1").position().top
                                            }, 1800, function() {
                                                if (!stopAnimationOnResize) {
                                                    $(".wp-boat").animate({
                                                        'left': $(".wp-water-1").position().left + 5
                                                    }, 2000, function() {
                                                        if (!stopAnimationOnResize) {
                                                            $(".wp-water-1").animate({
                                                                'height': $(".wp-sea").height()
                                                            }, 0);
                                                            $(".wp-boat").animate({
                                                                'bottom': $(".wp-sea").height()
                                                            }, 1800, function() {
                                                                if (!stopAnimationOnResize) {
                                                                    $(".wp-boat").animate({
                                                                        'left': -800
                                                                    }, 4000, function() {
                                                                        resetBoatAnimation();
                                                                        animationIsRunning = false;
                                                                    });
                                                                }
                                                            });
                                                        }
                                                    });
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }
    });
    if (stopAnimationOnResize) {
        resetBoatAnimation();
        animationIsRunning = false;
    }
};

boatAnimation();
var boatInterval = setInterval(function() {
    if (!animationIsRunning) {
        boatAnimation();
    }
}, 5000);
var boatResetTimer;

$(window).resize(function() {
    stopAnimationOnResize = true;
    clearInterval(boatInterval);
    clearTimeout(boatResetTimer);
    boatResetTimer = setTimeout(function() {
        resetBoatAnimation();
        $(".wp-pass-through-canal-animation").stop().removeAttr("style");
        boatInterval = setInterval(function() {
            if (!animationIsRunning) {
                boatAnimation();
            }
        }, 5000);
        stopAnimationOnResize = false;
        boatAnimation();

    }, 3000);
});
</script>

</html>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！