Почему плагин навешивается на класс только один раз? Как навесить его на каждый класс?

Как навесить его на каждый класс parallax?

(function($) {
  $.fn.parallax = function(options) {

    let settings = $.extend({
      'speed': '15'
    }, options);

    // console.log(this); // Object { 0: div.parallax, 1: div.parallax, length: 2, prevObject: {…} }

    return this.each(function() {
      let ths = $(this);

      ths
        .css({
          'min-height': '400px',
          'position': 'relative',
          'overflow': 'hidden'
        })
        .wrapInner("<div class='parallax-content' style='position:relative; z-index:1'>")
        .prepend("<div class='image-parallax' style='background-image:url(" + ths.data('parallax-image') + ");background-size:cover; background-position:top; position:absolute; top:0; width:100%'>");

      function parallaxInit() {
        let pHeight = ths.height();

        ths.children('.image-parallax').css({
          'height': pHeight * 2,
          'top': -pHeight
        });

        let scrollTop = $(document).scrollTop();
        let sp = ths.offset().top - $(window).height();
        let ob = ths.offset().top + pHeight;
        let sr = scrollTop - sp;

        if (scrollTop >= sp && scrollTop <= ob) {
          ths.children('.image-parallax').css({
            'transform': "translate3d(0px, " + sr / settings.speed + "%, 0px)",
            '-webkit-transform': "translate3d(0px, " + sr / settings.speed + "%, 0px)"
          });
        }
      };


      $(window).scroll(function() {
        parallaxInit();
      }).load(function() {
        parallaxInit();
      });

      $('*').resize(function() {
        parallaxInit();
      });

    }); // return

  };
})(jQuery);

(function() {
  $('.parallax').parallax({
    'speed': '20'
  });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<div class="parallax" data-parallax-image="https://img5.goodfon.ru/original/1280x800/2/8f/gory-voda-nebo-1.jpg">
  <p>Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax </p>
</div>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>


<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<div class="parallax" data-parallax-image="https://img5.goodfon.ru/original/1280x800/2/8f/gory-voda-nebo-1.jpg">
  <p>Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax Parallax </p>
</div>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur sapiente voluptatibus minima perspiciatis eos deleniti harum eligendi eius corrupti provident maxime vitae, earum ex inventore numquam natus, voluptatum corporis. Fugit!</p>
<p>Velit officia architecto porro? Accusamus voluptatem, ipsa architecto rerum sunt amet libero vel blanditiis recusandae aperiam ducimus velit iste dolores magni ea doloremque ratione doloribus nam. Repellendus necessitatibus soluta commodi?</p>
<p>Officia culpa harum quidem tenetur facilis voluptates impedit velit eligendi quos aperiam atque nihil voluptatem officiis, modi labore cumque quo voluptate odit earum omnis qui minus ullam deserunt natus. Sapiente!</p>
<p>Quasi est veniam libero esse enim veritatis fugiat debitis eveniet consequuntur, expedita provident dolore maiores molestias delectus facilis nihil similique. Doloremque cupiditate alias excepturi inventore dolorum minus ut ipsum dignissimos?</p>
<p>Non reprehenderit rem veritatis esse sed cumque odit rerum totam dolorum sunt similique, mollitia corporis, placeat consequuntur, laborum libero ut! Voluptas ipsa sequi iusto. Magni ullam numquam deserunt culpa ea?</p>

$('.parallax').parallax({
  'speed' : '20'
});

$('.parallax').parallax({
  'speed' : '15'
});

Так не работает

$('.parallax').parallax({
  'speed' : '20'
});

$('.parallax2').parallax({
  'speed' : '15'
});

И для разных классов тоже


Ответы (0 шт):