Для последней стабильной версии (v2) перейдите сюда.
Чтобы лучше понять, как это на самом деле работает, я советую вам прочитать мою статью о CSS-трюках.
Добавьте стили в <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Добавьте скрипт прямо перед закрытием тега </body> и инициализируйте AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > Установите пакет aos :
yarn add aos@nextnpm install --save aos@nextИмпортируйте скрипт, стили и инициализируйте AOS:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Чтобы это работало, вам необходимо убедиться, что в вашем процессе сборки настроен загрузчик стилей и все это правильно объединено. Однако если вы используете Parcel, он будет работать «из коробки», как указано.
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
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)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // 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
} ) ;data-aos : < div data-aos =" fade-in " > </ div > И настройте поведение, используя атрибуты data-aos-* :
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >См. полный список всех анимаций, замедлений и мест размещения привязок.
Существует также настройка, которую можно использовать только для каждого элемента:
data-aos-anchor — элемент, смещение которого будет использоваться для запуска анимации вместо фактического.Примеры:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >Таким образом, вы можете запускать анимацию одного элемента, одновременно прокручивая его до другого, что полезно при анимации фиксированных элементов.
Объект AOS представлен как глобальная переменная, на данный момент доступны три метода:
init — инициализировать AOSrefresh — пересчитать все смещения и позиции элементов (вызывается при изменении размера окна)refreshHard — повторно инициализировать массив с элементами AOS и запустить refresh (вызывается при изменениях DOM, связанных с элементами aos )Пример выполнения:
AOS . refresh ( ) ; По умолчанию AOS отслеживает изменения DOM, и если какие-либо новые элементы загружаются асинхронно или когда что-то удаляется из DOM, он автоматически вызывает refreshHard . В браузерах, которые не поддерживают MutationObserver , например IE, вам может потребоваться самостоятельно вызвать AOS.refreshHard() .
Метод refresh вызывается при изменении размера окна и т. д., поскольку он не требует создания нового хранилища с элементами AOS и должен быть максимально легким.
AOS отправляет в документ два события: aos:in и aos:out всякий раз, когда какой-либо элемент анимируется или выходит из него, так что вы можете делать дополнительные вещи в JS:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; Вы также можете указать AOS запускать пользовательское событие для определенного элемента, установив атрибут data-aos-id :
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Затем вы сможете прослушивать два пользовательских события:
aos:in:super-duperaos:out:super-duperИногда встроенной анимации недостаточно. Допустим, вам нужно, чтобы в одном окне была разная анимация в зависимости от разрешения. Вот как это можно сделать:
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}Затем используйте его в HTML:
< div data-aos =" new-animation " > </ div >Элемент будет анимировать непрозрачность только на мобильных устройствах, но начиная с ширины 768 пикселей он также будет скользить справа налево.
Как и в случае с анимацией, вы можете добавлять собственные замедления:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}Расстояние по умолчанию для встроенной анимации составляет 100 пикселей. Однако, пока вы используете SCSS, вы можете его переопределить:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; Однако вам необходимо заранее настроить процесс сборки, чтобы он мог импортировать стили из node_modules .
Используйте animatedClassName , чтобы изменить поведение AOS по умолчанию, чтобы применять имена классов, помещенные внутри data-aos при прокрутке.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; Вышеупомянутый элемент получит два класса: animated и fadeInUp . Используя различные комбинации трех вышеуказанных настроек, вы сможете интегрировать любую внешнюю библиотеку анимации CSS.
Однако внешние библиотеки не слишком заботятся о состоянии анимации до фактической анимации. Поэтому, если вы хотите, чтобы эти элементы не были видны перед прокруткой, вам может потребоваться добавить аналогичные стили:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayДлительность и задержка принимают значения от 50 до 3000 с шагом 50 мс, это потому, что они обрабатываются css, и чтобы не делать css длиннее, чем он уже есть, я реализовал только подмножество. Я считаю, что они должны охватывать большинство случаев.
Если нет, вы можете написать простой CSS, который добавит еще одну продолжительность, например:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Этот код добавит длительность 4000 мс, которую вы сможете установить для элементов AOS или установить как глобальную длительность при инициализации сценария AOS. Обратите внимание, что двойной [data-aos][data-aos] — это не ошибка, это трюк, сделать отдельные настройки более важными, чем глобальные, без необходимости писать там некрасивый "!important" :)
Пример использования:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Затухание анимации:
Перевернуть анимацию:
Слайд-анимация:
Увеличение анимации:
Если вы обнаружили ошибку, у вас есть вопрос или идея, пожалуйста, ознакомьтесь с руководством по участию в AOS и не стесняйтесь создавать новые проблемы.
