Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как реализовать подобное? (https://javascript.ru/forum/dom-window/83547-kak-realizovat-podobnoe.html)

rafaello 09.01.2022 21:19

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

ksa 09.01.2022 22:25

Цитата:

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

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

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

рони 09.01.2022 23:58

background-image moving infinite
 
Цитата:

Сообщение от 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 10.01.2022 06:05

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


Часовой пояс GMT +3, время: 05:29.