Создание анимации волны с помощью CSS

Аннотация

Маринчук Александр Сергеевич. Создание анимации волны с помощью CSS. Внешний вид сайта многое говорит о продукте, который он рекламирует и сегодня очень важно оставаться современным в данном плане. Привлечение клиентов важный аспект в реализации любого продукта, ведь от того насколько привлекательной будет выглядеть реклама продукта зависит количество потенциальных клиентов, а соответственно и прибыль. В данной статье рассмотрено создание анимации волны с помощью CSS.

Ключевые слова

CSS, анимация, волна, html, дизайн

1. Введение

1.1 Актуальность исследования

Внешний вид сайта многое говорит о продукте, который он рекламирует и сегодня очень важно оставаться современным в данном плане. Привлечение клиентов важный аспект в реализации любого продукта, ведь от того насколько привлекательной будет выглядеть реклама продукта зависит количество потенциальных клиентов, а соответственно и прибыль. Использование нестандартных решений при дизайне страницы какого-либо продукта верный путь для увеличения дохода от его реализации. Шаблонными дизайнами на сегодняшний день трудного кого-то удивить, поэтому стоит знать и уметь применить на практике интересные дизайнерские решения, которые сделают сайт привлекательнее и визуально красивее. В данной статье рассмотрено создание анимации волны с помощью CSS.

1.2 Обзор исследований

В статье Т. А. Петровской и других рассматривается задача адаптивной верстки web-страниц при помощи CSS-фреймворка Bootstrap 3, а также анализируются достоинства и недостатки данного решения [1]. Ж. Б. Эрдынеев и А. А. Тонхоноева рассмотрели способы создания эффектов оформления текста с помощью CSS [2]. В статье М. Е. Кочитова рассматривается свойство Transition в CSS, которое позволяет менять состояния элементов с помощью анимации, например перемещать плавно элементы. Также приведен пример с перемещением изображения с помощью анимации и рассмотрены все функции и параметры свойства Transition [3]. Разработал библиотеку визуальных элементов для веб-анимации в своем исследовании Е. Н. Яковлев [4]. В работе И. Н. Лобач рассмотрены виды использования анимационных эффектов в дизайне пользовательских интерфейсов веб-сайтов. Даны ключевые определения понятий «Анимация», «Интерактивная анимация». Дано краткое представление о технологиях использования анимации в веб-дизайне [5]. В своей работе M. J. Collins показывает процесс создания анимации без использования JavaScript. Для анимации предлагается использовать чистый CSS [6]. В исследовании P. Garaizar и других проанализирована декларативная анимация на основе CSS и сделаны выводы насчет производительности при использовании html 5 [7].

1.3 Цель исследования

Целью данной статьи является создание анимации волны с помощью CSS.

2. Методы исследования

В данной статье будет рассмотрен процесс создания анимации волны с помощью языков CSS и html [8-9].

Для начала потребуется пару картинок, которые будут составлять будущую волну (Рис. 1).

Добавим волну на готовую страницу, чтобы визуально посмотреть как это будет выглядеть. Но перед этим создаем документ с расширение .css и напишем следующий код (Рис. 2).

Как видно из кода выше волна состоит из двух картинок, который будут накатываться друг на друга, создавая эффект настоящей волны. Для классов необходимо прописать ширину, высоту, расположение и путь к картинке. Обе части волны будут зациклены на движение влево, но с разным интервалом времени.

Далее в теге Head подключаем созданный ранее css файл (Рис. 3).

На готовую страницу нужно добавить следующий html код для отображения волны (Рис. 4).

Готовый вид страницы с волной выглядит следующим образом (Рис. 5).

3. Выводы

Таким образом, была создана анимация волны с помощью CSS, а также проведена ее интеграция на готовую страницу. Применение подобных эффектов при дизайне страницы какого-либо продукта поможет привлечь больше клиентов и принести дополнительную прибыль.

Библиографический список

1. Петровская Т. А., Левшин Д. А., Громов А. Ю. Адаптивная верстка web-страниц //Методы и средства обработки и хранения информации. 2018. С. 43-46.
   
2. Эрдынеев Ж. Б., Тонхоноева А. А. Эффекты оформления текста с помощью CSS //Информационные системы и технологии в образовании, науке и бизнесе. 2019. С. 107-112.
   
3. Кочитов М. Е. Применение анимации к элементам на веб-странице с помощью свойства Transition в CSS //Постулат. 2019. №. 8.
   
4. Яковлев Е. Н. Разработка библиотеки визуальных элементов для веб-анимации //Актуальные научные исследования в современном мире. 2018. № 5-1 (37). С. 135-137.
   
5. Лобач И. Н. Использование анимационных эффектов в дизайне пользовательских интерфейсов веб-сайтов // В сборнике: Альманах научных работ молодых ученых университета ИТМО XLVII научная и учебно-методическая конференция Университета ИТМО по тематикам: экономика; менеджмент, инноватика. 2018. С. 194-196.
   
6. Collins M. J. Animation and Transforms //Pro HTML5 with CSS, JavaScript, and Multimedia. Apress, Berkeley, CA, 2017. С. 287-303.
   
7. Garaizar P., Vadillo M. A., Lopez-de-Ipina D. Presentation accuracy of the web revisited: Animation methods in the HTML5 era //PLoS One. 2014. Т. 9. №. 10. С. e109812.
   
8. CSS URL: https://ru.wikipedia.org/wiki/CSS
   
9. HTML URL: https://ru.wikipedia.org/wiki/HTML