Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен

Эластичная линия в Zero блоке

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить интерактивности в Ваш сайт или сайт клиента с помощью линий
Добавьте уникальность в Ваш проект
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Обратите внимание, что данный эффект будет работать только на десктоп разрешениях из-за ограничений в мобильной версии сайтов. Данный код не нагружает сайт для пользователя и не тормозит загрузку.
Как это выглядит?
Какой-то текст 1
Какой-то текст 2
Какой-то текст 3
Как это добавить?
Первый шаг
Создаем Zero блок. Добавляем в него необходимый контент. Чтобы появилась линия, создаем Shape с высотой в 60px, убираем заливку и задаем CSS имя - elastic-line
Второй шаг
Создаем блок T123 и помещаем код на страницу, где необходимо применить модификацию.

<!--Взято с сайта https://digistudio.su/ehlastichnaya-liniya-->

<style>
:root {
--ElasticLineHeight: 1.2px; /*Толщина линии*/
--ElasticLineColor: #6AA353; /*Цвет линии*/
}
.elastic-line , .elastic-line .tn-atom,
.elastic-line-2 , .elastic-line-2 .tn-atom {
height: 100%;
display: block;
}
.container-elastic-line,
.container-elastic-line-2 {
width: 100%;
height: 100%;
overflow-y: visible;
}
.container-elastic-line svg,
.container-elastic-line-2 svg {
width: 100%;
overflow-x: hidden;
height: 400%;
pointer-events: none;
transform: translateY(-50%);
position: relative;
top: 50%;
}
.container-elastic-line svg path {
stroke-width: var(--ElasticLineHeight);
stroke: var(--ElasticLineColor);
fill: none;
position: absolute;
}
.container-elastic-line-2 svg path {
stroke-width: var(--ElasticLineHeight);
stroke: red;
fill: none;
position: absolute;
}
.elastic-line-box {
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: 1;
}
</style>
<div class="container-elastic-line line-elastic">
<span class="elastic-line-box"></span>
<svg class="svg-container" id="svg1">
<path class="curve" d="M0 120 Q210 120, 1920 120"></path>
</svg>
</div>
<!--<div class="container-elastic-line-2 line-elastic">-->
<!-- <span class="elastic-line-box"></span>-->
<!-- <svg class="svg-container" id="svg2">-->
<!-- <path class="curve" d="M0 120 Q210 120, 1920 120"></path>-->
<!-- </svg>-->
<!--</div>-->
<script>
$('.container-elastic-line').appendTo('.elastic-line .tn-atom');
$('.container-elastic-line-2').appendTo('.elastic-line-2 .tn-atom');
document.addEventListener("DOMContentLoaded", function () {
const svgs = document.querySelectorAll('.line-elastic svg');
const boxes = document.querySelectorAll('.elastic-line-box');
const paths = document.querySelectorAll('.line-elastic svg path');
const numLines = svgs.length;
const progress = new Array(numLines).fill(0);
const x = new Array(numLines).fill(0.5);
const time = new Array(numLines).fill(Math.PI / 2);
const reqIds = new Array(numLines).fill(null);
function setPath(index, prog) {
const svgWidth = svgs[index].getBoundingClientRect().width;
x[index] = (svgWidth * x[index]) / svgWidth;
paths[index].setAttributeNS(null, "d", `M0 120 Q${svgWidth * x[index]} ${120 + prog}, ${svgWidth} 120`);
}
function lerp(x, y, a) {
return x * (1 - a) + y * a;
}
function manageMouseEnter(index) {
if (reqIds[index]) {
cancelAnimationFrame(reqIds[index]);
resetAnimation(index);
}
}
function manageMouseMove(index, e) {
const { movementY } = e;
progress[index] += movementY;
setPath(index, progress[index]);
}
function manageMouseLeave(index) {
animateOut(index);
}
function animateOut(index) {
const newProgress = progress[index] * Math.sin(time[index]);
progress[index] = lerp(progress[index], 0, 0.025);
time[index] += 0.2;
setPath(index, newProgress);
if (Math.abs(progress[index]) > 0.75) {
reqIds[index] = requestAnimationFrame(() => animateOut(index));
} else {
resetAnimation(index);
}
}
function resetAnimation(index) {
time[index] = Math.PI / 2;
progress[index] = 0;
}
boxes.forEach((box, index) => {
box.addEventListener("mouseenter", () => manageMouseEnter(index));
box.addEventListener("mousemove", (e) => manageMouseMove(index, e));
box.addEventListener("mouseleave", () => manageMouseLeave(index));
});
});
</script>
Как Вам модификация?
Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
Смотрите также
    Made on
    Tilda