SHARE
TWEET

Untitled

a guest Jan 29th, 2020 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var onload_blocks = document.getElementById("blocks").cloneNode(true); // сохраняем блоки в изначальном виде
  2.  
  3. testRun(); // вызов функции
  4.  
  5.  
  6. function testRun (){
  7.  
  8.     document.getElementById("blocks").innerHTML = onload_blocks.innerHTML;
  9.  
  10.     // 1000 - 1 секунда
  11.     var showInterval = 500, // интервал между появлениями блоков
  12.         hideInterval = 2000, // через сколько пропадать блоку
  13.         totalAnimationTime = 10000, // общее время анимации
  14.         docHeight = window.innerHeight,
  15.         docWidth = window.innerWidth;
  16.        
  17.     checkBlocksCount();
  18.  
  19.     var blocks = document.querySelectorAll("#blocks .block");
  20.     blocks.forEach(function(block) {
  21.         setLettersBorder(block);
  22.         setRandomPosition(block);
  23.     });
  24.  
  25.  
  26.     var blocksShowInterval = setInterval(function(){
  27.        
  28.         showNextBlock();
  29.  
  30.         var interval = setInterval(function() {
  31.             var vblocks = document.querySelectorAll("#blocks .block.visible");
  32.             vblocks[0].classList.remove('visible');
  33.             setTimeout(function() {
  34.                 vblocks[0].remove();
  35.             }, 300);
  36.             clearInterval(interval);
  37.         }, hideInterval);
  38.  
  39.     }, showInterval);
  40.  
  41.  
  42.     setTimeout(function() {
  43.         clearInterval(blocksShowInterval);
  44.     }, totalAnimationTime);
  45.  
  46.  
  47.     function showNextBlock() {
  48.         var blocks = document.querySelectorAll("#blocks .block:not(.visible)");
  49.         var currentBlock = blocks[0];
  50.         currentBlock.classList.add('visible');
  51.     }
  52.  
  53.     function setLettersBorder(block) {
  54.         if (block.classList.contains('border-end') && (/\s/.test(block.innerHTML))) {
  55.             block.innerHTML = block.innerHTML.replace(/\s(.{2})/,'<span class="border">$&</span>');
  56.         } else {
  57.             block.innerHTML = block.innerHTML.replace(/.{2}/,'<span class="border">$&</span>');
  58.         }
  59.     }
  60.  
  61.     function setRandomPosition(block) {
  62.         var divWidth = block.offsetWidth,
  63.             divHeight = block.offsetHeight,
  64.             heightMax = docHeight - divHeight,
  65.             widthMax = docWidth - divWidth;
  66.  
  67.         block.style.left = Math.floor( Math.random() * widthMax) + 'px';
  68.         block.style.top = Math.floor( Math.random() * heightMax) + 'px';
  69.     }
  70.  
  71.     function checkBlocksCount() {
  72.         var needBlocksCount = totalAnimationTime / showInterval;
  73.         var nowBlocksCount = document.querySelectorAll("#blocks .block").length-1;
  74.         if (nowBlocksCount < needBlocksCount) {
  75.            
  76.             var blocks_container = document.getElementById("blocks");
  77.        
  78.             for (var i = 0; i < needBlocksCount-1; i++) {
  79.                 var blocks = document.querySelectorAll("#blocks .block");
  80.                 blocks_container.appendChild(blocks[i].cloneNode(true));
  81.             }
  82.         }
  83.     }
  84.  
  85. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top