Всплывающее, модальное окно на сайт в виде пузырьков с анимацией

Віталий

7 років ago

Всплывающее, модальное окно на сайт в виде пузырьков с анимацией

Доброго времени суток. 🙂

В сегодняшней статье хочу показать вам, как сделать необычное окошко у себя на сайте. Данное окошко будет в виде анимированных пузырей. Это может быть плавающий баннер или сразу три, можно добавить текст или форму. Идея такого плавающего блока в своей необычности, что привлечет внимание посетителей сайта. В общим все зависит от вашей фантазии. пример того что я покажу как сделать, можно посмотреть по ссылке ниже.

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

Для начала нужно добавить саму HTML разметку. Выглядит она довольно просто:

<div id="popup-container" class="anim_bubble">
<span class="close_bubble">Х</span>
    <a href="#1" id="pop_bobble"></a>
    <a href="#2" id="pop_bobble2" class="anim_bubble2"></a>
    <a href="#3" id="pop_bobble3" class="anim_bubble3"></a>
</div>

По ней видно. что у нас есть основной контейнер, который и содержит в себе 3 ссылки и span, что является кнопкой закрытия. Первая ссылка с айди pop_bobble - это самый большой круг, а остальные две те что по меньше.

Дальше добавляем уже сами стили:

#popup-container {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    position: fixed;
    left: -1%;
    z-index: 99;
    bottom: -1%;
    text-align: center;
}
#pop_bobble, #pop_bobble2, #pop_bobble3 {
    margin: 0 auto;
    border-radius: 100%;
    box-shadow: 10px 15px 40px rgba(0, 0, 0, 0.1);
    border: 10px solid #fff;
    background:#6AB12F;
    display:block;
}
#pop_bobble {
    position: relative;
    width: 320px;
    height: 320px;
}
#pop_bobble2 {
    width: 150px;
    height: 150px;
    padding: 0;
    left: -25px;
    z-index: 90;
    bottom: 200px;
    position: absolute;
}
#pop_bobble3 {
    width: 160px;
    height: 160px;
    padding: 0;
    left: 250px;
    bottom: 25px;
	z-index: -90;
    position: absolute;
}

.close_bubble{
    position: absolute;
    float: right;
    top: 5px;
    right: 5px;
    z-index: 100;
    width: 35px;
    height: 35px;
    font-size: 25px;
    line-height:35px;
    text-align: center;
    background:#f30;
    cursor: pointer;
    color: #fff;
    border-radius: 100%;
}
#popup-container a.close:hover {
    background: #6AB12F;
}

.anim_bubble{-webkit-transform-origin: 45% 55%;transform-origin: 45% 55%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: floating-horizontal 10s -1s infinite;animation: floating-horizontal 10s -1s infinite}
.anim_bubble2{-webkit-transform-origin: -60% -40%;transform-origin: -60% -40%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: floating-horizontal2 8s -1s infinite;animation: floating-horizontal2 8s -1s infinite}
.anim_bubble3{-webkit-transform-origin: -60% -40%;transform-origin: -60% -40%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: floating-horizontal3 9s -1s infinite;animation: floating-horizontal3 9s -1s infinite}

@keyframes floating-horizontal {
0%, 100% {-webkit-transform:translate(-5%, -5%);transform:translate(-5%, -5%)}
25% {-webkit-transform:translate(5%, 5%);transform:translate(5%, 5%)}
50% {-webkit-transform:translate(5%, -5%);transform:translate(5%, -5%)}
75% {-webkit-transform:translate(-5%, 5%);transform:translate(-5%, 5%)}
}

@keyframes floating-horizontal2 {
0%, 100% {-webkit-transform:translate(10%, 10%);transform:translate(10%, 10%)}
25% {-webkit-transform:translate(-25%, -25%);transform:translate(-25%, -25%)}
50% {-webkit-transform:translate(-10%, 15%);transform:translate(-10%, 15%)}
75% {-webkit-transform:translate(25%, -25%);transform:translate(25%, -25%)}}

@keyframes floating-horizontal3 {
0%, 100% {-webkit-transform:translate(-20%, 10%);transform:translate(-20%, 10%)}
20% {-webkit-transform:translate(15%, -20%);transform:translate(15%, -20%)}
40% {-webkit-transform:translate(20%, 10%);transform:translate(20%, 10%)}
80% {-webkit-transform:translate(-15%, 15%);transform:translate(-15%, 15%)}
}

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

На этом все, спасибо за внимание. 🙂

Exit mobile version