1
スクリプトでは、画像が非常に遅いです。FPS parallax pluginを増やす方法は？
$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";
var x = (e.pageX * -1/40),
y = (e.pageY * -1/25);
$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
$(".holiday-face_parallax .holiday-face__item_5").each(function(i, el) {
var x = (e.pageX * -1/40), y = (e.pageY * -1/25);
\t $(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_4").each(function(i, el) {
var x = (e.pageX * -1/30), y = (e.pageY * -1/20);
\t $(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_3").each(function(i, el) {
var x = (e.pageX * -1/40), y = (e.pageY * -1/25);
\t $(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_2").each(function(i, el) {
var x = (e.pageX * -1/25), y = (e.pageY * -1/25);
\t $(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_1").each(function(i, el) {
var x = (e.pageX * -1/20), y = (e.pageY * -1/25);
\t $(this).css('background-position', x + 'px ' + y + 'px');
});
});.holiday-face {
bottom: 0;
left: 0;
min-height: 540px;
min-width: 875px;
right: 0;
top: 0;
z-index: -1;
}
.holiday-face_parallax .holiday-face__item_5 {
background-image: url("../img/header-bg-ley2.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_4 {
\t width: 100%;
height: 600px;
background-image: url("../img/header-bg-ley3.png");
}
.holiday-face_parallax .holiday-face__item_3 {
background-image: url("../img/header-bg-ley4.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_2 {
background-image: url("../img/header-bg-ley5.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_1 {
background-image: url("../img/header-bg-ley1.png");
width: 100%;
height: 600px;
}
.holiday-face-words__link {
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
.holiday-face-words {
background: none no-repeat scroll center top rgba(0, 0, 0, 0);
height: 69px;
left: 0px;
position: absolute;
right: 0px;
top: 0%;
\t width:100%;
}
.b-page_holiday-face .holiday-face_parallax .holiday-face__item {
opacity: 1;
}
.holiday-face__item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
left: 0;
margin: 0px 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.1s ease 0s;
}<div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="20" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div><div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="20" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div>
$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";
var x = (e.pageX * -1/40),
y = (e.pageY * -1/25);
$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
$(".holiday-face_parallax .holiday-face__item_5").each(function(i, el) {
var x = (e.pageX * -1/40), y = (e.pageY * -1/25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_4").each(function(i, el) {
var x = (e.pageX * -1/30), y = (e.pageY * -1/20);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_3").each(function(i, el) {
var x = (e.pageX * -1/40), y = (e.pageY * -1/25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_2").each(function(i, el) {
var x = (e.pageX * -1/25), y = (e.pageY * -1/25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_1").each(function(i, el) {
var x = (e.pageX * -1/20), y = (e.pageY * -1/25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
});