Пояснения к статье:
- <link>, <script> — HTML теги ссылок. Подключают различные библиотеки и js и css файлы к HTML документу.
- <transform> — CSS свойство. Используется для создания трансформации элемента с плавной анимацией.
Здравствуйте, в этой статье мы расскажем о том как создать жидкие кнопки для вашего сайта. Данный элемент дизайна очень привлекателен, но используется довольно редко.
Кнопки позволяют придать особое значение информации, отделив её от остального контента и позволив взаимодействовать с ним. Поэтому, оформление кнопок — очень важная часть при создании любого сайта.
Принцип работы жидких кнопок заключается в том, что при наведении мыши, курсор отслеживается. Вслед за его движением будет растягиваться наша кнопка. Можно провести часы наблюдая за этим эффектом и экспериментируя.
Данный элемент прекрасно оживит дизайн вашего сайта.
HTML верстка
HTML мы особо не используем, так как всю работу будет осуществлять JavaScript.
Внимание! Перед тем как создавать свою жидкую кнопку или работать с нашими исходниками, убедитесь в том, что ваш браузер не устарел. Создание жидкого эффекта требует использования новых возможностей JavaScript, что может плохо повлиять на отображение кнопки.
Все что нам нужно — подключить скрипты и стили. Для этого открываем наш HTML документ и записываем 3 тега в блоке <head>: 2 тега <script> и <link>
Мы подключили всё необходимое, можно переходить к работе со стилями.
Стилизация. CSS
От CSS нам тоже многого не потребуется. Всё что нужно для правильного отображения — <Canvas>.
Создаем селектор тега под названием <canvas>. В нем задаем абсолютное позиционирование и размещаем его по координатам блока. Для правильного отображения жидкой анимации необходимо прописать свойство <transform>.
Внимание! В нашей статье показано только создание элементов, которое относится непосредственно к эффекту, в данном случае — эффекту растяжения кнопки. Предполагается, что основы и базовые стили вы и так знаете.
Приступаем к созданию скриптов.
JavaScript
А вот здесь придется потрудиться. JavaScript — главная часть нашей работы, поэтому придется написать очень много кода. В основном, мы пропишем функции, которые будут отвечать за правильное отображение и некоторые другие.
Запишите следующий код в ваш JavaScript документ:
Заключение
В итоге, у нас получились отличные кнопки, которые имеют прекрасный визуальный эффект. Если хотите, можете самостоятельно поэкспериментировать с разными визуальными эффектами — изменить цвет, некоторые параметры отображения и т.д.
А если вы желаете более детально ознакомиться с кнопками — скачивайте исходники. Желаем удачи в изучении!