以下是 jQuery页面锚链接平滑过渡切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery页面锚链接平滑过渡切换代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<section class="demo" id="blur">
<div class="content text-center">
<div class="scroll-text">
<p>Click Arrow</p>
<a class="anchor-scroll scroll-arrow" href="#test" data-class-to="body" data-on-scroll="blur"></a>
</div>
</div>
</section>
<section class="demo bg-gray" id="test">
<div class="content text-center">
<h2>Bounce After Scroll</h2>
<p class="mrg-btm-0">Add bounce effect to anchor element after scrolling to it.</p>
<pre class="prettyprint"><code><a href="#test-2" class="anchor-scroll" data-class-to="#test-2" data-scroll-end="bounce">...</a></code></pre>
<a class="anchor-scroll scroll-arrow" href="#test-2" data-class-to="#test-2" data-scroll-end="bounce"></a>
</div>
</section>
<section class="demo scroll-top animated" id="test-2">
<div class="content text-center">
<a class="arrow-up scroll-arrow" href="#blur"></a>
<h2>Callback</h2>
<p class="mrg-btm-0">Callback functions on scroll start and end.</p>
<pre class="prettyprint"><code>$('.arrow-up').scrollAnchor({
scrollStart: function () {
$(".popup").text("Scrolling...");
},
scrollEnd: function () {
$(".popup").text("Done!");
}
});
</code></pre>
</div>
</section>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.anchorScroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Anchor Scroll
$('.anchor-scroll').anchorScroll({
scrollSpeed: 800 // scroll speed
});
$('.arrow-up').anchorScroll({
scrollSpeed: 1400, // scroll speed
onScroll: function () {
$(".fill-bg").fadeIn( "slow" );
$(".popup").text("Scrolling...");
},
scrollEnd: function () {
$(".fill-bg").delay(1000).fadeOut( "slow" );
$(".popup").text("Done!");
}
});
});
</script>
</body>
</html>JS代码(jquery.anchorScroll.min.js):
/*! * jQuery.anchorScroll jQuery Plugin v1.0 * * Author:Virgiliu Diaconu * http://www.virgiliu.com * Licensed under the MIT license. */
!function(o){
"use strict";
o.anchorScroll=function(l,t){
var n=this;
n.$el=o(l),n.el=l,n.init=function(){
n.options=o.extend({
}
,o.anchorScroll.defaultOptions,t)}
,n.$el.click(function(t){
if(t.preventDefault(),o(t.target).closest("a").length&&o(n.el.hash).length){
var e=o(n.el.hash).offset().top-n.options.offsetTop,s="this"===n.$el.data("classTo")?n.el:n.$el.data("classTo"),c=n.$el.data("onScroll"),a=n.$el.data("scrollEnd");
"function"==typeof n.options.scrollStart&&n.options.scrollStart.call(l),o(s).addClass(c).removeClass(a),o("html,body").animate({
scrollTop:e}
,n.options.scrollSpeed).promise().done(function(){
o(s).addClass(a).removeClass(c),"function"==typeof n.options.scrollEnd&&n.options.scrollEnd.call(l)}
)}
}
),n.init()}
,o.anchorScroll.defaultOptions={
scrollSpeed:800,offsetTop:0}
,o.fn.anchorScroll=function(l){
return this.each(function(){
new o.anchorScroll(this,l)}
)}
}
(jQuery,window,document);
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
.preloader{text-align:center;position:fixed;width:100%;height:100%;background:white;z-index:99999;}
.preloader .item{position:relative;text-align:center;width:64px;height:64px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:0 auto;}
html,body{font-family:'Lato',sans-serif;font-size:15px;-webkit-font-smoothing:subpixel-antialiased!important;color:black;font-weight:400;height:100%;}
a{text-decoration:none;outline:none;}
h1{font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:32px;color:white;font-weight:400;text-transform:uppercase;letter-spacing:6px;line-height:1.2;}
h2{font-family:"Montserrat",Helvetica,Arial,sans-serif;}
p{font-family:'Lato',sans-serif;font-size:15px;font-weight:300;letter-spacing:1px;margin-top:40px;}
h1 span{color:#2fa68e;}
.work-heading h1 span{color:inherit !important;display:inline-block;}
.label{font-family:'Lato',sans-serif;text-transform:uppercase;font-size:22px;margin:60px 0;text-align:center;line-height:20px;font-weight:300;color:#ddd;letter-spacing:6px;}
::selection{background:#111;color:white;}
::-moz-selection{background:#111;color:white;}
.img-responsive{width:100%;height:auto;}
.load-img{margin:0 auto 15px auto;height:288px;}
.height-auto{height:auto !important;}
.work-item .img-responsive{margin-bottom:35px;}
.container{/* position:absolute;*/
width:100%;height:100%;}
/* Helpers */
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
/* start commented backslash hack \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* close commented backslash hack */
.text-center{text-align:center;}
.hidden{visibility:hidden;}
.visible{visibility:visible;}
a.attr{color:#a4a4a4;text-decoration:underline;}
.bg-gray{background:#f3f3f3 !important;}
.opacity-none{opacity:0;}
.opacity-full{opacity:1;}
.op-2{opacity:.2;}
.inline-title{color:#000;text-decoration:underline;}
.pos-fixed{position:fixed !important;}
.mrg-0{margin:0 !important;}
.mrg-btm-0{margin-bottom:0 !important;}
.mrg-top-0{margin-top:0 !important;}
.offscreen{position:fixed;right:10000px;}
.options .title{display:block;clear:both;letter-spacing:4px;font-size:18px;font-weight:600;text-align:center;margin-top:40px;}
.options p{font-size:18px !important;line-height:30px !important;width:100% !important;margin:0 0 10px 0 !important;}
.options strong{color:#000;}
.color-dark{color:#111 !important;}
.fill-bg{display:none;background-color:rgba(255,255,255,.8);z-index:1800;height:100%;width:100%;background-repeat:repeat;position:fixed;top:0px;left:0px;}
.v-align-html{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.pull-left{float:left;}
/* Start page */
.start-page{width:100%;height:100%;background:url('../img/bg.jpg') #c0c0c0 bottom center fixed no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.start-page.cut{height:initial;}
.start-page.cut .v-align-html{position:relative;top:0;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.start-page h1{font-size:60px;}
.start-page p{color:white;opacity:.9;letter-spacing:.04em;font-size:24px;line-height:1.4;}
.start-page hr{color:white;margin-top:30px;background-color:white;height:1px;width:106px;border:0;}
.start-page .opacity{position:absolute;width:100%;height:100%;background:rgba(51,51,51,0.5);/* Standard Off */
}
.start-page .content{position:relative;width:100%;margin:0 auto;height:100%;}
.start-page .content .text{text-align:center;margin:auto;padding:60px 0;}
.start-page .content .text .logo{height:auto;margin:-80px auto 0 auto;padding-bottom:40px;}
.start-page .content .text .logo img{max-width:150px;width:100%;}
.logo-mrg{margin-top:-50px;}
.start-page .content .text .read-more{width:183px;height:47px;margin:100px auto;line-height:47px;border:1px solid white;text-transform:uppercase;color:white;display:block;cursor:pointer;font-size:14px;letter-spacing:1px;background:none;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in;}
.start-page .content .text .read-more:hover{color:white;background:#2fa68e;border:1px solid #2fa68e;}
.arrow-down{position:absolute;bottom:110px;left:50%;margin-left:-10px;width:21px;height:29px;background:url(../img/arrow-down.png) no-repeat center center;display:block;-webkit-animation:bounce-fade 1.2s infinite;/* Safari 4+ */
-moz-animation:bounce-fade 1.2s infinite;/* Fx 5+ */
-o-animation:bounce-fade 1.2s infinite;/* Opera 12+ */
animation:bounce-fade 1.2s infinite;/* IE 10+ */
}
.arrow-down.sm{position:static;}
.anchor-scroll.sm{display:none;}
.anchor-scroll.bg{display:block;}
@-webkit-keyframes bounce-fade{0%{opacity:0;bottom:70px;}
100%{opacity:1;bottom:35px;}
}
@-moz-keyframes bounce-fade{0%{opacity:0;bottom:70px;}
100%{opacity:1;bottom:35px;}
}
@-o-keyframes bounce-fade{0%{opacity:0;bottom:70px;}
100%{opacity:1;bottom:35px;}
}
@keyframes bounce-fade{0%{opacity:0;bottom:70px;}
100%{opacity:1;bottom:35px;}
}
/* Menu mobile */
.menu-media{position:fixed;top:0;width:100%;height:90px;background:transparent;z-index:99999;display:block;}
.menu-media .menu-content{width:100%;position:relative;margin:0 auto;}
.menu-media .menu-content .logo{color:white;font-weight:700;font-size:24px;width:200px;line-height:160px;float:left;list-style:none;}
.menu-media .menu-content .icon{opacity:.6;width:41px;height:23px;float:right;margin-right:40px;line-height:110px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.menu-media .menu-content .icon:hover{opacity:1;}
#menu-overlay{opacity:0;background:#111;position:fixed;visibility:hidden;top:0;width:100%;height:100%;-webkit-transition:all .6s;-moz-transition:all .6s;-ms-transition:all .6s;-o-transition:all .6s;transition:all .6s;}
#menu-overlay.menu-show{visibility:visible;z-index:1000;opacity:1;}
ul.menu-click{text-align:center;}
.menu-click li a{font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:400;position:relative;color:#fff;font-size:60px;text-align:center;line-height:98px;z-index:1000;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.menu-click li a:hover{color:#2fa68e;}
/* Menu */
.menu{position:relative;width:100%;height:60px;background:white;border-bottom:1px solid #f2f2f2;z-index:1000;}
.menu-content{width:900px;position:relative;margin:0 auto;}
.menu-content .logo{color:#333;font-weight:700;font-size:24px;width:300px;line-height:160px;float:left;list-style:none;}
.menu-content ul{width:500px;left:50%;float:right;text-align:right;list-style:none;}
.menu-content li{display:inline-block;position:relative;}
.menu-content li a{color:#333;font-size:16px;display:block;padding:0 20px 0 20px;line-height:60px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.menu-content li.active a{color:#2fa68e;}
.menu-content li a:hover{color:#2fa68e;}
/* About us */
.about-us{position:relative;width:100%;background:white;z-index:10;}
.about-us .content{position:relative;width:900px;margin:0 auto;overflow:hidden;}
.about-us h1{font-size:34px;color:black;text-align:center;margin-top:120px;letter-spacing:6px;font-weight:bold;text-transform:uppercase;line-height:1.2;}
.about-us hr{color:black;margin-top:30px;background-color:#666;height:1px;width:106px;border:0;}
.about-us p.title{color:#a4a4a4;margin:35px auto;width:75%;line-height:30px;letter-spacing:.04em;font-size:18px;font-weight:300;text-align:center;}
.about-us h2{text-align:center;margin-top:32px;font-size:26px;color:black;line-height:1.2;letter-spacing:6px;width:100%;position:relative;font-weight:400;}
.about-us p,.demo .col-2 p,.demo .col-3 p{text-align:center;font-size:15px;width:250px;margin:30px auto;color:#a4a4a4;line-height:26px;letter-spacing:0;position:relative;font-weight:300;}
.column-one{text-align:center;margin-top:30px;width:300px;float:left;margin-bottom:70px;height:350px;}
.column-one .circle-one{height:120px;position:relative;margin:0 auto;/* background:url(../img/icons/web-design.png) white no-repeat center center;*/
/*-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;*/
width:120px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.about-us img{width:100%;-ms-transform:scale(.85);/* IE 9 */
-webkit-transform:scale(.85);/* Chrome,Safari,Opera */
transform:scale(.85);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
/*.scale:hover img{-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);}
*/
.column-two{text-align:center;margin-top:30px;width:300px;float:left;margin-bottom:70px;height:350px;}
.column-two .circle-two{height:120px;position:relative;margin:0 auto;width:120px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.column-three{text-align:center;margin-top:30px;width:300px;float:left;margin-bottom:70px;height:350px;}
.column-three .circle-three{height:120px;position:relative;margin:0 auto;width:120px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
/* Portfolio */
.portfolio{position:relative;width:100%;background:#f3f3f3;z-index:10;}
.portfolio .portfolio-margin{position:relative;width:900px;overflow:hidden;margin:0 auto;}
.portfolio .portfolio-margin .read-more{width:183px;height:47px;position:relative;margin:50px auto 100px;line-height:47px;border:1px solid #333333;text-transform:uppercase;text-align:center;color:#333333;cursor:pointer;font-size:14px;background:none;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in;letter-spacing:1px;}
.portfolio .portfolio-margin .read-more:hover{background:#2fa68e;color:white;border:1px solid #2fa68e;}
.portfolio .portfolio-margin h1{font-size:34px;color:black;text-align:center;margin-top:120px;letter-spacing:6px;font-weight:bold;text-transform:uppercase;line-height:1.2;}
.portfolio .portfolio-margin hr{color:black;margin-top:30px;background-color:black;height:1px;width:106px;border:0;}
/* Portfolio grid */
.grid{margin-top:50px;width:100%;position:relative;margin-bottom:120px;overflow:hidden;}
.grid li{width:48%;margin:0 0 15px 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;position:relative;overflow:hidden;}
.grid img{width:100%;height:auto;float:left;position:relative;}
.grid .text{position:absolute;width:100%;height:100%;background:rgba(17,17,17,0.85);z-index:2;opacity:0;-webkit-transition:opacity 0.3s ease-in;-moz-transition:opacity 0.3s ease-in;-ms-transition:opacity 0.3s ease-in;-o-transition:opacity 0.3s ease-in;transition:opacity 0.3s ease-in;}
.grid .text:hover{opacity:1;}
.grid p{font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:26px;text-transform:uppercase;text-align:center;line-height:1.2;font-weight:400;letter-spacing:6px;color:#fff;margin-top:0;}
.grid p.description{font-family:'Lato',sans-serif;text-transform:uppercase;font-size:15px;margin-top:20px;text-align:center;line-height:20px;font-weight:300;color:#2fa68e;position:relative;}
.clear{clear:both;}
/* Partners */
.partners{position:relative;width:100%;z-index:10;height:400px;background:url('../img/background/partners.jpg') 0px 0px fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.partners .opacity{position:absolute;width:100%;height:400px;background:rgba(79,79,79,0.6);}
.partners .content{position:absolute;width:900px;height:190px;margin:auto;top:0;bottom:0;left:0;right:0;}
.partners h2{color:white;letter-spacing:1px;font-size:32px;font-weight:300;text-align:center;}
.partners .logo{position:relative;width:900px;overflow:hidden;margin-top:50px;text-align:center;}
.partners .logo img{opacity:0.5;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.partners .logo img:hover{opacity:1;}
/* Contact */
.contact{position:relative;width:100%;background:white;z-index:10;padding:120px 0;}
.contact .content{margin-left:auto;margin-right:auto;}
.contact h1{font-size:34px;color:black;text-align:center;letter-spacing:6px;font-weight:bold;text-transform:uppercase;line-height:1.2;}
.contact hr{color:black;margin-top:30px;background-color:black;height:1px;width:106px;border:0;}
.contact p.title{color:#a4a4a4;margin:35px auto;line-height:30px;letter-spacing:.04em;font-size:18px;font-weight:300;text-align:center;}
.btn{width:200px;height:70px;position:relative;margin:0 auto;line-height:70px;border:1px solid #333333;text-transform:uppercase;text-align:center;color:#333333;cursor:pointer;font-size:14px;background:none;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;letter-spacing:1px;}
.btn:hover{background:#111;color:#fff;border:1px solid #111;}
.btn a{color:inherit !important;width:100%;display:block;}
.btn-inline .btn{display:inline-block;margin-right:10px !important;margin-left:10px !important;margin-bottom:20px !important;}
.contact .content .form{width:455px;overflow:hidden;height:auto;float:left;}
.contact .content .form .column{width:180px;overflow:hidden;height:auto;float:left;letter-spacing:1px;margin-bottom:30px;}
.contact .content .form .column-2{width:210px;padding-left:60px;overflow:hidden;height:auto;float:left;letter-spacing:1px;margin-bottom:30px;}
.contact .content .form .column-3{width:450px;overflow:hidden;height:auto;float:left;letter-spacing:1px;}
.contact .content .contact-text{width:405px;overflow:hidden;height:auto;font-weight:300;float:left;padding-left:40px;color:black;font-size:14px;line-height:26px;}
/* COLUMNS */
.col-2 .column-one,.col-2 .column-two{width:50%;height:auto;}
.col-2 .column-one,.col-2 .column-two{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* DEMO */
.demo{position:relative;width:100%;background:white;z-index:10;overflow:hidden;padding:120px 0;}
.demo h3{text-align:center;margin-top:35px;font-size:26px;color:black;line-height:1.2;letter-spacing:6px;width:100%;position:relative;font-weight:400;}
.demo.animations{padding-bottom:20px;}
.demo .col-2 .column-one,.demo .col-2 .column-two{margin-top:35px;}
.demo .col-2.lazyload img{height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.demo .col-3 .column-one,.demo .col-3 .column-two,.demo .col-3 .column-three{width:30%;}
.demo .col-3 .column-two{margin-left:5%;margin-right:5%;}
.demo .col-2 .column-one{padding-right:7.5px;}
.demo .col-2 .column-two{padding-left:7.5px;}
.demo .col-3 img{margin-top:5px;margin-bottom:35px;max-width:250px;width:100%;}
.demo .col-3 .column-one,.demo .col-3 .column-two,.demo .col-3 .column-three{height:auto !important;}
.demo .mouse img{max-width:180px;width:100%;}
body.anchor-scroll-page,body.scroll-class-page{background:#f3f3f3;}
body.anchor-scroll-page .demo{/* padding:60px 0;*/
-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}
.demo .content{max-width:900px;overflow:hidden;margin:0 auto;}
.demo h1{font-size:34px;color:black;text-align:center;margin-top:0;margin-bottom:40px;letter-spacing:6px;font-weight:bold;text-transform:uppercase;line-height:1.2;}
.demo h2{text-align:center;font-size:34px;color:black;line-height:1.2;letter-spacing:6px;text-transform:uppercase;position:relative;margin-bottom:28px;}
.demo hr{color:black;margin:30px auto;background-color:black;height:1px;width:106px;border:0;}
.demo p{text-align:center;font-size:18px;max-width:750px;width:100%;margin:0 auto 38px auto;color:#a4a4a4;line-height:30px;letter-spacing:0;position:relative;font-weight:300;}
.demo p a{color:#a4a4a4;text-decoration:underline;}
.demo p a:hover{color:#666;}
.demo p a.show-code{white-space:nowrap;}
.demo .toggle{white-space:nowrap;}
.demo p.title{color:#a4a4a4;margin:0 auto 35px auto;width:100%;line-height:30px;letter-spacing:.04em;font-size:18px;font-weight:300;text-align:center;}
.scroll-text p{margin:35px auto 8px auto;color:#111;width:auto;}
.scroll-text .scroll-arrow{margin:6px auto 0 auto;}
.bar-container{display:block;margin:0 auto;}
.bar{width:0;height:65px;background:#000;display:block;margin-bottom:12px;-webkit-transition:width 2s;/* Safari */
transition:width 2s;}
.bar-1{width:100%}
.bar-2{width:65%;}
.bar-3{width:45%;}
.bar-4{width:85%;}
strong{font-weight:700;}
input{width:180px;height:40px;background:#f8f7f7;border-top:1px solid #333;border-bottom:0;border-left:0;border-right:0;color:#333;font-weight:300;line-height:40px;padding-left:15px;font-family:'Lato',sans-serif;font-size:14px;margin-bottom:10px;}
input:focus{background:#f4f4f4;}
textarea{width:420px;height:150px;border-top:1px solid #333;border-bottom:0;line-height:20px;border-left:0;border-right:0;background:#f8f7f7;color:#333;font-weight:300;padding:15px 0 0 15px;font-family:'Lato',sans-serif;font-size:14px;margin-bottom:10px;}
textarea:focus{background:#f4f4f4;}
input.submit{width:100px;height:34px;float:right;margin:20px 10px 0 0;border:0;font-weight:700;text-align:right;background:none;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in;}
/* Work Item */
#work-item{opacity:0;}
.work-item .content,.work-heading .content{position:relative;width:900px;overflow:hidden;margin:0 auto;text-align:center;}
.work-item .content{padding-bottom:95px;}
.work-heading h1{font-size:50px;color:#000;text-align:center;margin-top:100px;letter-spacing:6px;font-weight:200;text-transform:uppercase;line-height:1.2;}
.work-heading hr{margin-top:30px;background-color:#000;height:1px;width:106px;border:0;}
.work-heading p.title{color:#a4a4a4;margin:35px auto;width:85%;line-height:1.5;letter-spacing:.04em;font-size:20px;font-weight:300;text-align:center;}
.work-heading p.title.small{font-size:18px;line-height:1.5;}
.work-heading p.title.bigger{font-size:28px;width:75%;}
.work-heading p.title.narrow{width:75%;}
.work-heading p.title.narrower{width:65%;}
.work-heading .btn{border:1px solid #000;color:#000;}
.work-heading .btn:hover{border-color:#000;}
.work-heading.light h1{color:#fff;}
.work-heading.light hr{background:#fff;}
.work-heading.light p.title{color:#ddd;}
.work-heading.light .btn{border:1px solid #fff;color:#fff;}
.work-heading.light .btn:hover{border:1px solid #000;}
body.work .logo-top{position:absolute;top:30px;left:30px;z-index:888;margin:0;}
body.work .btn{position:relative;overflow:hidden;margin:0 auto;}
.scroll-arrow{width:57px;height:57px;background:url(../img/scroll-down.png);background-repeat:no-repeat;background-position-x:center;display:inline-block;clear:both;margin:35px auto 0 auto;}
.scroll-arrow:hover{background-image:url(../img/scroll-down-hover.png);}
.scroll-top .scroll-arrow{background-image:url(../img/scroll-up.png);margin:0 auto 36px auto !important;}
.scroll-top .scroll-arrow:hover{background-image:url(../img/scroll-up-hover.png);}
.bounce-animation{-webkit-animation:bounce-fade 1.2s infinite;/* Safari 4+ */
-moz-animation:bounce-fade 1.2s infinite;/* Fx 5+ */
-o-animation:bounce-fade 1.2s infinite;/* Opera 12+ */
animation:bounce-fade 1.2s infinite;/* IE 10+ */
}
body.scroll-class-page .work-heading{background:url("../work/img/scroll-class-bg.jpg");background-repeat:no-repeat;background-size:cover;background-position:0;}
body.anchor-scroll-page .work-heading{background:url("../work/img/anchor-scroll-bg.jpg");background-repeat:none;background-size:cover;background-position:0;}
body.anchor-scroll-page .demo p{margin-bottom:0 !important;}
/* Nav Icon */
/*#nav-icon{background:url("../img/menu-open.png");background-repeat:no-repeat;position:fixed;top:30px;right:30px;z-index:88888;display:block;width:57px;height:57px;margin:0;cursor:pointer;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;}
#nav-icon:hover{background:url("../img/menu-open-hover.png");}
#nav-icon.menu-close{background:url("../img/menu-close.png");}
\*/
#nav-icon{position:fixed;top:35px;right:35px;z-index:88888;display:block;width:45px;height:28px;margin:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
#nav-icon:hover span{background-color:#2fa68e !important;}
#nav-icon span{display:block;position:absolute;height:4px;width:100%;background:#111;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
#nav-icon.light span{background:#fff;}
#nav-icon.dark span{background:#111;}
#nav-icon span:nth-child(1){top:0px;}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3){top:12px;}
#nav-icon span:nth-child(4){top:24px;}
#nav-icon.open span{background:#fff;}
#nav-icon.open span:nth-child(1){top:18px;width:0%;left:50%;}
#nav-icon.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
#nav-icon.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
#nav-icon.open span:nth-child(4){top:18px;width:0%;left:50%;}
/* Pre */
pre.prettyprint{font-size:90%;line-height:1.5em;font-family:"Courier 10 Pitch",Courier,monospace;text-align:center;/* white-space:pre;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;*/
/* height:1%;*/
width:auto;display:block;clear:both;color:#555555;padding:3em !important;margin:35px auto 0 auto !important;background:#f9f9f9;border:none !important;width:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:auto;}
.bg-gray pre.prettyprint{background-color:#fff;}
code{display:inline-block;font-size:90%;font-family:Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;background:transparent;overflow:auto;text-align:left;margin-left:auto;margin-right:auto}
.code{display:none;}
.code-sm code{width:300px;margin:0 auto;text-align:left;}
/* Footer */
.footer{width:100%;background:#111;}
.footer a{font-size:14px;}
.footer .logo{position:relative;width:80px;height:61px;margin:0 auto;padding-top:50px;opacity:.3;}
.footer .menu-footer{width:80%;text-align:center;margin:0 auto;padding-top:30px;overflow:hidden;position:relative;}
.footer .menu-footer a{font-family:'Lato',sans-serif;line-height:46px;padding:10px;color:#a4a4a4;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.footer .menu-footer a:hover{color:#2fa68e;}
.footer .copyright{font-family:'Lato',sans-serif;width:80%;position:relative;font-weight:300;margin:0 auto;padding:30px 0 50px;text-align:center;font-size:14px;line-height:36px;color:#a4a4a4;}
/* Animations */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated-infinite{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes bounce{0%,0%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(30px);}
60%{-webkit-transform:translateY(15px);}
}
@keyframes bounce{0%,0%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(30px);}
60%{transform:translateY(15px);}
}
.bounce{-webkit-animation-name:bounce;animation-name:bounce;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0);}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;}
body.animated{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.blur{/* Any browser which supports CSS3 */
filter:blur(2px);/* Firefox */
-moz-filter:blur(2px);/* Webkit */
-webkit-filter:blur(2px);/* Opera */
-o-filter:blur(2px);}
.popup{z-index:2000;position:fixed;left:0;right:0;text-align:center;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:4.5em;color:#000;text-transform:uppercase;font-weight:800;letter-spacing:1px;max-width:550px;width:100%;margin:0 auto;background:#fff;padding:40px 0;-webkit-box-shadow:0px 0px 40px 0px rgba(0,0,0,0.35);-moz-box-shadow:0px 0px 40px 0px rgba(0,0,0,0.35);box-shadow:0px 0px 40px 0px rgba(0,0,0,0.35);}
.s div{position:absolute;top:100px;text-align:center;width:100%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#111;font-weight:400;font-size:20px;letter-spacing:.1em;text-decoration:none;transition:opacity .3s;}
#s{position:relative;width:100%;height:180px;display:inline-block;}
#s div{padding-top:80px;}
#s div span{position:absolute;top:0;left:50%;width:24px;height:24px;margin-left:-12px;border-left:1px solid #111;border-bottom:1px solid #111;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb07 2s infinite;animation:sdb07 2s infinite;opacity:0;box-sizing:border-box;}
#s div span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s;}
#s div span:nth-of-type(2){top:16px;-webkit-animation-delay:.15s;animation-delay:.15s;}
#s div span:nth-of-type(3){top:32px;-webkit-animation-delay:.3s;animation-delay:.3s;}
@-webkit-keyframes sdb07{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@keyframes sdb07{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
分享到QQ
分享到微博
微信扫一扫
