I'm having problem on my fixed background during transition. I have 2 panels, the panel-1 has 2 images which will animate from left to right and from right to left respectively, basically it will just add a class 'animate' to trigger the transition. During the transition, the panel-2 (which has the fixed background and some text contents) will flickers in chrome. Kindly check it live http://jsfiddle.net/7EqaV/embedded/result/
Any advice? Thanks in advance!..
HTML code:
<div class="wrapper">
<input type="button" value='animate' id="animate" />
<div class="panel-1">
<div class="items" id="slideLeft">
<img src="http://sitetest12302.businesscatalyst.com/images/p1.jpg">
</div>
<div class="items" id="slideRight">
<img src="http://sitetest12302.businesscatalyst.com/images/p2.jpg">
</div>
</div>
<div class="panel-2">
<div class="bg"></div>
<div class="content">
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna</h1>
</div>
</div>
CSS code:
.wrapper {
width:500px;
margin:auto;
}
.panel-1, .panel-2 {
width:100%;
height: 200px;
border: 2px solid #000;
position:relative;
}
.panel-2 .bg {
width:100%;
height: 200px;
background:url(http://sitetest12302.businesscatalyst.com/images/bg.jpg) no-repeat;
background-size:cover;
background-attachment: fixed;
position: absolute;
background-position:center;
}
.items {
width:150px;
height:150px;
}
.content {
position:absolute;
z-index:2;
width:100%;
}
h1 {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
color:#FFF;
font-size:15px;
}
#slideLeft, #slideRight {
-webkit-transition:-webkit-transform 1s 0s;
-moz-transition: -moz-transform 1s 0s;
width:150px;
height:150px;
}
#slideLeft {
float:left;
-webkit-transform:translate3d(-200%, 0, 0);
-moz-transform:translate3d(-200%, 0, 0);
}
#slideRight {
float:right;
-webkit-transform:translate3d(200%, 0, 0);
-moz-transform:translate3d(200%, 0, 0);
}
.animate #slideLeft, .animate #slideRight {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
}
.animate h1 {
filter:alpha(opacity=100) !important;
-moz-opacity:1 !important;
opacity: 1 !important;
}
JS code:
$(document).ready(function () {
$('input#animate').click(function () {
$('.panel-1, .panel-2').toggleClass('animate');
});
});