I'm using the below code to create a full width full height website with sliding background images. it's all working fine with Firefox and IE but on Chrome and Safari the background is shaking during the animation. I also noticed the speed of the animation increasing overtime (not the actual var but it just seems to move faster after a while) any ideas on how to fix it or maybe a new solution to avoid animate() completely?
$(function() {
//settings for slider
var width = '100%';
console.log(width)
var animationSpeed = 2000;
var pause = 5000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
html,body {
background-color:black;
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
min-height: 100%;
height: 100%;
padding: 0;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.row {
padding: 0;
}
.header {
background-color: white;
height: 85px;
}
#slider {
width: 100%;
height: calc(100% - 250px);
overflow: hidden;
}
#slider .slides {
display: block;
width: 600%;
height: 100%;
margin: 0;
padding: 0;
}
#slider .slide {
float: right;
list-style-type: none;
width: 16.666666667%;
height: 100%;
}
.footer {
color: white;
height: 165px;
padding: 72px 0 0 470px;
}
.slide1 {background: url('http://ift.tt/1Z31F4t') no-repeat center center fixed; background-size: cover;}
.slide2 {background: url('http://ift.tt/1Z31F4t') no-repeat center center fixed; background-size: cover;}
.slide3 {background: url('http://ift.tt/1Z31F4t') no-repeat center center fixed; background-size: cover;}
.slide4 {background: url('http://ift.tt/1Z31F4t') no-repeat center center fixed; background-size: cover;}
.slide5 {background: url('http://ift.tt/1Z31F4t') no-repeat center center fixed; background-size: cover;}
<body>
<div class="container">
<div class="header">
<img class="logo" src="http://ift.tt/1WCCTt1">
</div>
<h1>Proin bibendum ligula massa nec maximus.</h1>
<div id="slider">
<ul class="slides">
<li class="slide slide1"></li>
<li class="slide slide2"></li>
<li class="slide slide3"></li>
<li class="slide slide4"></li>
<li class="slide slide5"></li>
<li class="slide slide1"></li>
</ul>
</div>
<div class="footer">
<div>
<ul>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire