3

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('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide2 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide3 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide4 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide5 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
<body>
    <div class="container">
        <div class="header">
            <img class="logo" src="http://placehold.it/156x33">
        </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>

2
  • jQuery is not build for animating, so it has rather basic implementation. Probably the performance is just bad. I'd recommend Velocity.js as it's build with performance in mind. May 2, 2016 at 14:31
  • I tried velocity. I have the same effect but less obvious!
    – Muaaz
    May 3, 2016 at 13:52

1 Answer 1

1

The code I posted is working fine now. It seems all browsers fixed the bugs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.