Commit 7576bc44dd57c032e87590642261af00b5d93da8

Authored by liuguangkuo
1 parent be0949ef55
Exists in master

add wefit

... ... @@ -62,9 +62,12 @@ body {
62 62 position: fixed;
63 63 width: 100%;
64 64 left: 0;
65   - top: 0;
  65 + top: -88px;
66 66 background-color: rgba(27, 27, 27, 0.8);
67   - z-index: 99; }
  67 + z-index: 99;
  68 + transition: all 1s;
  69 + -moz-transition: all 1s;
  70 + -webkit-transition: all 1s; }
68 71 .nav h1 {
69 72 width: 178px;
70 73 float: left;
... ... @@ -82,15 +85,38 @@ body {
82 85 width: 123px;
83 86 display: inline-block;
84 87 float: left;
85   - margin-right: 10px; }
  88 + margin-right: 10px;
  89 + position: relative;
  90 + cursor: pointer; }
86 91 .nav li img {
87 92 vertical-align: middle; }
88 93 .nav li a {
89 94 display: block; }
90 95  
  96 +.nav-code {
  97 + position: absolute;
  98 + left: 0;
  99 + top: 66px;
  100 + opacity: 0;
  101 + width: 0;
  102 + height: 0;
  103 + visibility: hidden;
  104 + transition: opacity 1s;
  105 + -moz-transition: opacity 1s;
  106 + -webkit-transition: opacity 1s; }
  107 +
  108 +.nav-animate {
  109 + transform: translate(0, 88px); }
  110 +
  111 +.nav-code-animate {
  112 + visibility: visible;
  113 + width: 123px;
  114 + height: 123px;
  115 + opacity: 1; }
  116 +
91 117 .page1 {
92 118 height: 100vh;
93   - background: url(../images/16x9/1.jpg) no-repeat;
  119 + background: url(../images/16x9/1.jpg) no-repeat top center;
94 120 background-size: cover; }
95 121  
96 122 .page-left, .page-right {
... ... @@ -245,9 +271,31 @@ body {
245 271 padding-top: 18%; }
246 272 .page5-menu li {
247 273 display: inline-block;
248   - width: 77px; }
  274 + width: 77px;
  275 + position: relative; }
249 276 .page5-menu .weibo {
250 277 padding: 0 110px; }
  278 + .page5-menu .wechat-code {
  279 + position: absolute;
  280 + left: -15px;
  281 + top: 85px;
  282 + padding: 10px;
  283 + width: 85px;
  284 + border: solid 1px #f9c613;
  285 + border-radius: 4px;
  286 + opacity: 0;
  287 + width: 0;
  288 + height: 0;
  289 + visibility: hidden;
  290 + overflow: hidden;
  291 + transition: opacity 1s;
  292 + -moz-transition: opacity 1s;
  293 + -webkit-transition: opacity 1s; }
  294 + .page5-menu .wechat-code-animate {
  295 + width: 85px;
  296 + height: 85px;
  297 + opacity: 1;
  298 + visibility: visible; }
251 299  
252 300 .mail {
253 301 text-align: center;
dist/js/crossfade.jquery.js
... ... @@ -0,0 +1 @@
  1 +!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery||window.Zepto)}(function(t){"use strict";function i(i,s){if(this.el=t(i),this.options=s||{},this.options.start=this.options.start||this.el.data("crossfade-start"),this.options.end=this.options.end||this.el.data("crossfade-end"),!this.options.start||!this.options.end)throw new Error("crossfade.js requires two images.");var e=this.options.backgroundPosition.split(" ");this.options.backgroundPositionX=e[0],this.options.backgroundPositionY=e[1],this.width=this.el.width(),this.height=this.el.height(),this.canvas=t("<canvas>").css({position:"absolute",top:"0",left:"0",width:this.width,height:this.height}),this.canvas.appendTo(this.el),this.paintbrush=this.canvas[0].getContext("2d");var o=t.proxy(this.onScroll,this),h=t.proxy(this.onResize,this);this.preload(function(){t(window).on("scroll",o).trigger("scroll"),t(window).on("resize",h).trigger("resize")})}i.prototype.preload=function(i){var s,e,o;this.start=t("<img>").attr({src:this.options.start}),this.end=t("<img>").attr({src:this.options.end}),s=[this.start,this.end],e=s.length,o=function(){e--,0===e&&"function"==typeof i&&i()};for(var h=0;h<s.length;h++)s[h].on("load",o),s[h].prop("complete")&&s[h].trigger("load")},i.prototype.resize=function(){this.needsResize=!1,this.canvas[0].width=this.width,this.canvas[0].height=this.height,this.canvas.css({width:this.width,height:this.height})},i.prototype.draw=function(){var t;this.needsResize&&this.resize(),t=this.getDrawDimensions(this.start[0].width,this.start[0].height,this.width,this.height),this.paintbrush.drawImage(this.start[0],t.offset.x,t.offset.y,t.width,t.height),this.paintbrush.globalAlpha=this.visibility,this.paintbrush.drawImage(this.end[0],t.offset.x,t.offset.y,t.width,t.height),this.paintbrush.globalAlpha=1,this.ticking=!1},i.prototype.getDrawDimensions=function(t,i,s,e){var o={},h=i/t,n=e/s;switch(n>h?(o.width=parseInt(e/h),o.height=parseInt(e)):(o.width=parseInt(s),o.height=parseInt(s*h)),o.offset={},this.options.backgroundPositionY){case"top":o.offset.y=0;break;case"bottom":o.offset.y=-1*(o.height-e);break;case"center":default:o.offset.y=(o.height-e)/-2}switch(this.options.backgroundPositionX){case"left":o.offset.x=0;break;case"right":o.offset.x=-1*(o.width-s);break;case"center":default:o.offset.x=(o.width-s)/-2}return o},i.prototype.onScroll=function(){var i,s=t(window).scrollTop(),e=this.el.offset().top-this.options.offset,o=this.el.height();i=e>s?0:s>e+o?1:(s-e)/(o*this.options.threshold),this.visibility=i,this.requestTick()},i.prototype.onResize=function(){this.needsResize=!0,this.width=this.el.width(),this.height=this.el.height(),this.requestTick()},i.prototype.requestTick=function(){var t=this;this.ticking||window.requestAnimFrame(function(){t.draw()}),this.ticking=!0},t.extend(t.fn,{crossfade:function(s){var e=t.extend({},t.fn.crossfade.defaults,s);return this.each(function(){return t(this).data("crossfade",new i(this,e)),this})}}),t.fn.crossfade.defaults={backgroundPosition:"center center",threshold:.5,offset:0},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()});
0 2 \ No newline at end of file
... ... @@ -14,12 +14,15 @@
14 14 <a href="/checkClient.html?f=fit"><img src="dist/images/btn-android.png" alt="Fit android apk"></a>
15 15 </li>
16 16 <li><a href="https://itunes.apple.com/cn/app/fit-si-ren-jian-shen-jiao-lian/id1102364578?mt=8" class="downloadBtn"><img src="dist/images/btn-app.png" alt="Fit 苹果下载"></a></li>
17   - <li><img src="dist/images/btn-qrcode.png" alt="Fit 二维码"></li>
  17 + <li>
  18 + <img class="nav-code-btn" src="dist/images/btn-qrcode.png" alt="Fit 二维码">
  19 + <img class="nav-code" src="dist/images/qrcode.svg" alt="Fit 二维码">
  20 + </li>
18 21 </ul>
19 22 </div>
20 23 <div class="warp">
21 24 <div class="page page1 clearfix">
22   - <div class="page-left page1-left fl">
  25 + <div class="page-left page1-left fl" >
23 26 <img class="page1-logo" src="dist/images/logo.svg" alt="fit">
24 27 <img class="page1-subtitle" src="dist/images/fit_subtitle.svg" alt="fit">
25 28 </div>
... ... @@ -38,7 +41,7 @@
38 41 </div>
39 42  
40 43 <div class="page page2 clearfix">
41   - <div class="page-left page2-left fl">
  44 + <div class="page-left page2-left fl" data-move-y="200px" data-move-x="-200px">
42 45 <h2>丰富 健身课程</h2>
43 46 <p>满足不同需求的人群,</p>
44 47 <p>零基础用户也能简单开启健身历程,</p>
... ... @@ -109,7 +112,7 @@
109 112 <ul class="page5-menu">
110 113 <li class="wechat">
111 114 <img src="dist/images/wechat.svg" alt="微信公众号">
112   - <div class="img-code"></div>
  115 + <div class="wechat-code"><img src="dist/images/qrcode.svg" alt="微信二维码" /></div>
113 116 </li>
114 117 <li class="weibo">
115 118 <a href="http://weibo.com/fitfitness"><img src="dist/images/weibo.svg" alt="官方微博"></a>
... ... @@ -135,5 +138,42 @@
135 138 </div>
136 139 </div>
137 140 </div>
  141 + <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  142 + <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
  143 + <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
  144 + <script type="text/javascript">
  145 + //导航条
  146 + var WindowHeight = $(window).height(); //屏幕高度
  147 + var bodyHeigh = $(document).height(); //body高度
  148 + var pageHalf = WindowHeight / 2; //屏幕高度的一半
  149 + $(document).scroll(function(){
  150 + var top = $(document).scrollTop();
  151 + if(top > WindowHeight){
  152 + $(".nav").addClass("nav-animate");
  153 + }
  154 + if(top < 50){
  155 + $(".nav").removeClass("nav-animate");
  156 + }
  157 + })
  158 + $(".nav-code-btn").hover(function(){
  159 + $(".nav-code").addClass("nav-code-animate")
  160 + },function(){
  161 + $(".nav-code").removeClass("nav-code-animate")
  162 + })
  163 +
  164 + //底部微信
  165 + $(".wechat").hover(function(){
  166 + $(".wechat-code").addClass("wechat-code-animate")
  167 + },function(){
  168 + $(".wechat-code").removeClass("wechat-code-animate")
  169 + })
  170 +
  171 + //动画
  172 + var controller = new ScrollMagic.Controller();
  173 + var scene = new ScrollMagic.Scene({
  174 + offset: 100, // start scene after scrolling for 100px
  175 + duration: 400 // pin the element for 400px of scrolling
  176 + })
  177 + </script>
138 178 </body>
139 179 </html>
140 180 \ No newline at end of file
... ... @@ -33,9 +33,12 @@ body{
33 33 position: fixed;
34 34 width:100%;
35 35 left:0;
36   - top:0;
  36 + top:-88px;
37 37 background-color: rgba(27, 27, 27, 0.8);
38 38 z-index: 99;
  39 + transition: all 1s;
  40 + -moz-transition: all 1s;
  41 + -webkit-transition: all 1s;
39 42 h1{
40 43 width: 178px;
41 44 float: left;
... ... @@ -59,6 +62,8 @@ body{
59 62 display: inline-block;
60 63 float:left;
61 64 margin-right: 10px;
  65 + position: relative;
  66 + cursor: pointer;
62 67 img{
63 68 vertical-align: middle;
64 69 }
... ... @@ -68,10 +73,32 @@ body{
68 73 }
69 74 }
70 75 }
  76 +.nav-code{
  77 + position: absolute;
  78 + left:0;
  79 + top:66px;
  80 + opacity: 0;
  81 + width:0;
  82 + height: 0;
  83 + visibility:hidden;
  84 + transition: opacity 1s;
  85 + -moz-transition: opacity 1s;
  86 + -webkit-transition: opacity 1s;
  87 +}
  88 +.nav-animate{
  89 + transform: translate(0,88px);
  90 +}
  91 +
  92 +.nav-code-animate{
  93 + visibility:visible;
  94 + width: 123px;
  95 + height: 123px;
  96 + opacity: 1;
  97 +}
71 98 //page1
72 99 .page1{
73 100 height: 100vh;
74   - background: url(../images/16x9/1.jpg) no-repeat;
  101 + background: url(../images/16x9/1.jpg) no-repeat top center;
75 102 background-size:cover;
76 103 }
77 104 .page-left,.page-right{
... ... @@ -246,10 +273,34 @@ body{
246 273 li{
247 274 display:inline-block;
248 275 width:77px;
  276 + position: relative;
249 277 }
250 278 .weibo{
251 279 padding:0 110px;
252 280 }
  281 + .wechat-code{
  282 + position: absolute;
  283 + left:-15px;
  284 + top:85px;
  285 + padding:10px;
  286 + width: 85px;
  287 + border: solid 1px #f9c613;
  288 + border-radius: 4px;
  289 + opacity: 0;
  290 + width: 0;
  291 + height: 0;
  292 + visibility:hidden;
  293 + overflow: hidden;
  294 + transition: opacity 1s;
  295 + -moz-transition: opacity 1s;
  296 + -webkit-transition: opacity 1s;
  297 + }
  298 + .wechat-code-animate{
  299 + width: 85px;
  300 + height: 85px;
  301 + opacity: 1;
  302 + visibility:visible;
  303 + }
253 304 }
254 305 .mail{
255 306 text-align: center;