<!--Анимация текста вверх из блюра-->
<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>
<!--Анимация текста статично из блюра-->
<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>