以下是 jQuery CSS3点击向上拉伸切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Sliding Panels Template | CodyHouse</title>
</head>
<body>
<a class="cd-nav-trigger cd-text-replace" href="#primary-nav">Menu<span aria-hidden="true" class="cd-icon"></span></a>
<div class="cd-projects-container">
<ul class="cd-projects-previews">
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 2</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 3</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 4</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>
</ul> <!-- .cd-projects-previews -->
<ul class="cd-projects">
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
</p>
</div> <!-- .cd-project-info -->
</li>
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 2</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
</p>
</div> <!-- .cd-project-info -->
</li>
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 3</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
</p>
</div> <!-- .cd-project-info -->
</li>
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 4</h2>
<p>Brief description of the project here</p>
</div>
</div>
<div class="cd-project-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
</p>
</div> <!-- .cd-project-info -->
</li>
</ul> <!-- .cd-projects -->
<button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->
<nav class="cd-primary-nav" id="primary-nav">
<ul>
<li class="cd-label">Navigation</li>
<li><a href="#0">The team</a></li>
<li><a href="#0">Our services</a></li>
<li><a href="#0">Our projects</a></li>
<li><a href="#0">Contact us</a></li>
</ul>
</nav> <!-- .cd-primary-nav -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
//cache DOM elementsvar projectsContainer = $('.cd-projects-container'),projectsPreviewWrapper = projectsContainer.find('.cd-projects-previews'),projectPreviews = projectsPreviewWrapper.children('li'),projects = projectsContainer.find('.cd-projects'),navigationTrigger = $('.cd-nav-trigger'),navigation = $('.cd-primary-nav'),//if browser doesn't support CSS transitions...transitionsNotSupported = ( $('.no-csstransitions').length > 0);
var animating = false,//will be used to extract random numbers for projects slide up/slide down effectnumRandoms = projects.find('li').length,uniqueRandoms = [];
//open projectprojectsPreviewWrapper.on('click','a',function(event){
event.preventDefault();
if( animating == false ){
animating = true;
navigationTrigger.add(projectsContainer).addClass('project-open');
openProject($(this).parent('li'));
}
}
);
navigationTrigger.on('click',function(event){
event.preventDefault();
if( animating == false ){
animating = true;
if( navigationTrigger.hasClass('project-open') ){
//close visible projectnavigationTrigger.add(projectsContainer).removeClass('project-open');
closeProject();
}
else if( navigationTrigger.hasClass('nav-visible') ){
//close main navigationnavigationTrigger.removeClass('nav-visible');
navigation.removeClass('nav-clickable nav-visible');
if(transitionsNotSupported) projectPreviews.removeClass('slide-out');
else slideToggleProjects(projectsPreviewWrapper.children('li'),-1,0,false);
}
else{
//open main navigationnavigationTrigger.addClass('nav-visible');
navigation.addClass('nav-visible');
if(transitionsNotSupported) projectPreviews.addClass('slide-out');
else slideToggleProjects(projectsPreviewWrapper.children('li'),-1,0,true);
}
}
if(transitionsNotSupported) animating = false;
}
);
//scroll down to project infoprojectsContainer.on('click','.scroll',function(){
projectsContainer.animate({
'scrollTop':$(window).height()}
,500);
}
);
//check if background-images have been loaded and show project previewsprojectPreviews.children('a').bgLoaded({
afterLoaded:function(){
showPreview(projectPreviews.eq(0));
}
}
);
function showPreview(projectPreview){
if(projectPreview.length > 0 ){
setTimeout(function(){
projectPreview.addClass('bg-loaded');
showPreview(projectPreview.next());
}
,150);
}
}
function openProject(projectPreview){
var projectIndex = projectPreview.index();
projects.children('li').eq(projectIndex).add(projectPreview).addClass('selected');
if( transitionsNotSupported ){
projectPreviews.addClass('slide-out').removeClass('selected');
projects.children('li').eq(projectIndex).addClass('content-visible');
animating = false;
}
else{
slideToggleProjects(projectPreviews,projectIndex,0,true);
}
}
function closeProject(){
projects.find('.selected').removeClass('selected').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$(this).removeClass('content-visible').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
slideToggleProjects(projectsPreviewWrapper.children('li'),-1,0,false);
}
);
//if browser doesn't support CSS transitions...if( transitionsNotSupported ){
projectPreviews.removeClass('slide-out');
projects.find('.content-visible').removeClass('content-visible');
animating = false;
}
}
function slideToggleProjects(projectsPreviewWrapper,projectIndex,index,bool){
if(index == 0 ) createArrayRandom();
if( projectIndex != -1 && index == 0 ) index = 1;
var randomProjectIndex = makeUniqueRandom();
if( randomProjectIndex == projectIndex ) randomProjectIndex = makeUniqueRandom();
if( index < numRandoms - 1 ){
projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out',bool);
setTimeout( function(){
//animate next preview projectslideToggleProjects(projectsPreviewWrapper,projectIndex,index + 1,bool);
}
,150);
}
else if ( index == numRandoms - 1 ){
//this is the last project preview to be animatedprojectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out',bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
if( projectIndex != -1){
projects.children('li.selected').addClass('content-visible');
projectsPreviewWrapper.eq(projectIndex).addClass('slide-out').removeClass('selected');
}
else if( navigation.hasClass('nav-visible') && bool ){
navigation.addClass('nav-clickable');
}
projectsPreviewWrapper.eq(randomProjectIndex).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
animating = false;
}
);
}
}
//http://stackoverflow.com/questions/19351759/javascript-random-number-out-of-5-no-repeat-until-all-have-been-usedfunction makeUniqueRandom(){
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
// now remove that value from the array uniqueRandoms.splice(index,1);
return val;
}
function createArrayRandom(){
//reset arrayuniqueRandoms.length = 0;
for (var i = 0;
i < numRandoms;
i++){
uniqueRandoms.push(i);
}
}
}
);
/* * BG Loaded * Copyright (c) 2014 Jonathan Catmull * Licensed under the MIT license. */
(function($){
$.fn.bgLoaded = function(custom){
var self = this;
// Default plugin settingsvar defaults ={
afterLoaded:function(){
this.addClass('bg-loaded');
}
}
;
// Merge default and user settingsvar settings = $.extend({
}
,defaults,custom);
// Loop through elementself.each(function(){
var $this = $(this),bgImgs = $this.css('background-image').split(',');
$this.data('loaded-count',0);
$.each( bgImgs,function(key,value){
var img = value.replace(/^url\(["']?/,'').replace(/["']?\)$/,'');
$('<img/>').attr('src',img).load(function(){
$(this).remove();
// prevent memory leaks$this.data('loaded-count',$this.data('loaded-count')+1);
if ($this.data('loaded-count') >= bgImgs.length){
settings.afterLoaded.call($this);
}
}
);
}
);
}
);
}
;
}
)(jQuery);
CSS代码(reset.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"PT Sans",sans-serif;color:#ffffff;background-color:#262423;}
a{color:#a8ae7e;text-decoration:none;}
/* --------------------------------Patterns - reusable parts of our design-------------------------------- */
.cd-text-replace{/* replace text with image */
color:transparent;text-indent:100%;overflow:hidden;white-space:nowrap;}
/* --------------------------------Menu trigger-------------------------------- */
.cd-nav-trigger{position:absolute;z-index:4;top:24px;right:5%;height:52px;width:52px;border-radius:50%;background-color:rgba(0,0,0,0.8);-webkit-transition:background 0.2s;-moz-transition:background 0.2s;transition:background 0.2s;}
.cd-nav-trigger .cd-icon,.cd-nav-trigger .cd-icon::before,.cd-nav-trigger .cd-icon::after{/* menu icon created in CSS */
position:absolute;background-color:#ffffff;border-radius:2px;/* Force Hardware Acceleration in WebKit */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.no-touch .cd-nav-trigger:hover{background-color:black;}
.cd-nav-trigger .cd-icon{/* middle line of the menu icon */
display:inline-block;width:18px;height:2px;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition:-webkit-transform 0.3s,background-color 0.3s;-moz-transition:-moz-transform 0.3s,background-color 0.3s;transition:transform 0.3s,background-color 0.3s;}
.cd-nav-trigger .cd-icon::before,.cd-nav-trigger .cd-icon::after{/* upper and lower lines of the menu icon */
content:'';top:0;right:0;width:100%;height:100%;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-nav-trigger .cd-icon::before{-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px);}
.cd-nav-trigger .cd-icon::after{-webkit-transform:translateY(6px);-moz-transform:translateY(6px);-ms-transform:translateY(6px);-o-transform:translateY(6px);transform:translateY(6px);}
.cd-nav-trigger.project-open .cd-icon{/* user selects a projects - transform the icon into a 'X' */
background-color:rgba(255,255,255,0);}
.cd-nav-trigger.project-open .cd-icon::before,.cd-nav-trigger.project-open .cd-icon::after{background-color:white;}
.cd-nav-trigger.project-open .cd-icon::before{-webkit-transform:translateY(0) rotate(45deg);-moz-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);-o-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);}
.cd-nav-trigger.project-open .cd-icon::after{-webkit-transform:translateY(0) rotate(-45deg);-moz-transform:translateY(0) rotate(-45deg);-ms-transform:translateY(0) rotate(-45deg);-o-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg);}
.cd-nav-trigger.nav-visible .cd-icon{/* user opens the navigation - transform the icon into an arrow */
-webkit-transform:translateY(-50%) translateX(-50%);-moz-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);-o-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);}
.cd-nav-trigger.nav-visible .cd-icon::after{-webkit-transform:translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);-moz-transform:translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);-ms-transform:translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);-o-transform:translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);transform:translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);}
.cd-nav-trigger.nav-visible .cd-icon::before{-webkit-transform:translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);-moz-transform:translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);-ms-transform:translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);-o-transform:translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);transform:translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);}
@media only screen and (min-width:1024px){.cd-nav-trigger.nav-visible .cd-icon{-webkit-transform:translateY(-50%) translateX(-50%) rotate(-90deg);-moz-transform:translateY(-50%) translateX(-50%) rotate(-90deg);-ms-transform:translateY(-50%) translateX(-50%) rotate(-90deg);-o-transform:translateY(-50%) translateX(-50%) rotate(-90deg);transform:translateY(-50%) translateX(-50%) rotate(-90deg);}
.cd-nav-trigger.nav-visible .cd-icon::after{-webkit-transform:translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);-moz-transform:translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);-ms-transform:translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);-o-transform:translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);transform:translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);}
.cd-nav-trigger.nav-visible .cd-icon::before{-webkit-transform:translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);-moz-transform:translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);-ms-transform:translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);-o-transform:translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);transform:translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);}
}
/* --------------------------------Projects-------------------------------- */
.cd-projects-container{position:relative;z-index:2;overflow-x:hidden;}
.cd-projects-container.project-open{/* smooth scroll on iOS devices */
-webkit-overflow-scrolling:touch;}
.cd-projects-previews{position:relative;z-index:2;height:100vh;width:100vw;}
.cd-projects-previews::after{clear:both;content:"";display:table;}
.project-open .cd-projects-previews{pointer-events:none;}
.cd-projects-previews li{height:25%;width:100%;overflow:hidden;-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;transition:transform 0.5s;/* Force Hardware Acceleration */
-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(1px);-moz-transform:translateZ(1px);-ms-transform:translateZ(1px);-o-transform:translateZ(1px);transform:translateZ(1px);}
.cd-projects-previews li.selected{opacity:0;/* move selected project preview out of the viewport with no transition */
-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 0s;-moz-transition:-moz-transform 0s;transition:transform 0s;}
.cd-projects-previews li.slide-out{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}
.cd-projects-previews a{display:block;height:100vh;width:100%;/* fixes a bug on projects caption width */
-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%);opacity:0;-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;transition:opacity 0.5s;}
.cd-projects-previews li:nth-of-type(2) a{-webkit-transform:translateY(-25%);-moz-transform:translateY(-25%);-ms-transform:translateY(-25%);-o-transform:translateY(-25%);transform:translateY(-25%);}
.cd-projects-previews li:nth-of-type(3) a{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
.cd-projects-previews li:nth-of-type(4) a{-webkit-transform:translateY(-75%);-moz-transform:translateY(-75%);-ms-transform:translateY(-75%);-o-transform:translateY(-75%);transform:translateY(-75%);}
.cd-projects-previews .bg-loaded a{opacity:1;}
@media only screen and (min-width:1024px){.cd-projects-previews li{display:inline-block;height:100%;width:25%;float:left;}
.cd-projects-previews li.selected{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);}
.cd-projects-previews li.slide-out{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);}
.cd-projects-previews a{/* width equal to window width */
width:400%;}
.cd-projects-previews li:nth-of-type(2) a{-webkit-transform:translateX(-25%);-moz-transform:translateX(-25%);-ms-transform:translateX(-25%);-o-transform:translateX(-25%);transform:translateX(-25%);}
.cd-projects-previews li:nth-of-type(3) a{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
.cd-projects-previews li:nth-of-type(4) a{-webkit-transform:translateX(-75%);-moz-transform:translateX(-75%);-ms-transform:translateX(-75%);-o-transform:translateX(-75%);transform:translateX(-75%);}
}
.cd-projects{position:absolute;z-index:1;top:0;left:0;height:100vh;width:100vw;}
.cd-projects > li{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s;}
.cd-projects > li.selected{z-index:1;opacity:1;-webkit-transition:opacity 0s;-moz-transition:opacity 0s;transition:opacity 0s;}
.cd-projects .preview-image{display:block;height:100vh;}
.cd-projects-previews a,.cd-projects .preview-image{/* set a background image for each project */
background:#5b927d url(../img/img-1.jpg) no-repeat center center;background-size:cover;}
.cd-projects-previews li:nth-of-type(2) a,.cd-projects > li:nth-of-type(2) .preview-image{background:#a8ae7e url(../img/img-2.jpg) no-repeat center center;background-size:cover;}
.cd-projects-previews li:nth-of-type(3) a,.cd-projects > li:nth-of-type(3) .preview-image{background:#e7d5a4 url(../img/img-3.jpg) no-repeat center center;background-size:cover;}
.cd-projects-previews li:nth-of-type(4) a,.cd-projects > li:nth-of-type(4) .preview-image{background:#835531 url(../img/img-4.jpg) no-repeat center center;background-size:cover;}
.cd-project-title{position:absolute;width:100%;top:calc(50% - 20px);left:0;color:#ffffff;-webkit-transform:translateY(-37.5vh);-moz-transform:translateY(-37.5vh);-ms-transform:translateY(-37.5vh);-o-transform:translateY(-37.5vh);transform:translateY(-37.5vh);-webkit-transition:-webkit-transform 0.6s 0.2s;-moz-transition:-moz-transform 0.6s 0.2s;transition:transform 0.6s 0.2s;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-project-title::after{/* line below project title */
content:'';position:absolute;left:50%;bottom:-10px;width:40px;height:1px;background:#ffffff;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.no-touch .cd-projects-previews a:hover .cd-project-title::after{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
.cd-projects .cd-project-title::after{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);-webkit-transition:-webkit-transform 0.3s 0.3s;-moz-transition:-moz-transform 0.3s 0.3s;transition:transform 0.3s 0.3s;}
.cd-project-title h2{font-size:2.5rem;line-height:1.5;font-weight:700;}
.cd-project-title p{font-size:1.4rem;font-family:"Merriweather",serif;font-style:italic;line-height:1.2;padding:.4em 2em;opacity:.8;}
@media only screen and (min-width:1024px){.cd-project-title{width:25%;top:50vh;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%);}
}
.cd-projects-previews li:nth-of-type(2) .cd-project-title,.cd-projects > li:nth-of-type(2) .cd-project-title{-webkit-transform:translateY(-12.5vh);-moz-transform:translateY(-12.5vh);-ms-transform:translateY(-12.5vh);-o-transform:translateY(-12.5vh);transform:translateY(-12.5vh);}
@media only screen and (min-width:1024px){.cd-projects-previews li:nth-of-type(2) .cd-project-title,.cd-projects > li:nth-of-type(2) .cd-project-title{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);}
}
.cd-projects-previews li:nth-of-type(3) .cd-project-title,.cd-projects > li:nth-of-type(3) .cd-project-title{-webkit-transform:translateY(12.5vh);-moz-transform:translateY(12.5vh);-ms-transform:translateY(12.5vh);-o-transform:translateY(12.5vh);transform:translateY(12.5vh);}
@media only screen and (min-width:1024px){.cd-projects-previews li:nth-of-type(3) .cd-project-title,.cd-projects > li:nth-of-type(3) .cd-project-title{-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%);}
}
.cd-projects-previews li:nth-of-type(4) a .cd-project-title,.cd-projects > li:nth-of-type(4) .cd-project-title{-webkit-transform:translateY(37.5vh);-moz-transform:translateY(37.5vh);-ms-transform:translateY(37.5vh);-o-transform:translateY(37.5vh);transform:translateY(37.5vh);}
@media only screen and (min-width:1024px){.cd-projects-previews li:nth-of-type(4) a .cd-project-title,.cd-projects > li:nth-of-type(4) .cd-project-title{-webkit-transform:translateX(300%);-moz-transform:translateX(300%);-ms-transform:translateX(300%);-o-transform:translateX(300%);transform:translateX(300%);}
}
li.selected .cd-project-title,.cd-projects > li:nth-of-type(2).selected .cd-project-title,.cd-projects > li:nth-of-type(3).selected .cd-project-title,.cd-projects > li:nth-of-type(4).selected .cd-project-title{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
@media only screen and (min-width:1024px){li.selected .cd-project-title,.cd-projects > li:nth-of-type(2).selected .cd-project-title,.cd-projects > li:nth-of-type(3).selected .cd-project-title,.cd-projects > li:nth-of-type(4).selected .cd-project-title{-webkit-transform:translateX(150%);-moz-transform:translateX(150%);-ms-transform:translateX(150%);-o-transform:translateX(150%);transform:translateX(150%);}
}
.cd-projects li.selected .cd-project-title::after{-webkit-transition:-webkit-transform 0.3s 0s;-moz-transition:-moz-transform 0.3s 0s;transition:transform 0.3s 0s;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);}
.touch .cd-projects li.selected .cd-project-title::after{-webkit-transition:-webkit-transform 0s;-moz-transition:-moz-transform 0s;transition:transform 0s;}
.cd-project-info{display:none;padding:4em 0;background-color:#ffffff;color:#7d7c7b;}
.content-visible .cd-project-info{display:block;}
.cd-project-info p{width:90%;max-width:800px;margin:0 auto;line-height:2;}
.cd-projects-container .scroll{display:block;position:absolute;z-index:2;bottom:30px;left:50%;width:44px;height:44px;/* rest button default style */
cursor:pointer;border:none;background:url("../img/cd-icon-arrow.svg") no-repeat center center;visibility:hidden;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);-webkit-transition:-webkit-transform 0.3s 0s,visibility 0s 0.3s;-moz-transition:-moz-transform 0.3s 0s,visibility 0s 0.3s;transition:transform 0.3s 0s,visibility 0s 0.3s;}
.cd-projects-container .scroll:focus{outline:none;}
.cd-projects-container.project-open .scroll{visibility:visible;-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);-webkit-transition:-webkit-transform 0.4s 0s,visibility 0s 0s;-moz-transition:-moz-transform 0.4s 0s,visibility 0s 0s;transition:transform 0.4s 0s,visibility 0s 0s;-webkit-animation:cd-translate 1.2s 0.8s;-moz-animation:cd-translate 1.2s 0.8s;animation:cd-translate 1.2s 0.8s;-webkit-animation-iteration-count:2;-moz-animation-iteration-count:2;animation-iteration-count:2;}
.no-touch .cd-projects-container.project-open .scroll:hover{-webkit-transform:translateX(-50%) scale(1.2);-moz-transform:translateX(-50%) scale(1.2);-ms-transform:translateX(-50%) scale(1.2);-o-transform:translateX(-50%) scale(1.2);transform:translateX(-50%) scale(1.2);}
@-webkit-keyframes cd-translate{0%{-webkit-transform:translateX(-50%) scale(1);}
50%{-webkit-transform:translateY(10px) translateX(-50%) scale(1);}
100%{-webkit-transform:translateX(-50%) scale(1);}
}
@-moz-keyframes cd-translate{0%{-moz-transform:translateX(-50%) scale(1);}
50%{-moz-transform:translateY(10px) translateX(-50%) scale(1);}
100%{-moz-transform:translateX(-50%) scale(1);}
}
@keyframes cd-translate{0%{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
50%{-webkit-transform:translateY(10px) translateX(-50%) scale(1);-moz-transform:translateY(10px) translateX(-50%) scale(1);-ms-transform:translateY(10px) translateX(-50%) scale(1);-o-transform:translateY(10px) translateX(-50%) scale(1);transform:translateY(10px) translateX(-50%) scale(1);}
100%{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
}
/* -------------------------------- Navigation-------------------------------- */
.cd-primary-nav{position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;overflow:auto;text-align:center;opacity:0;-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;/* vertically align its content */
display:table;}
.cd-primary-nav ul{/* vertically align inside nav */
display:table-cell;vertical-align:middle;}
.cd-primary-nav a{display:inline-block;padding:.4em 1em;border-radius:4px;-webkit-transition:background 0.2s;-moz-transition:background 0.2s;transition:background 0.2s;color:#ffffff;font-family:"Merriweather",serif;font-size:2.4rem;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.no-touch .cd-primary-nav a:hover{background-color:#a8ae7e;}
.cd-primary-nav .cd-label{position:relative;margin:2.4em 0 2em;color:#a8ae7e;text-transform:uppercase;font-weight:700;font-size:1.2rem;letter-spacing:1px;}
.cd-primary-nav .cd-label::after{/* line below .cd-label*/
content:'';position:absolute;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);bottom:-16px;height:1px;width:40px;background-color:currentColor;}
.cd-primary-nav.nav-visible{opacity:1;}
.cd-primary-nav.nav-clickable{z-index:3;}
.no-csstransitions .cd-primary-nav.nav-visible{z-index:3;}
@media only screen and (min-width:1170px){.cd-primary-nav a{font-size:4rem;}
}
/* --------------------------------JavaScript Disabled-------------------------------- */
.no-js .cd-primary-nav{display:block;position:static;opacity:1;margin-bottom:1.5em;}
.no-js .cd-primary-nav ul{display:block;padding:0 5%;}
.no-js .cd-primary-nav ul::after{clear:both;content:"";display:table;}
.no-js .cd-primary-nav li:not(.cd-label){display:inline-block;}
分享到QQ
分享到微博
微信扫一扫
