• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Всплывающие пузырьки CSS от текста HTML (Добавление эффектов в текст виде пузырьков на HTML + CSS)
Всплывающие пузырьки CSS от текста HTML
Kosten
Дата: Понедельник, 2019-10-07, 17:35 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


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

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



HTML

Код
<div class="center-outer">
<div class="center-inner">

<div class="bubbles">
<h1>Bubbling Header</h1>
</div>

</div>
</div>

CSS

Код
html, body {
width: 100%;
height: 100%;
margin: 0;
}

.center-outer {
display: table;
width: 100%;
height: 100%;
}

.center-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}

/* Essential CSS - Makes the effect work */

body {
background-color: #3498db;
}

.bubbles {
display: inline-block;
font-family: arial;
position: relative;
}

.bubbles h1 {
position: relative;
margin: 1em 0 0;
font-family: 'Luckiest Guy', cursive;
color: #fff;
z-index: 2;
}

.individual-bubble {
position: absolute;
border-radius: 100%;
bottom: 10px;
background-color: #fff;
z-index: 1;
}

JS

Код
jQuery(document).ready(function($){

    var bArray = [];
    var sArray = [4,6,8,10];

    // Push the header width values to bArray
    for (var i = 0; i < $('.bubbles').width(); i++) {
        bArray.push(i);
    }

    function randomValue(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }

    setInterval(function(){

        var size = randomValue(sArray);

        $('.bubbles').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');

        $('.individual-bubble').animate({
            'bottom': '100%',
            'opacity' : '-=0.7'
        }, 3000, function(){
            $(this).remove()
        }
        );

    }, 350);

});



See the Pen
Пузырящийся текстовый эффект
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 7050657.png(18.8 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-10-07, 17:39 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Также есть аналогичный материал, но совершенно по другой анимации, как всплывающие пузырьки на HTML и CSS, в оригинальным эффектом.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Всплывающие пузырьки CSS от текста HTML (Добавление эффектов в текст виде пузырьков на HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: