Эффект Lava Lamp
Lava Lamp — это плагин для создания интересной анимации, которая придаст изюминки вашему сайту. Во первых это очень красиво и интересно. Вы сможете оформить любые элементы на сайте, к примеру навигацию (меню) на Вашем сайте, галерею фотографий, форму обратной связи и все что захотите. Ниже я покажу как установить Эффект Lava Lamp на сайт, а также покажу несколько прикольных примеров где она будет уместна. Я сам иногда пользуюсь данным плагином, так как иногда задумка дизайнера сделать и красиво и функционально.
И так начнем, чтобы установить Lava Lamp на сайт нам нужно сделать несколько простых шагов.
Установка sly slider
1. Шаг — Для начала Вам нужно перейти на страницу плагина lavalamp.js и скачать его.
2. Шаг — Подключение скрипта и стилей плагина.
<!-- Include the stylesheet -->
<link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />
<!-- Include the lava lamp plugin -->
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>Подключать нужно между тегами <head></head> вашей html страницы.
3. Шаг — вставка самого html кода. В этом примере это простая навигация для сайта, чтобы показать как вообще работает плагин.
<ul id="navlist">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/programs.html">Programs</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>Этот код нужно вставить между тегами <body></body>, в том месте где вы хотите отобразить саму навигацию.
4. Шаг — инициализация слайдера.
$('#navlist').lavalamp({
easing: 'easeOutBack'
});Подключать нужно между тегами <head></head> вашей html страницы, но после кода, который Вы вставляли в шаге №2
5. Шаг — добавить стили.
.lavalamp-object {
background-color:#ccc;
}
Наглядно посмотреть сам слайдер вы можете на примере который я сделал ниже. В примере я добавил несколько стилей для меню чтобы было красивее.
See the Pen effect lavalamp for navigation by Хміль Діма (@dmondma) on CodePen.dark
Ниже приведу несколько других примеров, где еще, и как можно использовать данный плагин.
Эффект Lava Lamp для HTML формы
See the Pen effect lavalamp for navigation by Хміль Діма (@dmondma) on CodePen.dark
Эффект Lava Lamp для галереи
See the Pen LavaLamp effect for gallery by Хміль Діма (@dmondma) on CodePen.dark
Также когда-то делал такой эффект для карусели slick slider, ниже пример.
