主页 / 问题 / 1000603
Accepted
Александр
Asked:2020-07-08 20:38:32 +0000 UTC2020-07-08 20:38:32 +0000 UTC

光滑+动画哇js

  • 772

有一个水平站点可以通过 slick 工作并以块为基础工作。滚动到下一张幻灯片时，必须启动该幻灯片上元素的动画（facts-item-hint）。这是它应该如何工作的一个清晰示例https://lore1ei.github.io/第一张幻灯片上一切都很好，第二张幻灯片与第一张幻灯片一起启动，但它应该只在它位于浏览器窗口的可见性。

    <section class="slider">
        <article class="slider_item">
    <div class="header">
        <div class="wraper">
            <div class="logo">
                <img src="img/logo.png" alt="logo">
                <h1>SM-Marketing</h1>
            </div>
            <div class="first-page">
                <div class="method">
                    <h2>Методика №1</h2>
                    <p class="title-p" >по скоростному получению клиентов из интернета</p>
                    <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
                </div>
                <div class="block-jq">
                    <div class="block-jq-item wow bounceInDown"><div>как найти новых клиентов</div></div>
                    <div class="block-jq-item wow bounceInRight"><div>как получать больше заявок</div></div>
                    <div class="block-jq-item wow bounceInUp"><div>как построить систему лидогенерации</div></div>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="slider_item">
    <div class="facts">
        <div class="wraper wrap100">
            <div class="facts-item">
                <h2>Факт №1</h2>
                <div class="facts-item-hint wow bounceInDown" >Заявки  это сырьё для продаж <br>
                    Не будет заявок – не будет и продаж</div>
            </div>
            <div class="facts-item">
                <h2>Факт №2</h2>
                <div class="facts-item-hint wow bounceInDown" >Прямо сейчас ваши конкуренты используют маркетинговые <br>
                    инструментыи поэтому у них всё впорядке с клиентами </div>
            </div>
        </div>
    </div>
</article>
    </section>

这是滑块的css

.slider 
    width: 100%
    height: 100vh

.slick-list,
.slick-track 
    width: 100%
    height: 100%

.slider__item 
    width: 100%
    height: 100%

这是网站本身在滑块上的工作方式

$(function () {
    $('.slider').slick({
      infinite: false,
      arrows: false
    });

    $('.slider').mousewheel(function (e) {
      if (e.deltaY !== 1) {
        $('.slider').slick('slickNext');
      } else {
        $('.slider').slick('slickPrev');
      }

      e.preventDefault();
    });
  });

我尝试在垂直滚动时使用偏移，它工作正常，但在水平滚动时，所有元素都会立即启动动画。

<script>
        new WOW({
                offset: 100 }).init();
</script>
javascript

2 个回答

  1. Best Answer

    原文在这里-codepen.io/joxxce

    滑块的示例：

    $('.slider').on('init', function(e, slick) {
  var $firstEl = $('.slider_item:first-child').find('[data-animation]');
  doAnimation($firstEl);    
});
$('.slider').on('beforeChange', function(e, slick, currentSlide, nextSlide) {
  var $animationEl = $('.slider_item[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
  doAnimation($animationEl);    
});

$('.slider').slick({
  infinite: false,
  arrows: false,
});


$('.slider').mousewheel(function (e) {
  if (e.deltaY !== 1) {
    $('.slider').slick('slickNext');
  } else {
    $('.slider').slick('slickPrev');
  }

  e.preventDefault();
});


function doAnimation(elements) {
  var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  elements.each(function() {
    var $this = $(this);
    var $animationDelay = $this.data('delay');
    var $animationType = 'animated ' + $this.data('animation');
    $this.css({
      'animation-delay': $animationDelay,
      '-webkit-animation-delay': $animationDelay
    });
    $this.addClass($animationType).one(animationEndEvents, function() {
      $this.removeClass($animationType);
    });
  });
}

// new WOW({
//   offset: 100 
// }).init();
    * {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;

  width: 100%;
  height: 100%;
}

.slider,
.slick-list,
.slick-track,
.slider__item {
  width: 100%;
    height: 100vh;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" ></script>

<section class="slider">

  <article class="slider_item">
    <div class="header">
      <div class="wraper">
        <div class="logo">
          <img src="img/logo.png" alt="logo">
          <h1>SM-Marketing</h1>
        </div>
        <div class="first-page">
          <div class="method">
            <h2>Методика №1</h2>
            <p class="title-p" >по скоростному получению клиентов из интернета</p>
            <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
          </div>
          <div class="block-jq">
            <div class="block-jq-item" data-animation="bounceInDown" data-delay="0.3s"><div>как найти новых клиентов</div></div>
            <div class="block-jq-item" data-animation="bounceInRight" data-delay="0.3s"><div>как получать больше заявок</div></div>
            <div class="block-jq-item" data-animation="bounceInUp" data-delay="0.3s"><div>как построить систему лидогенерации</div></div>
          </div>
        </div>
      </div>
    </div>
  </article>

  <article class="slider_item">
    <div class="facts">
      <div class="wraper wrap100">
        <div class="facts-item">
          <h2>Факт №1</h2>
          <div class="facts-item-hint" data-animation="bounceInDown" data-delay="0.3s">Заявки  это сырьё для продаж <br>
            Не будет заявок – не будет и продаж</div>
        </div>
        <div class="facts-item">
          <h2>Факт №2</h2>
          <div class="facts-item-hint" data-animation="bounceInDown" data-delay="0.3s">Прямо сейчас ваши конкуренты используют маркетинговые <br>
            инструментыи поэтому у них всё впорядке с клиентами </div>
        </div>
      </div>
    </div>
  </article>
</section>

    底线是这里没有使用 wow 插件，而只使用了 animate.css。

    • 3

  2. CodePen Ready slick-slider + wow.js 示例

    function animateSlider(elements){
  var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  elements.each(function(){
    var $this = $(this);
    var $animationType = 'animated ' + $this.data('animation');
    $this.addClass($animationType).one(animationEndEvents, function() {
      $this.removeClass($animationType);
    });
  })
}
$("#animation-slider").on("beforeChange", function(e, slick, currentSlide, nextSlide) {
  var $animatingElements = $('.slick-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
  animateSlider($animatingElements);    
})
$('#animation-slider').on('init', function(e, slick) {
  var $firstAnimatingElements = $('.slick-slide:first-child').find('[data-animation]');
  animateSlider($firstAnimatingElements);    
});
$('.hero-carousel').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: true,
  speed: 300,
  fade: true,
  cssEase: 'linear',
  // autoplay: true,
  // autoplaySpeed: 3000,
});
    .hero-carousel__item
  border: 1px solid black
  text-align: center
  padding: 20px
    .hero-carousel#animation-slider
  .hero-carousel__item
    h1(data-animation="fadeInDown" data-delay="0.3s") Пример анимации
    .buttin(data-animation="fadeInUp" data-delay="0.3s")
      button Кнопка
  .hero-carousel__item
    h1(data-animation="fadeInDown" data-delay="0.3s") Пример анимации
    .buttin(data-animation="fadeInUp" data-delay="0.3s")
      button Кнопка
  .hero-carousel__item
    h1(data-animation="fadeInDown" data-delay="0.3s") Пример анимации
    .buttin(data-animation="fadeInUp" data-delay="0.3s")
      button Кнопка
  .hero-carousel__item
    h1(data-animation="fadeInDown" data-delay="0.3s") Пример анимации
    .buttin(data-animation="fadeInUp" data-delay="0.3s")
      button Кнопка

    • 0

相关问题