Animate AOS Scroll

animate/animate-aos.php

css/animate-aos.css

js/animate-aos.js

script footer

Tutorial Github

01-fade

AOS.init({

Nastavení script

disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function

startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on

initClassName: 'aos-init', // class applied after initialization

animatedClassName: 'aos-animate', // class applied on animation

useClassNames: false, // if true, will add content of `data-aos` as classes on scroll

disableMutationObserver: false, // disables automatic mutations' detections (advanced)

debounceDelay: 50, // the delay on debounce used while resizing window (advanced)

throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

// Nastavení data-aos

offset: 120, // offset (in px) from the original trigger point

delay: 3000, // values from 0 to 3000, with step 50ms

duration: 3000, // values from 0 to 3000, with step 50ms

easing: 'ease', // default easing for AOS animations

once: false, // whether animation should happen only once - while scrolling down

mirror: false, // whether elements should animate out while scrolling past them

anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

02-fade-up

Lorem ipsum dolor sit amet consectetuer Vestibulum neque Sed sem sapien. Urna risus nisl Curabitur a magna Pellentesque dictumst sapien id faucibus. Justo Nam tempus in id pede orci justo netus et fermentum. Nam lorem Nam metus hac nulla id Nulla id nibh lacinia. Et elit iaculis libero convallis sem vestibulum ligula in pede nunc. Porttitor Nunc consequat justo urna et Sed.

Quisque augue dolor Pellentesque enim interdum at velit semper nunc ac. Justo Aliquam suscipit sem urna sem et porttitor laoreet leo tellus. Sociis vel nibh elit eget adipiscing semper accumsan ut Quisque est. Rhoncus eros eget id ac Nam tincidunt Phasellus Nulla semper est. Habitasse nec ut tempor risus sed tincidunt lorem pellentesque Vivamus ante. Pede tristique tortor semper tristique In Sed pede.

Ligula nec et faucibus semper porttitor metus ut nunc mauris sodales. Accumsan ipsum odio laoreet ut vel montes quam et iaculis lorem. Tincidunt Integer faucibus tincidunt orci Sed ipsum enim lorem auctor molestie. Non et eros consequat felis In Curabitur Sed elit turpis nascetur. Metus lorem dolor pretium neque eros pulvinar at In id ipsum. Et condimentum hac tincidunt tempor quis leo feugiat elit ut Proin.

Ut urna consequat et urna Nulla sem tellus sem ligula cursus. Nulla ac quis elit at sed porta Vivamus est odio mollis. Amet est Ut porttitor nibh Nullam auctor sed ac Nulla augue. Sed eget ridiculus accumsan sagittis elit metus orci risus faucibus congue. Lorem lorem semper diam Ut sit convallis vitae.

Tempor lorem nec turpis nulla ultrices tristique fermentum convallis amet tellus. Nullam pellentesque facilisi senectus In rhoncus id tortor condimentum leo sollicitudin. Eget tortor cursus pede leo enim quis tempus ut tempus pretium. Amet Phasellus justo lacus Morbi Pellentesque urna adipiscing Phasellus cursus leo. Purus a pellentesque justo at neque elit velit Aliquam Pellentesque nulla. Egestas dapibus et justo urna eget vel Vivamus vel wisi.

Curabitur a fringilla feugiat interdum condimentum consequat nibh tempus auctor Curabitur. Eros felis libero sem ut Nam nunc justo Nulla odio Aenean. Ac tincidunt interdum fringilla sociis tincidunt consequat nec lacinia condimentum condimentum. Vitae adipiscing tortor Morbi tempor pellentesque et Quisque elit laoreet sapien. Eget Phasellus laoreet elit ligula leo at elit.

In morbi nibh commodo in risus metus et ut vel urna. Metus Sed dui eu Aenean Vestibulum convallis wisi arcu semper at. Cursus mauris mi et id Curabitur urna turpis quis tincidunt lacus. Elit velit neque ligula libero nibh porta cursus Sed quis Nulla. Tristique congue Phasellus lorem congue Sed magnis Vestibulum commodo id lacinia.

03-fade-down

04-fade-left

05-fade-right

06-fade-up-right

07-fade-up-left

08-fade-down-right

Phasellus lacinia Nulla sit ut Pellentesque molestie risus lacinia lacus metus. In facilisis platea est Curabitur metus tortor sem Nam ligula ligula. Eleifend id interdum Aenean ipsum feugiat consectetuer Curabitur Vivamus tempor ac. Mauris nisl ligula est In a est Quisque risus tincidunt habitant. Id consequat vitae elit hendrerit id at feugiat Nam augue nisl. Elit ante at natoque justo.

Animate AOS Scroll

01-fade

02-fade-up

03-fade-down

04-fade-left

05-fade-right

06-fade-up-right

07-fade-up-left

08-fade-down-right

09-fade-down-left

10-flip-up

11-flip-down

flip-left

13-flip-right