Question

我在元素进入视图时尝试实现事件，并制作一些css动画。当用户滚动到此元素时，圆圈和文本应该增长。我使用jQuery，如何使用纯js。还应该在span中更改font-size。如果我将对几个元素使用相同的函数如何使其全局化。我需要专业的建议才能正确实施。谢谢。

codepen

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et, nisi culpa enim distinctio neque libero minus nam. Sint tenetur eaque quidem ducimus ipsum, nostrum. In asperiores minus quisquam, nihil sunt ab praesentium alias neque error eveniet laudantium assumenda ex dolore fuga voluptas ipsa id quos hic ea qui corrupti architecto quo incidunt. Tempora quaerat quae officia cum aspernatur aliquid reiciendis cupiditate obcaecati nisi delectus sapiente quis laboriosam excepturi, ad, eius quia numquam culpa id perspiciatis doloribus tempore. Quo est, quidem quasi illo eius quas dolorum, debitis perferendis possimus temporibus accusamus error, earum quis dolorem maiores, distinctio necessitatibus labore numquam. Ipsam accusamus molestias atque voluptatibus nemo ipsa, accusantium neque asperiores ex cupiditate dolorem similique quas maiores, illum praesentium architecto soluta aliquid est voluptate vitae deleniti! Perferendis esse facere, in. Tenetur totam expedita, reiciendis quibusdam nisi iusto, aperiam. Obcaecati rem nobis commodi, esse temporibus vero, veritatis fuga ad repudiandae, officia inventore maxime possimus quos ab reiciendis illum quia voluptates dignissimos id soluta dolores. Odio facere libero quidem perspiciatis et ut! Delectus, at error officia! Ducimus eum, consequatur voluptate harum iusto, perferendis totam, repellendus nesciunt unde soluta cumque maxime rem aspernatur recusandae enim minima modi possimus, explicabo quos consequuntur commodi eligendi sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et, nisi culpa enim distinctio neque libero minus nam. Sint tenetur eaque quidem ducimus ipsum, nostrum. In asperiores minus quisquam, nihil sunt ab praesentium alias neque error eveniet laudantium assumenda ex dolore fuga voluptas ipsa id quos hic ea qui corrupti architecto quo incidunt. Tempora quaerat quae officia cum aspernatur aliquid reiciendis cupiditate obcaecati nisi delectus sapiente quis laboriosam excepturi, ad, eius quia numquam culpa id perspiciatis doloribus tempore. Quo est, quidem quasi illo eius quas dolorum, debitis perferendis possimus temporibus accusamus error, earum quis dolorem maiores, distinctio necessitatibus labore numquam. Ipsam accusamus molestias atque voluptatibus nemo ipsa, accusantium neque asperiores ex cupiditate dolorem similique quas maiores, illum praesentium architecto soluta aliquid est voluptate vitae deleniti! Perferendis esse facere, in. Tenetur totam expedita, reiciendis quibusdam nisi iusto, aperiam. Obcaecati rem nobis commodi, esse temporibus vero, veritatis fuga ad repudiandae, officia inventore maxime possimus quos ab reiciendis illum quia voluptates dignissimos id soluta dolores. Odio facere libero quidem perspiciatis et ut! Delectus, at error officia! Ducimus eum, consequatur voluptate harum iusto, perferendis totam, repellendus nesciunt unde soluta cumque maxime rem aspernatur recusandae enim minima modi possimus, explicabo quos consequuntur commodi eligendi sunt.</div>
 <div class="flex">
  <div class="item">
  <span>9</span>
 </div>
 <p>Text here</p>

 <div class="item">
  <span>8</span>
 </div>
 <p>Text here</p>

 <div class="item">
  <span>1</span>
 </div>
 <p>Text here</p>

<div class="item">
 <span>10</span>
</div>
<p>Text here</p>

<script>

// Returns true if the specified element has been scrolled into the viewport
function isElementInViewport(elem) {
  var $elem = $(elem);

// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();

// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();

return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
 var $elem = $('.flex .item');

// If the animation has already been started
if ($elem.hasClass('grow-js')) return;

if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass('grow-js');
  }
}

// Capture scroll events
  $(window).scroll(function(){
    checkAnimation();
});
</script>

Answer 1

这里的解决方案codepen

.flex {
 display: flex;
 align-items: center;
  position: relative;

.item {
position: relative;
width: 5rem;
height: 5rem;
background: yellow;
border-radius:50%;
transform: scale(0);
&.grow-js{
transform: scale(1);
  -webkit-animation: eighty 2s ease-out forwards;
   -moz-animation: eighty 2s ease-out forwards;
    -ms-animation: eighty 2s ease-out forwards;
     -o-animation: eighty 2s ease-out forwards;
        animation: eighty 2s ease-out forwards;
 }

 span  {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size:5px;
  transform: translate(-50%, -50%);
  }
}
 p  {
  margin-left: 10px;
 }
}

@-moz-keyframes eighty {
  0% {
    transform: scale(0);
 }

100% {
    transform: scale(1);

 }
}

@-webkit-keyframes eighty {
  0% {
     transform: scale(0);
 }

 100% {
    transform: scale(1);
 }
 }

元素进入视图动画添加类，动画

1 个答案: