Scroll Animation

Veja como utilizar

Acrescentar um data-anime="scroll-fade" ou data-anime="scroll-down" ou data-anime="scroll-right" ou data-anime="scroll-left" ou data-anime="scroll-up" ou data-anime="scroll-zoomIn" no elemento que vai receber a animação.

Anime Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sunt asperiores cupiditate reprehenderit laboriosam et incidunt minima nisi voluptate ipsum. Rem dolorem sint, molestias facere amet accusantium. Dignissimos, ea at?Asperiores, quis expedita repudiandae, maiores assumenda, neque in dolores necessitatibus blanditiis tenetur quaerat ab officia natus quam voluptatem! Asperiores voluptatibus dolorum beatae debitis eius? Obcaecati aliquam voluptatum totam sit at.Voluptatibus animi reprehenderit eligendi maxime sit doloremque iusto. Facere officiis deserunt odio dignissimos iste eligendi sequi, aperiam consequatur libero, quos impedit.

Anime Left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque voluptas quidem assumenda voluptatum voluptate aperiam quisquam, id illum sed eos cumque tempore pariatur consequatur placeat earum saepe vel esse. Harum.

Anime Down

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem harum libero temporibus voluptas quibusdam ab architecto possimus error tenetur? Quibusdam sapiente cumque accusantium dolorum explicabo quo similique fugit debitis deserunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sunt asperiores cupiditate reprehenderit laboriosam et incidunt minima nisi voluptate ipsum. Rem dolorem sint, molestias facere amet accusantium. Dignissimos, ea at?Asperiores, quis expedita repudiandae, maiores assumenda, neque in dolores necessitatibus blanditiis tenetur quaerat ab officia natus quam voluptatem! Asperiores voluptatibus dolorum beatae debitis eius? Obcaecati aliquam voluptatum totam sit at.Voluptatibus animi reprehenderit eligendi maxime sit doloremque iusto. Facere officiis deserunt odio dignissimos iste eligendi sequi, aperiam consequatur libero, quos impedit. Illum porro nihil beatae eos aut facere, praesentium magnam.Fugit amet fugiat, possimus eveniet soluta necessitatibus dolor ratione a, repellendus deleniti modi praesentium magni at incidunt quia vel blanditiis consequatur molestiae est enim. Nemo voluptates quasi ratione aspernatur doloribus.

Anime Fade

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati ducimus aspernatur et, blanditiis vitae quisquam sapiente, sit at sint quasi ut, libero ea commodi veritatis aliquam numquam quibusdam in non!Nobis tenetur officiis nihil voluptas laborum nam quae in dolor cumque, ut numquam tempore fugiat porro fugit rerum mollitia possimus iste suscipit? Veritatis deserunt voluptatum officiis id voluptatibus quisquam quod.

Anime Zoom-In

Anime Top

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem harum libero temporibus voluptas quibusdam ab architecto possimus error tenetur? Quibusdam sapiente cumque accusantium dolorum explicabo quo similique fugit debitis deserunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla beatae soluta, laudantium distinctio reprehenderit neque.

Temporibus velit laborum, aperiam rem quis, incidunt fugiat architecto, magnam quidem iusto atque aut quia.Saepe necessitatibus modi odit recusandae dolorem, neque impedit atque doloribus iusto rerum sed eveniet, explicabo delectus earum sapiente ab eaque minima. Vel inventore totam reprehenderit quis omnis voluptas itaque officiis?Dignissimos amet fugiat ipsa vel animi neque eveniet laboriosam ut, iste molestiae non impedit quod! Nam nostrum atque provident velit natus exercitationem delectus, sequi similique sit commodi quaerat, est tenetur!Dolorum iste enim deleniti tempora nulla explicabo nisi animi dignissimos, asperiores corrupti. Provident, libero asperiores? Animi maxime ratione hic voluptatibus nam tempora illo, commodi ducimus ea, sequi ipsa. Tempora, voluptas.

HTML Exemplo

 <div class="scroll-block" data-anime="scroll-fade">
   <p>Texto aqui</p>
 </div>