Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2022, 21:19
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

Как реализовать подобное?
Доброго дня!
По этой ссылке
примерно посередине страницы есть блок "ABOUT COMPANY".
Там фон черного цвета и аннимирован, как бегущая строка.
Если посмотреть через средства разработчика браузера, то там видно,
что свойство background-position непрерывно меняется,
что собственно и создает аннимацию.
Хочу так же сделать на своем сайте.
Подскажите, как это реализовать технически?
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2022, 22:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от rafaello
как это реализовать технически?
Выбирай...
http://blog.kislenko.net/show.php?id=1796

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

Последний раз редактировалось ksa, 09.01.2022 в 22:27.
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2022, 23:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 10.01.2022 в 08:38.
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2022, 06:05
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать проверку текстового поля? Валерий1996 Общие вопросы Javascript 3 26.08.2015 13:27
Как реализовать динамичное добавление тегов modelfak23 jQuery 1 19.06.2015 14:27
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Как правильно реализовать наследование? Universe Общие вопросы Javascript 9 10.04.2014 16:05
Как реализовать подобное? Jeremen Events/DOM/Window 4 14.09.2012 10:27