Анимации
для заголовков

Модификаторы
Модификация позволяет создать анимацию для заголовков по мере скролла. Добавлено 10 новых вариантов
Описание
Посмотреть пример
Инструкция по подключению
Рамки у заголовков должны стоять у границ текста. Не растягивайте границы на весь экран, если заголовок имеет размер меньше
Важно!!!
Правильно
Неправильно
Добавить код в блок T123 и добавить класс header_top_in на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_top_in.classList.remove...
Анимация с появлением текста снизу
<!--Анимация с появлением снизу-->

<style>
.header_top_in {

    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_top_in .tn-atom {

    opacity: 0;
}
 .header_top_inVisible .tn-atom {
  animation: an_9 1s 1 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.5s;
            
        }

        @keyframes an_9 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(90, 0, 0, 45deg) scale(1.8);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_top_in').removeClass('header_top_in').addClass('header_top_in_false');
//     }
//     else{
//       jQuery('.header_top_in_false').removeClass('header_top_in_false').addClass('header_top_in');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_left_rolling на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_left_rolling.classList.remove...
Анимация с закручиванием текста слева
<!--Анимация слева закручивание-->

<style>
.header_left_rolling {
  opacity: 0;
  transition: all 1.2s ease-out;
}
 .header_left_rollingVisible {
  animation: an_1 1s 1 both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
  animation-delay:0.7s;
        }
        @keyframes an_1{
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 200px, 0px) rotate3d(-100, 50, 0, 90deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_left_rolling').removeClass('header_left_rolling').addClass('header_left_rolling_false');
//     }
//     else{
//       jQuery('.header_left_rolling_false').removeClass('header_left_rolling_false').addClass('header_left_rolling');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_right_rolling на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_right_rolling.classList.remove...
Анимация с закручиванием текста справа
<!--Анимация справа закручивание-->

<style>
.header_right_rolling {
  opacity: 0;
  transition: all 1.2s ease-out;
}
 .header_right_rollingVisible {
  animation: an_2 1s 1 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.7s;
            
        }

        @keyframes an_2 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 200px, 0px) rotate3d(-150, -100, 0, 90deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_right_rolling').removeClass('header_right_rolling').addClass('header_right_rolling_false');
//     }
//     else{
//       jQuery('.header_right_rolling_false').removeClass('header_right_rolling_false').addClass('header_right_rolling');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_hidden_left на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_hidden_left.classList.remove...
Анимация слева вверх из под рамки
<!--Анимация слева вверх из под рамки-->

<style>
.header_hidden_left {
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_hidden_left .tn-atom {
    overflow: hidden;
    opacity: 0;
}
 .header_hidden_leftVisible .tn-atom {
  animation: an_7 1s 1 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.5s;
            
        }

        @keyframes an_7 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(-100, 0, 50, 45deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_hidden_left').removeClass('header_hidden_left').addClass('header_hidden_left_false');
//     }
//     else{
//       jQuery('.header_hidden_left_false').removeClass('header_hidden_left_false').addClass('header_hidden_left');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_hidden_right на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_hidden_right.classList.remove...
Анимация справа вверх из под рамки
<!--Анимация справа вверх из под рамки-->

<style>
.header_hidden_right {
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_hidden_right .tn-atom {
    overflow: hidden;
    opacity: 0;
}
 .header_hidden_rightVisible .tn-atom {
  animation: an_8 1s 1 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.5s;
            
        }

        @keyframes an_8 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(-100, 0, -50, 45deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_hidden_right').removeClass('header_hidden_right').addClass('header_hidden_right_false');
//     }
//     else{
//       jQuery('.header_hidden_right_false').removeClass('header_hidden_right_false').addClass('header_hidden_right');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_hidden_top на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_hidden_top.classList.remove...
Анимация снизу вверх из под рамки
<!--Анимация снизу вверх из под рамки-->

<style>
.header_hidden_top {
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_hidden_top .tn-atom {
    overflow: hidden;
    opacity: 0;
}
 .header_hidden_topVisible .tn-atom {
  animation: an_6 1s 1 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.5s;
            
        }

        @keyframes an_6 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 200px, 0px) rotate3d(-100, 0, 0, 0deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

<script>
    function checkForVisibility() {
  var header_hidden_top = document.querySelectorAll(".header_hidden_top");
  header_hidden_top.forEach(function(header_hidden_top) {
    if (isElementInViewport(header_hidden_top)) {
      header_hidden_top.classList.add("header_hidden_topVisible");
    } else {
    //   header_hidden_top.classList.remove("header_hidden_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('.header_hidden_top').removeClass('header_hidden_top').addClass('header_hidden_top_false');
//     }
//     else{
//       jQuery('.header_center_top_false').removeClass('header_hidden_top_false').addClass('header_hidden_top');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_right_upstart на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_right_upstart.classList.remove...
Анимация выскочка cправа
<!--Анимация выскочка cправа-->

<style>
.header_right_upstart {
  opacity: 0;
  transition: all 1.2s ease-out;
}
 .header_right_upstartVisible {
  animation: an_4 1s 1 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.9s;
            
        }

        @keyframes an_4 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(200, -500, 0, 90deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_right_upstart').removeClass('header_right_upstart').addClass('header_right_upstart_false');
//     }
//     else{
//       jQuery('.header_right_upstart_false').removeClass('header_right_upstart_false').addClass('header_right_upstart');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_left_upstart на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_left_upstart.classList.remove...
Анимация выскочка слева
<!--Анимация выскочка слева-->

<style>
.header_left_upstart {
  opacity: 0;
  transition: all 1.2s ease-out;
}
 .header_left_upstartVisible {
  animation: an_3 1s 1 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.9s;
            
        }

        @keyframes an_3 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(200, 500, 0, 90deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_left_upstart').removeClass('header_left_upstart').addClass('header_left_upstart_false');
//     }
//     else{
//       jQuery('.header_left_upstart_false').removeClass('header_left_upstart_false').addClass('header_left_upstart');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_hidden_bottom на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_hidden_bottom.classList.remove...
Анимация сверху вниз из под рамки
<!--Анимация сверху вниз из под рамки-->

<style>
.header_hidden_bottom {
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_hidden_bottom .tn-atom {
    overflow: hidden;
    opacity: 0;
}
 .header_hidden_bottomVisible .tn-atom {
  animation: an_10 1s 1 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.5s;
            
        }

        @keyframes an_10 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, -200px, 0px) rotate3d(-100, 0, 0, 0deg);
            }
            to{
                opacity: 1;
                transform: perspective(-500px) translate3d(0, 0, 0);
            }
        }
</style>

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

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('.header_hidden_bottom').removeClass('header_hidden_bottom').addClass('header_hidden_bottom_false');
//     }
//     else{
//       jQuery('.header_hidden_bottom_false').removeClass('header_hidden_bottom_false').addClass('header_hidden_bottom');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Добавить код в блок T123 и добавить класс header_center_top на нужный заголовок. Чтобы зациклить анимацию по скроллу нужно убрать комментарий со строки header_center_top.classList.remove...
Анимация снизу вверх
<!--Анимация снизу вверх-->

<style>
.header_center_top {
  opacity: 0;
  transition: all 1.2s ease-out;
}
 .header_center_topVisible {
  animation: an_5 1s 1 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.5s;
            
        }

        @keyframes an_5 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 200px, 0px) rotate3d(-500, 10, 0, 90deg) scale(0.6);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

<script>
    function checkForVisibility() {
  var header_center_top = document.querySelectorAll(".header_center_top");
  header_center_top.forEach(function(header_center_top) {
    if (isElementInViewport(header_center_top)) {
      header_center_top.classList.add("header_center_topVisible");
    } else {
    //   header_center_top.classList.remove("header_center_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('.header_center_top').removeClass('header_center_top').addClass('header_center_top_false');
//     }
//     else{
//       jQuery('.header_center_top_false').removeClass('header_center_top_false').addClass('header_center_top');
//     }
//   }
  
//   classFunction();
//   jQuery(window).resize(classFunction);
//  })
</script>
Made on
Tilda