БЛОГ НА HUSL


Как анимировать элементы, которые попадают во вьюпорт?

Автор вопроса: Fozzy

тоесть виден первый итем - анимируем его (цифру) виден второй - его

а сейчас происходит анимация сразу всех итемов (а конкретно - чисел в них)

и тд

function loading() {
      $('.data__item').each(function(index, item) {
        const $this = $(item);
        const $value = $this.find('.data__count');
        const value = $this.find('.data__count').data('progress-value');
        $({
          value: 0
        }).animate({
          value,
        }, {
          duration: 1000,
          step: function load_animate(val) {
            $value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1, ")} `);
          },
        });
      });
    }
    
    loading();
.data {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 65px;
}

.data__wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.data__item {
    width: calc(25% - 40px);
    margin: 0 20px;
    margin-bottom: 80px;
}

.data__item:last-child .data__desc {
    max-width: 195px;
}

.data__count {
    font-size: 40px;
    line-height: 1.3;
    color: #68bec4;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 800;
}

.data__desc {
    position: relative;
    max-width: 130px;
    padding-top: 30px;
    margin: 0 auto;
}

.data__desc:after {
    position: absolute;
    content: ' ';
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.data__desc p {
    font-size: 18px;
    line-height: 1.64;
    color: #fff;
    text-align: center;
    font-weight: 800;
}

@media screen and (max-width: 1050px) {

.data__item {
    width: calc(50% - 40px);
}

}

@media screen and (max-width: 780px) {

.data__wrap {
    margin: 0px;
}

.data__item {
    width: 100%;
    margin: 0px;
    margin-bottom: 80px;
}

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
                <div class="data__item">
                    <p class="data__count" data-progress-value="8">8</p>
                    <div class="data__desc">
                    <p>title 1</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="127">127</p>
                    <div class="data__desc">
                        <p>title 2</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200">200</p>
                    <div class="data__desc">
                    <p>title 3</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200000">200,000</p>
                    <div class="data__desc">
                        <p>title 4</p>
                    </div>
                </div>
            </div>


Источник

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

Автор решения: zhurof

Из простых готовых решений можно использовать wow.js

function loading(el) {
  const $this = $(el);
  const $value = $this.find('.data__count');
  const value = $this.find('.data__count').data('progress-value');
  $({
    value: 0
  }).animate({
    value,
  }, {
    duration: 1000,
    step: function load_animate(val) {
      $value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1, ")} `);
    },
  });
}


var WOWcounters = new WOW({
  boxClass: 'data__item',
  animateClass: 'loading',
  mobile: true,
  callback: loading
})
WOWcounters.init();
.data {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 65px;
}

.data__item {
  margin-bottom: 80px;
}

.data__item:last-child .data__desc {
  max-width: 195px;
}

.data__count {
  font-size: 40px;
  line-height: 1.3;
  color: #68bec4;
  text-align: center;
  padding-bottom: 20px;
  font-weight: 800;
}

.data__desc {
  position: relative;
  max-width: 130px;
  padding-top: 30px;
  margin: 0 auto;
}

.data__desc:after {
  position: absolute;
  content: ' ';
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 2px;
  background-color: #fff;
}

.data__desc p {
  font-size: 18px;
  line-height: 1.64;
  color: #fff;
  text-align: center;
  font-weight: 800;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="data__wrap">
  <div class="data__item">
    <p class="data__count" data-progress-value="8">8</p>
    <div class="data__desc">
      <p>title 1</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="127">127</p>
    <div class="data__desc">
      <p>title 2</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="200">200</p>
    <div class="data__desc">
      <p>title 3</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="200000">200,000</p>
    <div class="data__desc">
      <p>title 4</p>
    </div>
  </div>
</div>

Если не ищите простых путей - IntersectionObserver
Я его не сильно помню, но знающие люди если что - поправят. 

function loading(entries, observer) {
  const $this = $(entries[0].target);
  const $value = $this.find('.data__count');
  const value = $this.find('.data__count').data('progress-value');
  if(entries[0].isIntersecting){
    $({
      value: 0
    }).animate({
      value,
    }, {
      duration: 1000,
      step: function load_animate(val) {
        $value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1, ")} `);
      },
      complete: function(){
        observer.disconnect()
      }
    });
  }  
}

$('.data__item').each(function(){
    var sectionObserver = new IntersectionObserver(loading,{threshold: .2,rootMargin: '0px'});
    sectionObserver.observe(this);
})
.data {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 65px;
}

.data__item {
  margin-bottom: 80px;
}

.data__item:last-child .data__desc {
  max-width: 195px;
}

.data__count {
  font-size: 40px;
  line-height: 1.3;
  color: #68bec4;
  text-align: center;
  padding-bottom: 20px;
  font-weight: 800;
}

.data__desc {
  position: relative;
  max-width: 130px;
  padding-top: 30px;
  margin: 0 auto;
}

.data__desc:after {
  position: absolute;
  content: ' ';
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 2px;
  background-color: #fff;
}

.data__desc p {
  font-size: 18px;
  line-height: 1.64;
  color: #fff;
  text-align: center;
  font-weight: 800;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
  <div class="data__item">
    <p class="data__count" data-progress-value="8">8</p>
    <div class="data__desc">
      <p>title 1</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="127">127</p>
    <div class="data__desc">
      <p>title 2</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="200">200</p>
    <div class="data__desc">
      <p>title 3</p>
    </div>
  </div>
  <div class="data__item">
    <p class="data__count" data-progress-value="200000">200,000</p>
    <div class="data__desc">
      <p>title 4</p>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.