Difference between revisions of "Team:CHINA CD UESTC/homeDemo"
| Line 1: | Line 1: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| + | <!-- saved from url=(0028)http://www.whitefrontier.ch/ --> | ||
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | <html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<!-- CSS | <!-- CSS | ||
| − | <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css"> | + | <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css">--> |
| − | <link rel="stylesheet" type="text/css" href=" | + | <link rel="stylesheet" type="text/css" href="./css/home.css"> |
| − | + | ||
<style type="text/css"> | <style type="text/css"> | ||
.unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;} | .unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;} | ||
| Line 48: | Line 48: | ||
body.opened aside #mobileMenuButton span:first-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,7px) rotate(45deg); -moz-transform: translate(0px,7px) rotate(45deg); -ms-transform: translate(0px,7px) rotate(45deg); -o-transform: translate(0px,7px) rotate(45deg); transform: translate(0px,7px) rotate(45deg);} | body.opened aside #mobileMenuButton span:first-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,7px) rotate(45deg); -moz-transform: translate(0px,7px) rotate(45deg); -ms-transform: translate(0px,7px) rotate(45deg); -o-transform: translate(0px,7px) rotate(45deg); transform: translate(0px,7px) rotate(45deg);} | ||
body.opened aside #mobileMenuButton span:last-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,-7px) rotate(-45deg); -moz-transform: translate(0px,-7px) rotate(-45deg); -ms-transform: translate(0px,-7px) rotate(-45deg); -o-transform: translate(0px,-7px) rotate(-45deg); transform: translate(0px,-7px) rotate(-45deg);} | body.opened aside #mobileMenuButton span:last-child { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0px,-7px) rotate(-45deg); -moz-transform: translate(0px,-7px) rotate(-45deg); -ms-transform: translate(0px,-7px) rotate(-45deg); -o-transform: translate(0px,-7px) rotate(-45deg); transform: translate(0px,-7px) rotate(-45deg);} | ||
| − | body.opened # | + | body.opened #realcontent { left: 100px; opacity: 0.2 !important; pointer-events: none;} |
body { | body { | ||
| Line 130: | Line 130: | ||
/*menu css over*/ | /*menu css over*/ | ||
| − | # | + | #realcontent #homeIndex { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} |
| − | # | + | #realcontent #homeIndex .contentInner { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} |
| − | # | + | #realcontent #homeIndex a { overflow: hidden;} |
| − | # | + | #realcontent #homeIndex a img.fullBg { display: block; position: absolute; top: 0; left: 0; display: none;} |
| − | # | + | #realcontent #homeIndex a .overlay { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #262626; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; z-index: 1;} |
| − | # | + | #realcontent #homeIndex a .title { position: absolute; top: 50%; left: 50%; z-index: 10; -webkit-backface-visibility: hidden;} |
| − | # | + | #realcontent #homeIndex a video { position: absolute; left: 0; right: 0; opacity: 0; filter: alpha(opacity=0);} |
| − | # | + | #realcontent #homeIndex a .gallery { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0);} |
| − | # | + | #realcontent #homeIndex a .gallery img { display: block; position: absolute; top: 0; left: 0; z-index: 2;} |
| − | # | + | #realcontent #homeIndex a .gallery img.active { z-index: 4;} |
| − | # | + | #realcontent #homeIndex a .gallery img.lastActive { z-index: 3;} |
| − | # | + | #realcontent #homeIndex .beer { position: absolute; top: 0; left: 0; bottom: 0; width: 44%; background: url("../pic/bg_beer.jpg") repeat center center #f2f2f2;} |
| − | # | + | #realcontent #homeIndex .beer .overlay { opacity: 0.2; filter: alpha(opacity=20);} |
| − | # | + | #realcontent #homeIndex .beer span { display: block;} |
| − | # | + | #realcontent #homeIndex .beer .middle { width: 100%; display: inline-block; vertical-align: middle; line-height: normal;} |
| − | # | + | #realcontent #homeIndex .beer .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: 0px 0px; width: 221px; height: 225px; text-indent: -6000px; text-align: left; position: relative; top: auto; left: auto; margin: 0 auto; margin-bottom: 50px;} |
| − | # | + | #realcontent #homeIndex .beer .swipe { overflow: hidden; visibility: hidden; position: relative;} |
| − | # | + | #realcontent #homeIndex .beer .swipe .swipe-wrap { overflow: hidden; position: relative;} |
| − | # | + | #realcontent #homeIndex .beer .swipe .swipe-wrap div { float: left; width: 100%; position: relative;} |
| − | # | + | #realcontent #homeIndex .beer .swipe .swipe-wrap div img { width: 20%; height: 20%; display: block; margin: 0 auto; max-height: 80%;} |
| − | # | + | #realcontent #homeIndex .beer:hover .overlay { opacity: 0; filter: alpha(opacity=0);} |
| − | # | + | #realcontent #homeIndex .experience { position: absolute; top: 0; left: 44%; right: 0; height: 50%; background: url("../pic/bg_experience.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} |
| − | # | + | #realcontent #homeIndex .experience .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -260px -4px; width: 289px; height: 140px; text-indent: -6000px; text-align: left; margin-left: -145px; margin-top: -70px;} |
| − | # | + | #realcontent #homeIndex .ambassador { position: absolute; top: 50%; left: 44%; right: 28%; bottom: 0; background: url("../pic/bg_ambassador.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} |
| − | # | + | #realcontent #homeIndex .ambassador .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -578px -4px; width: 274px; height: 157px; text-indent: -6000px; text-align: left; margin-top: -78px; margin-left: -137px;} |
| − | # | + | #realcontent #homeIndex .social { position: absolute; top: 50%; left: 72%; right: 0; bottom: 0; background: url("../pic/bg_social.jpg") no-repeat center center #f2f2f2; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} |
| − | # | + | #realcontent #homeIndex .social .title { background: url("../pic/sprite.png") no-repeat top left transparent; display: block; zoom: 1; background-position: -892px 0px; width: 250px; height: 144px; text-indent: -6000px; text-align: left; margin-top: -72px; margin-left: -125px;} |
| − | .no-touch # | + | .no-touch #realcontent #homeIndex a:hover .overlay { opacity: 0; filter: alpha(opacity=0);} |
| − | .touch # | + | .touch #realcontent #homeIndex a.beer .overlay { opacity: 0; filter: alpha(opacity=0); display: none;} |
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} | * { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} | ||
| Line 167: | Line 167: | ||
img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none;} | img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none;} | ||
html,body { min-height: 100%; width: 100%; height: 100%; background: #000000 ; color: #ffffff; overflow: hidden; font-family: 'din-condensed-web'; font-size: 14px; font-weight: 400;} | html,body { min-height: 100%; width: 100%; height: 100%; background: #000000 ; color: #ffffff; overflow: hidden; font-family: 'din-condensed-web'; font-size: 14px; font-weight: 400;} | ||
| − | # | + | #realcontent { position: absolute; left: 260px; top: 0; right: 0; height: 100%; overflow: hidden; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} |
.fullBg { position: absolute; top: 0; left: 0; display: none;} | .fullBg { position: absolute; top: 0; left: 0; display: none;} | ||
.fullBg.display { display: block;} | .fullBg.display { display: block;} | ||
| Line 183: | Line 183: | ||
@media screen and (max-width: 1050px) { html aside { width: 200px; } | @media screen and (max-width: 1050px) { html aside { width: 200px; } | ||
html aside #logo { margin-left: 20px; margin-right: 20px; } | html aside #logo { margin-left: 20px; margin-right: 20px; } | ||
| − | html # | + | html #realcontent { left: 200px; } |
} | } | ||
| − | @media screen and (max-width: 1200px) { html # | + | @media screen and (max-width: 1200px) { html #realcontent #homeIndex a .title { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } |
| − | html # | + | html #realcontent #homeIndex .beer .title { margin-bottom: 20px; } |
| − | html # | + | html #realcontent #homeIndex .beer { background-size: 150%; } |
} | } | ||
| − | @media screen and (max-width: 900px) { html # | + | @media screen and (max-width: 900px) { html #realcontent #homeIndex .experience { height: 40%; } |
| − | html # | + | html #realcontent #homeIndex .ambassador { top: 40%; right: 0; bottom: auto; height: 30%; } |
| − | html # | + | html #realcontent #homeIndex .social { left: 44%; top: 70%; } |
} | } | ||
| Line 201: | Line 201: | ||
html aside { left: -200px; } | html aside { left: -200px; } | ||
html aside #mobileMenuButton { display: block; } | html aside #mobileMenuButton { display: block; } | ||
| − | html # | + | html #realcontent { left: 0; right: auto; width: 100%; } |
} | } | ||
| − | </style> | + | </style> |
</head> | </head> | ||
| Line 289: | Line 289: | ||
| − | <div id=" | + | <div id="realcontent"> |
<div id="homeIndex"> | <div id="homeIndex"> | ||
<div class="contentInner"> | <div class="contentInner"> | ||
| Line 393: | Line 393: | ||
var experienceInterval; | var experienceInterval; | ||
function experienceGalleryNext() { | function experienceGalleryNext() { | ||
| − | var $active = $('# | + | var $active = $('#realcontent #homeIndex a.experience .gallery img.active'); |
| − | if ( $active.length == 0 ) $active = $('# | + | if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.experience .gallery img:last'); |
| − | var $next = $active.next().length ? $active.next() : $('# | + | var $next = $active.next().length ? $active.next() : $('#realcontent #homeIndex a.experience .gallery img:first'); |
$active.addClass('lastActive'); | $active.addClass('lastActive'); | ||
$next.css({opacity: 0.0}) | $next.css({opacity: 0.0}) | ||
| Line 403: | Line 403: | ||
}); | }); | ||
} | } | ||
| − | $('.no-touch # | + | $('.no-touch #realcontent #homeIndex a.experience').hover(function(){ |
var $gallery = $(this).find('.gallery'); | var $gallery = $(this).find('.gallery'); | ||
$gallery.stop().animate({ | $gallery.stop().animate({ | ||
| Line 443: | Line 443: | ||
}, 1400); | }, 1400); | ||
} | } | ||
| − | $('.no-touch # | + | $('.no-touch #realcontent #homeIndex a.beer').hover(function(){ |
swipeBeer.next(); | swipeBeer.next(); | ||
again(); | again(); | ||
Revision as of 10:48, 15 April 2015
<!DOCTYPE html>
