Эффект плавного появления текста

Подключение кода

Скопировать шаблон

Модификатор для добавления анимации с плавным появлением текста

Описание

Смотреть пример

id номер:

67562845

Шаблон страницы

Номер скопирован!

Скопировать номер

Добавляем текстовые элементы

В данной модификации есть 2 варианта анимации текста:

Для эффекта плавного появления, задаем класс mast__title

Для эффекта с переливом, задаем класс sonneto-overflow

Создаем блок T123 и копируем в него код

2 шаг

Код скопирован!

Скопировать код (появление)

Код скопирован!

Скопировать код (перелив)

Создаем Zero Block и открываем редактор

1 шаг

<style>
:root {
--text-glow-color: #E9FF71; /* Задаем цвет свечения для текста */
}

.mast__title, .mast__text {
opacity: 0;
}
.mast__title span, .mast__text span {
animation: letter-glow 2.7s 0s ease both;
}
.visible {
opacity: 1;
}

@keyframes letter-glow {
0% {
opacity: 0;
text-shadow: 0px 0px 1px var(--text-glow-rgba, rgba(255, 255, 255, 0.1));
}
66% {
opacity: 1;
text-shadow: 0px 0px 15px var(--text-glow-rgba, rgba(255, 255, 255, 0.9));
}
77% {
opacity: 1;
}
100% {
opacity: 0.7;
text-shadow: 0px 0px 30px var(--text-glow-rgba, rgba(255, 255, 255, 0.0));
}
}
</style>

<script>
function hexToRgba(hex, alpha) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

document.addEventListener("DOMContentLoaded", function() {
let textGlowHex = getComputedStyle(document.documentElement).getPropertyValue('--text-glow-color').trim();
document.documentElement.style.setProperty('--text-glow-rgba', hexToRgba(textGlowHex, 0.9));
});

$(document).ready(function() {
function isElementInViewport(el) {
if (!el) return false;
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

$(window).on('scroll', function() {
checkAndAnimate();
});

function checkAndAnimate() {
$('.mast__title .tn-atom, .mast__text .tn-atom').each(function() {
var $el = $(this);
if ($el.data('animated') !== true && isElementInViewport($el[0])) {
$el.parent().addClass('visible');
animateText($el);
$el.data('animated', true);
}
});
}

function animateText($element) {
var spanizer = $.trim($element.text()).split("");
$element.html('<span>' + spanizer.join('</span><span>') + '</span>');
$element.children().each(function(i) {
$(this).css('animation-delay', (i * 0.05) + 's');
});
}

checkAndAnimate();
});
</script>

<script>
$('.mast__title .tn-atom, .mast__text .tn-atom').addClass('js-spanize');
</script>

<script>
$(document).ready(function() {
var codeExecuted = false;

function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

$(window).on('scroll', function() {
if (!codeExecuted) {
$('.sonneto-overflow .tn-atom').each(function() {
var $this = $(this);
if (isElementInViewport(this)) {
$this.css({
'opacity':'1',
'position': 'relative',
'overflow': 'hidden',
'background': 'linear-gradient(90deg, #000, #fff, #000)',
'background-repeat': 'no-repeat',
'background-size': '90%',
'animation': 'animate 3s linear infinite',
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'rgba(255, 255, 255, 0)'
});
codeExecuted = true;
}
});
}
});
});
</script>



<style>
.tistols-txt006 .tn-atom {
opacity: 0
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>