[IMP]Improved code for parallax.

bzr revid: bth@tinyerp.com-20131022090654-sobvpbizpzovr5ee
This commit is contained in:
bth-openerp 2013-10-22 14:36:54 +05:30
parent 9bd0b9a9f4
commit e546cc4550
4 changed files with 13 additions and 179 deletions

View File

@ -1,154 +0,0 @@
/****************************
SCROLL&STRAP TEMPLATE V 1.0.
http://sitediscount.ru
******************************/
/************************ HEADER ************************************************/
section #header-section {
padding-bottom:70px;
display:inline-block;
min-height:750px;
position:relative;
padding-top:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
overflow:hidden;
}
#header-section {
background: #222 url(../img/background1.jpg) bottom center no-repeat fixed;
height: 650px;
height: 650px;
/*width: 100%;
max-width:100%;*/
width:1352px;
z-index: -999;
padding-top:0px;
margin-left:-92px;
}
#header-section .hero-unit {
z-index: 1;
}
#header-section .wrap-hero{
position:fixed;
top:200px;
text-align:center;
width:100%;
left:0px;
min-width:100%;
display:block;
}
#header-section .logowrap{
position:absolute;
top:10px;
}
#header-section .hero-unit.hide{
filter: alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE 5.5+*/
-moz-opacity: 0; /* Mozilla 1.6 - */
-khtml-opacity: 0; /* Konqueror 3.1, Safari 1.1 */
opacity: 0; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#header-section .hero-unit{
background:none;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
text-align:center;
max-width:1350px;
color:#fff;
text-shadow: 0 1px 2px #000000;
margin-left:auto;
margin-right:auto;
}
.inner-wrap-hero{
padding:10px 20px;
text-align:center;
}
#header-section .hero-unit h1 span{
/*margin-top:0px;
font-size:65px;*/
display:inline-block;
font-size:70px;
color: #fff/*rgba(250, 250, 250, 1)*/;
line-height: 60px;
font-weight: 400px;
/*margin:5px 0px -5px;*/
padding:15px 20px;
text-shadow:none;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
/*opacity: 0;*/
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#header-section .hero-unit h1 span.active{
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Safari and Chrome */
-o-transform: scale(1,1); /* Opera */
-moz-transform: scale(1,1); /* Firefox */
}
#header-section .hero-unit span{
margin:10px 0 10px;
display:inline-block;
font-weight:300;
}
#header-section .hero-unit span:first-child{
border-top: 1px rgba(250, 250, 250, 1);
border-bottom: 1px rgba(250, 250, 250, 1);
background: rgba(0, 0, 0, 0.0.5);
}
#header-section .hero-unit div.logo a img{
width:400px;
}

View File

@ -438,3 +438,7 @@ a[data-publish][data-publish='on']:hover .css_published {
::selection {
background: rgba(150, 150, 220, 0.3);
}
.pt90 {
padding-top: 90px;
}

View File

@ -335,3 +335,6 @@ a[data-publish]
::selection
background: rgba(150, 150, 220, 0.3)
.pt90
padding-top: 90px

View File

@ -8,7 +8,6 @@
<template id="website.theme" name="Theme">
<link id="bootstrap_css" rel='stylesheet' href='/website/static/lib/bootstrap/css/bootstrap.css' t-ignore="true"/>
<link id="website_css" rel='stylesheet' href='/website/static/src/css/website.css' t-ignore="true"/>
<link id="website_css" rel='stylesheet' href='/website/static/src/css/style.css' t-ignore="true"/>
</template>
<template id="layout" name="Main layout">
@ -462,30 +461,12 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
<div class="oe_structure"/>
<div class="container mb32">
<div class="row col-wrap" id="aboutus">
<section class="headertop needhead col-sm-12 text-center parallax" id="header-section" style="background-position: 50% -64px;" data-snippet-id="parallax">
<header class="container">
<div class="row-fluid">
<div class="wrap-hero">
<div class="hero-unit text-center">
<!--LOGO-->
<div class="logo">
<a href="#" title="openerp">
<img src="/website/static/src/img/logo.png" alt="logo"/>
</a>
</div>
<!--/ LOGO-->
<div class="inner-wrap-hero">
<h1 class="text-center main-color">
<span class="active">Great Product for Great People</span>
</h1>
</div>
</div>
</div><!-- / HERO UNIT-->
</div><!-- / HERO WRAP-->
</header><!-- / HEADER MARKETING SLOGAN container-->
</section>
<div class="col-sm-12 text-center" data-snippet-id="parallax">
<div class="parallax oe_structure oe_big" style="background-image: url('/website/static/src/img/parallax/background1.jpg')" data-stellar-background-ratio="0.3">
<h1 class="pt90">About us</h1>
<h3 class="text-muted">A passion for great products</h3>
</div>
</div>
<div class="col-sm-8 mt16">
<p>
We are a team of passionated people whose goal is to improve everyone's