Как анимировать, когда пользователь прокручивает для просмотра - PullRequest
Новая
       35

Как анимировать, когда пользователь прокручивает для просмотра

1 голос
/ 05 ноября 2019

Я начал создавать веб-сайт с использованием ReactJS, я хочу анимировать элементы div в представлении, когда представление прокручивается до.

Я использовал ключевые кадры CSS для добавления анимации, вот так;

.animateMe {
   animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);  
}

@keyframes IntroLeftAnimation {
  0% {
      opacity: 0;
      transform: translateX(-200px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

@keyframes IntroRightAnimation {
  0% {
      opacity: 0;
      transform: translateX(200px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

@keyframes IntroWelcomeImageAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

Файл JS 

import React from 'react'
import '../../layout/intro.css';


const IntroPage = () => {
  return (
    <section className="Intro-Page">
      <div className="animateme">
      </div>
    </section>
  )
}

export default IntroPage

Однако проблема заключается в том, что анимация происходит только тогда, когда страница загружена, то есть, когда элементы тоже. Как я могу сделать так, чтобы они переходили в представление при прокрутке без использования JQuery?

1 Ответ

1 голос
/ 05 ноября 2019

Посмотрите на эту библиотеку https://www.react -reveal.com /

есть много анимаций, которые могут быть запущены при прокрутке

...