live_lenta_block

[nixilingВерифицированный профиль]

Добавление на вашу главную страницу сайта уникальную анимационную ленту. Можно вставить всё что угодно.




Установка:

Вставляем код по пути:
templates/ВАШ ШАБЛОН/tpl/home/index.tpl

КОД:

<div class="live_lenta_block" id="ticker-container" bis_skin_checked="1">
<div class="ticker-track" id="ticker" style="transform: translateX(-42px);" bis_skin_checked="1">
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>STORE:</span><a href="https://t.me/">Купить привилегию</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>CANDY:</span><a href="https://t.me/">Вкусняшки от проекта</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>ANEW:</span><a href="https://t.me/">Купить монетки</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>KNIFE:</span><a href="https://t.me/">Купить ножи</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>STORE:</span><a href="https://t.me/">Купить привилегию</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>CANDY:</span><a href="https://t.me/">Вкусняшки от проекта</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>ANEW:</span><a href="https://t.me/">Купить монетки</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>KNIFE:</span><a href="https://t.me/">Купить ножи</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>STORE:</span><a href="https://t.me/">Купить привилегию</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>CANDY:</span><a href="https://t.me/">Вкусняшки от проекта</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>ANEW:</span><a href="https://t.me/">Купить монетки</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>KNIFE:</span><a href="https://t.me/">Купить ножи</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>STORE:</span><a href="https://t.me/">Купить привилегию</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>CANDY:</span><a href="https://t.me/">Вкусняшки от проекта</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>ANEW:</span><a href="https://t.me/">Купить монетки</a></div>
<div class="live_block" bis_skin_checked="1"><i class="bx bx-ghost"></i><span>KNIFE:</span><a href="https://t.me/">Купить ножи</a></div></div>
</div>
<script>
const container = document.getElementById("ticker-container");
const track = document.getElementById("ticker");

const speed = 1;

function fillTrack() {
const originalBlocks = Array.from(track.children);
let trackWidth = track.offsetWidth;
const containerWidth = container.offsetWidth;

while (trackWidth < containerWidth * 2) {
originalBlocks.forEach(block => {
const clone = block.cloneNode(true);
track.appendChild(clone);
});
trackWidth = track.offsetWidth;
}
}

fillTrack();

let x = 0;

function animate() {
x -= speed;
const first = track.children[0];
if (first.offsetWidth + x <= 0) {
x += first.offsetWidth;
track.appendChild(first);
}

track.style.transform = `translateX(${x}px)`;
requestAnimationFrame(animate);
}

animate();
</script>

CSS:

.live_lenta_block {
backdrop-filter: blur(7px);
display: flex;
margin-bottom: 20px;
padding: 15px 15px;
background: #00000054;
overflow: hidden;
position: relative;
border-bottom: solid 1px #6f6f6f85;
border-top: solid 1px #6f6f6f85;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ticker-track {
display: flex;
white-space: nowrap;
}

.live_block {
font-size: 13px;
display: flex;
gap: 3px;
align-items: center;
padding: 0px 15px;
border-right: dashed 1px #f93535;
border-left: dashed 1px #f93535;
}