仅当鼠标向下滚动到该特定部分时，才可以开始对此文本效果添加动画效果吗？

时间：2019-03-19 05:24:51

标签： javascript html css

这是用HTML，CSS和JS制作的打字文本效果。 这是我的代码：

(function($) {
  var s,
    spanizeLetters = {
      settings: {
        letters: $('.js-spanize'),
      },
      init: function() {
        s = this.settings;
        this.bindEvents();
      },
      bindEvents: function() {
        s.letters.html(function(i, el) {
          //spanizeLetters.joinChars();
          var spanizer = $.trim(el).split("");
          return '<span>' + spanizer.join('</span><span>') + '</span>';
        });
      },
    };
  spanizeLetters.init();
})(jQuery);
body {
  margin: 0;
  width: 100%;
  font-family: "Cutive Mono", monospace;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sep {
  border: 0;
  width: 3em;
  height: 1px;
  margin: 1em 0;
  background-color: rgba(255, 255, 255, 0.4);
}

.mast {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  background-color: #111;
}

.mast:after {
  z-index: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(17, 17, 17, 0.9);
}

.mast>header {
  z-index: 2;
  position: relative;
}

.mast__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: 50%;
}

.mast__header {
  padding: 5%;
}

.mast__title {
  font-family: "Cutive Mono", monospace;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.mast__title span {
  -webkit-animation: letter-glow 0.7s 0s ease both;
  animation: letter-glow 0.7s 0s ease both;
}

.mast__title span:nth-child(1) {
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.mast__title span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.mast__title span:nth-child(3) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.mast__title span:nth-child(4) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.mast__title span:nth-child(5) {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.mast__text {
  font-family: "Cutive Mono", monospace;
  font-size: 1em;
  margin: 0 0 0.5em;
  line-height: 1.5;
  white-space: pre;
}

.mast__text span {
  -webkit-animation: letter-glow 0.7s 0s ease both;
  animation: letter-glow 0.7s 0s ease both;
}

.mast__text span:nth-child(1) {
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.mast__text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.mast__text span:nth-child(3) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.mast__text span:nth-child(4) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.mast__text span:nth-child(5) {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.mast__text span:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.mast__text span:nth-child(7) {
  -webkit-animation-delay: 0.35s;
  animation-delay: 0.35s;
}

.mast__text span:nth-child(8) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.mast__text span:nth-child(9) {
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

.mast__text span:nth-child(10) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.mast__text span:nth-child(11) {
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}

.mast__text span:nth-child(12) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.mast__text span:nth-child(13) {
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}

.mast__text span:nth-child(14) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.mast__text span:nth-child(15) {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.mast__text span:nth-child(16) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}

@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
<main>
  <section class="mast">
    <figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=893)"></figure>
    <header class="mast__header">
      <h1 class="mast__title js-spanize">Sample</h1>
      <hr class="sep" />
      <p class="mast__text js-spanize">
        This is a sample</p>

    </header>
  </section>
</main>

我希望动画仅在鼠标滚动到该特定部分时才开始。问题在于动画在页面加载后立即开始，通常在有人滚动到该部分时结束。我希望字母仅在有人滚动到页面的该特定部分时才开始自行输入。因为我是一个初学者，所以我对此并不了解。有人可以帮我吗？

1 个答案:

答案 0 :(得分：1)

您确实使用了Intersection Observer API。这是本机JavaScript的一项功能，可用于当一个（或多个）元素与视口相交时添加一个class。这是代码中带有注释的示例。向下滚动以查看实际效果。

function onEntry(entry) {
  entry.forEach(el => {
    if (el.isIntersecting) {
      el.target.classList.add("start");
    }
  });
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

// All elements with "js-spanize" class
let elements = document.querySelectorAll(".js-spanize");

for (let elm of elements) {
  observer.observe(elm);
}
@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}

.js-spanize.start {
  animation: letter-glow 0.7s 0s infinite alternate;
}
<main>
  <section class="mast">
    <figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=893)"></figure>
    <header class="mast__header">
      <h1 class="mast__title js-spanize">Sample</h1>
      <hr class="sep" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum at assumenda, laudantium ratione rem animi consectetur aspernatur corrupti quis eos officiis libero nobis, beatae rerum inventore nisi repudiandae id dolorem!</span><span>Natus maxime dolores recusandae iusto omnis est eos deleniti odit nam officiis reiciendis tempore necessitatibus provident explicabo rerum nulla totam dolor non, a dolorem accusantium! Perspiciatis nostrum reiciendis nihil aperiam.</span></p>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed accusamus cupiditate, velit explicabo ut consequuntur nisi, id obcaecati temporibus magni autem? Nemo enim id quia ea beatae odio aut quo!</span><span>Aperiam dignissimos labore officiis incidunt nobis debitis molestiae quas, cupiditate harum eligendi vel quis ipsam amet in, culpa quod consequatur ipsum ex maxime! Aut sunt dolore odit exercitationem voluptatum rerum!</span></p>
      <p class="js-spanize">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nostrum, voluptatem fugit repellendus in corrupti provident eum iure placeat dignissimos, rerum quisquam quibusdam beatae a? Voluptatem dignissimos ad temporibus nisi!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nostrum, voluptatem fugit repellendus in corrupti provident eum iure placeat dignissimos, rerum quisquam quibusdam beatae a? Voluptatem dignissimos ad temporibus nisi!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nostrum, voluptatem fugit repellendus in corrupti provident eum iure placeat dignissimos, rerum quisquam quibusdam beatae a? Voluptatem dignissimos ad temporibus nisi!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nostrum, voluptatem fugit repellendus in corrupti provident eum iure placeat dignissimos, rerum quisquam quibusdam beatae a? Voluptatem dignissimos ad temporibus nisi!</p>      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>      assumenda, asperiores inventore architecto et? Provident!</p>            
      <p class="mast__text js-spanize">
        This is a sample</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor molestias cum quo aperiam praesentium, distinctio, ducimus repellendus atque odio pariatur! Optio totam repudiandae assumenda, asperiores inventore architecto et? Provident!</p>      
    </header>
  </section>
</main>

相关问题
最新问题