Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Эффект 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, ниже пример.

Эффект Lava Lamp

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X