Плавни анимации за превъртане на страници с CSS3 и jQuery - Indigo Blog
Днес ще ви покажем един от многото начини да разкрасите сайта си с помощта на CSS3 и jQuery. Такава плавна анимация на елементи при превъртане на страницата може да се намери в някои мобилни приложения, в новинарски емисии и дори на сайтове за визитки. Ако включите фантазията, можете да намерите много полезни опции за прилагане на този ефект - за снимки, списък с продукти и т.н. Да започваме!
Забележка
Нека започнем със свързването на необходимите библиотеки - основния файл и плъгина jQuery.appear, с който реализираме външния вид на елемент, когато влезе във видимата област на браузъра. Файлът jquery.appear.js се намира в папката на урока.
След това можете да започнете да пишете код. За да може даден обект (да го наречем feed ) да задейства CSS анимация, когато се появи на екрана, трябва динамично да добавите име на клас (да го наречем появил се ) към него, когато влезе в обхвата:
Във файла style.css ние определяме външния вид и първоначалното състояние на обекта, като му задаваме определени настройки за трансформация и го скриваме със свойство за непрозрачност нула:
И когато обектът навлезе в зоната на видимост ( появи ), той ще се появи плавно, приемайки следните стойности на трансформация и непрозрачност:
Можете да украсите сайта си с подобни плавни анимации за превъртане на страници с CSS3 и jQuery. Надяваме се, че ще намерите този прост урок за полезен в работата си. Желаем ви творчески успех!