ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Текстовый эффект с пузырями на CSS + JS

Текстовый эффект с пузырями на CSS + JS

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

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

При проверки все на работоспособность, этот эффект, так выглядит:

Как сделать мыльные пузыри с логотипа сайта

Для того, чтоб все работало корректно, то подключаем библиотеку:

Код

HTML

Код

<div class="vozdukom-demuladas">
<div class="napolnes-nayaladan">
<div class="nogosloynaysa">
<h1>ZorNet.Ru</h1>
</div>
</div>
</div>

CSS

Код

.vozdukom-demuladas {
display: table;
width: 100%;
height: 100%;
}

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

body {
background-color: #3498db;
}

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

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

.kosnada-plonkam {
position: absolute;
border-radius: 100%;
bottom: 10px;
background-color: #fdfdfd;
z-index: 1;
}

Код

jQuery(document).ready(function($){
  var bArray = [];
  var sArray = [4,6,8,10];
  for (var i = 0; i < $('.nogosloynaysa').width(); i++) {
  bArray.push(i);
  }

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

  setInterval(function(){
  var size = randomValue(sArray);
  $('.nogosloynaysa').append('<div class="kosnada-plonkam" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');

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

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

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

Демонстрация

26 Января 2020 Загрузок: 2 Просмотров: 1446 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0