Бегущие строки с картинками на тильде
<h1>|</h1>
<!DOCTYPE html>
<script>...</script>
<body>
/////<h1>Hello word</h1>
</body>
/////<h1>Hello word</h1>
</body>
Здесь показан пример работы модификации, можно потыкать и посмотреть ;)
/
/
<a href=”Видео-инструкция”></a>
<!-- Контейнер для бегущей строки -->
<div class="container-running-line">
<!-- Бегущая строка -->
<div class="running-line"></div>
</div>
<style>
/*Здесь укажите id блока в котором находится ваша бегущая строка*/
/*Сейчас указан блок с id - #rec634151534*/
#rec633546057 {
/* Стили для контейнера бегущей строки */
.container-running-line {
overflow-x: hidden;
width: 100%;
}
.container-running-line > * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Стили для бегущей строки */
.running-line {
display: flex;
/* Высота */
height: 100px !important;
/* Ширина верхней обводки, тип обводки, цвет обводки */
border-top: 0px solid white;
/* Ширина нижней обводки, тип обводки, цвет обводки */
border-bottom: 0px solid white;
/* Цвет заднего фона */
background-color: black;
align-items: center;
width: min-content;
/* Чем больше секунд, тем медленее движется бегущая строка, в данном примере указано 36 секунд */
animation: moveRight 56s infinite linear;
}
/* Стили для бегущей строки, движущейся налево */
.running-line-left {
/* Чем больше секунд, тем медленее движется бегущая строка, в данном примере указано 36 секунд */
animation: moveLeft 56s infinite linear !important;
}
/* Стили для текста */
.text {
display: inline-block;
white-space: nowrap;
/* Расстояние между текстом и картинкой */
margin-right: 30px !important;
/* Цвет шрифта */
color: #fff;
/* Шрифт */
font-family: "Coiny";
/* Размер шрифта */
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* Стили картинки */
.image {
/* Расстояние между блоками (блок - это 1 строка + картинка) */
margin-right: 30px !important;
}
/* Стили картинки 1 */
.image1 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 99px !important;
}
/* Стили картинки 2 */
.image2 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 99px !important;
}
/* Стили картинки 3 */
.image3 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 99px !important;
}
/* Стили картинки 4 */
.image4 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 99px !important;
}
/* Стили картинки 5 */
.image5 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 99px !important;
}
/* Стили картинки 6 */
.image6 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 7 */
.image7 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 8 */
.image8 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 9 */
.image9 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 10 */
.image10 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 11 */
.image11 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 12 */
.image12 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 13 */
.image13 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 14 */
.image14 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 15 */
.image15 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 16 */
.image16 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 17 */
.image17 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 18 */
.image18 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 19 */
.image19 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/* Стили картинки 20 */
.image20 {
/* Ширина */
width: 99px !important;
/* Высота */
height: 45px !important;
}
/*Адаптив под разрешение от 480px до 639px */
@media (max-width: 639px) {
.running-line {
height: 85px !important;
}
.text {
font-size: 30px;
margin-right: 25px !important;
}
.image {
margin-right: 25px !important;
}
}
/*Адаптив под разрешение от 320px до 479px */
@media (max-width: 479px) {
.running-line {
height: 78px !important;
}
.text {
font-size: 28px;
}
.image {
width: 82px !important;
height: 37px !important;
}
.text {
font-size: 30px;
margin-right: 20px !important;
}
.image {
margin-right: 20px !important;
}
}
}
@keyframes moveRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0%);
}
}
@keyframes moveLeft {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
</style>
<script>
// Если у вас несколько бегущих строк, то измените цифру в названии класса, например - RunningLine2 и так далее в зависимости от того сколько у вас бегущих строк
// Если поменяли название класса, то не забудьте изменить название в конце кода
class RunningLine1 {
constructor() {
this.createRunningLine();
}
//id блока в котором находится бегущая строка
idBlock = "#rec633546057";
// Текст
text = "coolsite";
// Ссылка на картинку
linkToImage1 =
"https://static.tildacdn.com/tild3164-3334-4232-b137-316438623662/Group_144.png";
linkToImage2 =
"https://static.tildacdn.com/tild6334-6230-4639-b431-386636316636/Ellipse_21.png";
linkToImage3 =
"https://static.tildacdn.com/tild3635-3035-4964-b334-383663653232/Group_139.png";
linkToImage4 =
"https://static.tildacdn.com/tild6233-3732-4631-b962-376330643334/Group_142.png";
linkToImage5 =
"https://static.tildacdn.com/tild6539-3065-4235-b561-373035303839/Group_140.png";
linkToImage6 = "";
linkToImage7 = "";
linkToImage8 = "";
linkToImage9 = "";
linkToImage10 = "";
linkToImage11 = "";
linkToImage12 = "";
linkToImage13 = "";
linkToImage14 = "";
linkToImage15 = "";
linkToImage16 = "";
linkToImage17 = "";
linkToImage18 = "";
linkToImage19 = "";
linkToImage20 = "";
images = [
this.linkToImage1,
this.linkToImage2,
this.linkToImage3,
this.linkToImage4,
this.linkToImage5,
this.linkToImage6,
this.linkToImage7,
this.linkToImage8,
this.linkToImage9,
this.linkToImage10,
this.linkToImage11,
this.linkToImage12,
this.linkToImage13,
this.linkToImage14,
this.linkToImage15,
this.linkToImage16,
this.linkToImage17,
this.linkToImage18,
this.linkToImage19,
this.linkToImage20
];
// Отображать текст - true; cкрыть - false
addText = false;
// Отображать картинку - true; cкрыть - false
addImage = true;
// Направить бегущую строку направо - "right"; налево - "left"
direction = "right";
runningLine = document.querySelector(
"div" + this.idBlock + " .running-line"
);
// Функция, которая заполняет бегущую строку текстом и картинками
createRunningLine() {
if (this.direction == "left") {
this.runningLine.classList.add("running-line-left");
}
for (let i = 1; i <= 42; i++) {
if (this.addText == true) {
let tagP = document.createElement("p");
tagP.textContent = this.text;
tagP.classList.add("text");
this.runningLine.appendChild(tagP);
}
if (this.addImage == true) {
for (let j = 0; j < this.images.length; j++) {
if (this.images[j]) {
let link = this.images[j];
let tagImage = document.createElement("img");
tagImage.setAttribute("src", link);
tagImage.classList.add("image" + (j + 1));
tagImage.classList.add("image");
this.runningLine.appendChild(tagImage);
}
}
}
}
}
}
// Сделайте здесь такое же название класса, которое вы указывали выше на 295 строчке
new RunningLine1();
</script>Language:HTML, XML