Форум

rafaello · #1 (**permalink**) 09.01.2022, 21:19

Доброго дня!
По этой ссылке
примерно посередине страницы есть блок "ABOUT COMPANY".
Там фон черного цвета и аннимирован, как бегущая строка.
Если посмотреть через средства разработчика браузера, то там видно,
что свойство background-position непрерывно меняется,
что собственно и создает аннимацию.
Хочу так же сделать на своем сайте.
Подскажите, как это реализовать технически?

ksa · #2 (**permalink**) 09.01.2022, 22:25

Сообщение от rafaello

как это реализовать технически?

Выбирай...
http://blog.kislenko.net/show.php?id=1796

Ну и еще много всякого...
https://yandex.ru/search/?text=Javas...r=38&clid=9582

рони · #3 (**permalink**) 09.01.2022, 23:58

Сообщение от rafaello

свойство background-position непрерывно меняется,

не делайте так там (бесконечный сдвиг влево средствами js) без необходимости!!!

есть способ проще css ... (картинку и время анимации сами уточните)

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    div.bg-moving{
        height: 80vh;
        width: 80vw;
        background-color: #141414;
        background-image: url(https://krot.mobi/uploads/posts/2020-01/1579337847_21-92.png);
        background-repeat: repeat;
        margin: 20px auto;
        animation: moving 15s linear infinite;
        background-size:  20vw 48vh;
        background-position-x:  0;
        animation-direction: inherit;
    }
    @keyframes moving{
       to {
           background-position-x:  -100%;
       }
    }
   </style>

</head>

<body>
<div class="bg-moving"></div>

</body>
</html>

rafaello · #4 (**permalink**) 10.01.2022, 06:05

г-н Рони!
Спасибо! Действительно, ваше решение лучшее!!!!

Форум

Справочник

Discord чат

Курсы javascript