Анимация текста
с блюром

Модификаторы

Модификация позволяет создать появление текста с эффектом блюра по мере скролла

Описание

Инструкция по подключению

С помощью блока T123 подключаем код и на нужный текст добавляем класс text_blur_top

Анимация текста вверх из блюра

<!--Анимация текста вверх из блюра-->

<script>
     $('.text_blur_top .tn-atom').addClass('text_blur_top_animation');
</script>

<script>
for(const node of document.getElementsByClassName('text_blur_top_animation')) {
  ultimateLineWrapperMachine3000(node);
}

function ultimateLineWrapperMachine3000( node ) {
  const paragraphContent = node.innerHTML.replace(/^\s+|\s+$/gm, ''); 
  const paragrapthWrappedWords = paragraphContent.replace(/(\S+)/g, '<span class="word_text_blur_top">$1</span>');

  node.innerHTML = paragrapthWrappedWords;

  const wrappedWords = document.getElementsByClassName('word_text_blur_top');
  const arrayOfWordNodes = Object.keys(wrappedWords).map(k => wrappedWords[k]);
  let currLineTop = 0;
  let finalHTML = '';

  arrayOfWordNodes.forEach(( node, index ) => {
    const nodeTop = node.offsetTop;

    finalHTML += ''
    + ( index !== 0 && currLineTop !== nodeTop ? '</span>' : ' ' )
    + ( index === 0 || currLineTop !== nodeTop ? '<span class="line_text_blur_top">' : '' )
    + ( index === 0 || currLineTop !== nodeTop ? '<span class="line_inside_text_blur_top">' : '' )
    + node.innerHTML;

    currLineTop = nodeTop;
  });

  node.innerHTML = finalHTML.trim();
}
</script>


<style>
.text_blur_top {
    overflow: visible;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.text_blur_top .tn-atom span {
    overflow: visible;
    opacity: 0;
}
 .text_blur_topVisible .tn-atom span {
  animation: an_text_blur_top 1.3s 1s both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
            animation-delay:0.8s;
            
        }

        @keyframes an_text_blur_top {
            from{
                filter: blur(20px);
                opacity: 0;
                transform: perspective(500px) translate3d(0px, 100px, 0px) rotate3d(-100, 0, 0, 0deg);
            }
            to{
                filter: blur(0px);
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

<script>
    function checkForVisibility() {
  var text_blur_top = document.querySelectorAll(".text_blur_top");
  text_blur_top.forEach(function(text_blur_top) {
    if (isElementInViewport(text_blur_top)) {
      text_blur_top.classList.add("text_blur_topVisible");
    } else {
    //   text_blur_top.classList.remove("text_blur_topVisible");
    }
  });
}

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= -500 &&
    rect.left >= -500 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

if (window.addEventListener) {
  addEventListener("DOMContentLoaded", checkForVisibility, false);
  addEventListener("load", checkForVisibility, false);
  addEventListener("scroll", checkForVisibility, false);
}
</script>

<!--Отрубаем на телефонах-->
<script>
//     jQuery(document).ready(function(){
//   function classFunction(){
//     if(jQuery('body').width()<376){ jQuery('.text_blur_top').removeClass('text_blur_top').addClass('text_blur_top_false');
//     }
//     else{
//       jQuery('.text_blur_top_false').removeClass('text_blur_top_false').addClass('text_blur_top');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>

<style>
    .text_blur_top .tn-atom span {
    display: grid;
}
</style>

С помощью блока T123 подключаем код и на нужный текст добавляем класс text_blur

Анимация текста статично из блюра

<!--Анимация текста статично из блюра-->

<script>
     $('.text_blur .tn-atom').addClass('text_blur_animation');
</script>

<script>
for(const node of document.getElementsByClassName('text_blur_animation')) {
  ultimateLineWrapperMachine3000(node);
}

function ultimateLineWrapperMachine3000( node ) {
  const paragraphContent = node.innerHTML.replace(/^\s+|\s+$/gm, ''); 
  const paragrapthWrappedWords = paragraphContent.replace(/(\S+)/g, '<span class="word_text_blur">$1</span>'); 

  node.innerHTML = paragrapthWrappedWords;

  const wrappedWords = document.getElementsByClassName('word_text_blur');
  const arrayOfWordNodes = Object.keys(wrappedWords).map(k => wrappedWords[k]);
  let currLineTop = 0;
  let finalHTML = '';

  arrayOfWordNodes.forEach(( node, index ) => {
    const nodeTop = node.offsetTop;

    finalHTML += ''
    + ( index !== 0 && currLineTop !== nodeTop ? '</span>' : ' ' )
    + ( index === 0 || currLineTop !== nodeTop ? '<span class="line_text_blur">' : '' )
    + ( index === 0 || currLineTop !== nodeTop ? '<span class="line_inside_text_blur">' : '' )
    + node.innerHTML;

    currLineTop = nodeTop;
  });

  node.innerHTML = finalHTML.trim();
}
</script>



<style>
.text_blur {
    overflow: visible;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.text_blur .tn-atom span {
    overflow: visible;
    opacity: 0;
}
 .text_blurVisible .tn-atom span {
  animation: an_text_blur 1.3s 1s both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
            animation-delay:0.8s;
            
        }

        @keyframes an_text_blur {
            from{
                filter: blur(20px);
                opacity: 0;
                transform: perspective(500px) translate3d(0px, 0px, 0px) rotate3d(-100, 0, 0, 0deg);
            }
            to{
                filter: blur(0px);
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

<script>
    function checkForVisibility() {
  var text_blur = document.querySelectorAll(".text_blur");
  text_blur.forEach(function(text_blur) {
    if (isElementInViewport(text_blur)) {
      text_blur.classList.add("text_blurVisible");
    } else {
    //   text_blur.classList.remove("text_blurVisible");
    }
  });
}

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= -500 &&
    rect.left >= -500 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

if (window.addEventListener) {
  addEventListener("DOMContentLoaded", checkForVisibility, false);
  addEventListener("load", checkForVisibility, false);
  addEventListener("scroll", checkForVisibility, false);
}
</script>

<!--Отрубаем на телефонах-->
<script>
//     jQuery(document).ready(function(){
//   function classFunction(){
//     if(jQuery('body').width()<376){ jQuery('.text_blur').removeClass('text_blur').addClass('text_blur_false');
//     }
//     else{
//       jQuery('.text_blur_false').removeClass('text_blur_false').addClass('text_blur');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>

<style>
    .text_blur .tn-atom span {
    display: grid;
}
</style>

Анимация текстас блюром

Анимация текста
с блюром