3
以下のコードを使用して、スライディングバックグラウンド画像を含む完全なフルハイトのウェブサイトを作成しています。 FirefoxとIEではうまくいきますが、ChromeとSafariではアニメーション中に背景が揺れています。私はアニメーションのスピードが時間外に増えていることにも気付きました（実際の変数ではなく、しばらくしてから速く動くようです）。クロムでjQueryアニメーションを適用しているときの意図しない振る舞いの効果
$(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 {
\t background-color:black;
\t height: 100%;
\t margin: 0px;
\t padding: 0px;
}
.container {
\t width: 100%;
\t min-height: 100%;
\t height: 100%;
\t 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 {
\t padding: 0;
}
.header {
\t background-color: white;
\t 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 {
\t color: white;
\t 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>
jQueryはアニメーション化のためにビルドされていないので、基本的な実装があります。おそらくパフォーマンスは悪いです。 Velocity.jsはパフォーマンスを念頭に置いて構築することをお勧めします。 –
私は速度を試みました。私は同じ効果があるが、あまり明らかではない！ – Muaaz