javascript - 如何增加FPS视差插件？

Question

脚本中，画面很慢。

$(".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');
       
      });

    });

.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 {
    	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%;
    	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');

      });

    });

Answer 1

它看起来像

的值

var x = (e.pageX * -1/30), y = (e.pageY * -1/20);

定义视差的速度。您的示例无法正常工作，因此我无法确定是否对此进行测试。

尝试更改这些分配的值。较小的值会使速度变慢，而较大的值会使速度变快。

例如，要使其变得非常慢，请尝试

var x = (e.pageX * -1/3000), y = (e.pageY * -1/2000);

看起来每个功能都有自己的速度，因此您可以选择每张照片的运行速度。