За неподвижной пнг-картинкой двигается фон

@Glass4217 · Регистрация: 12.01.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые программисты.
Помогите решить непростой вопрос.

Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ?

(Получится такой эффект, что за неподвижной пнг-картинкой - двигается фон.)

@shvyrevvg · 30.08.2019, 08:28

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

Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ?

Glass4217, это можно сделать на чистом css, на js с канвасом, на js без канваса, и т.д. Какой вариант нужен?

@Glass4217 · 30.08.2019, 14:42 **[ТС]**

на js без канваса

@ТабуретY · 30.08.2019, 17:11

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

на js без канваса

Если согласитесь на css

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
        body {
      height: 100%;
      width: 100%;
      background-image: url("image.jpg");
      animation: scroll linear 10s infinite;
    }
 
    @keyframes scroll {
      from {
        background-position: 0 0;
      }
      to {
        background-position: 100% 0;
      }
    }
    </style>
</head>
<body>
    <img src="hero.jpg" width="250px">
</body>

@Glass4217 · 30.08.2019, 18:39 **[ТС]**

ТабуретY, а как здесь - регулировать скорость ?

@ТабуретY · 30.08.2019, 18:59

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

а как здесь - регулировать скорость ?

Вот тут

PHP/HTML
1
 animation: scroll linear 10s infinite;

чем меньше число, тем быстрее

@Glass4217 · 30.08.2019, 19:52 **[ТС]**

ТабуретY, понятно.
А как смайлик - внизу посередине страницы разместить ?

@ТабуретY · 30.08.2019, 21:12

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

внизу посередине страницы разместить ?

Что-то такое

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
 body {
      height: 100%;
      width: 100%;
      background-image: url("image.jpg");
      animation: scroll linear 20s infinite;
    }
 
    .center-img {
      position: fixed; 
      bottom: 0; 
      right: 50%;
    }
 
    @keyframes scroll {
      from {
        background-position: 0 0;
      }
      to {
        background-position: 100% 0;
      }
    }
    </style>
</head>
<body>
    <img class="center-img" src="hero.jpg" width="250px">
</body>

@Glass4217 · 30.08.2019, 21:27 **[ТС]**

ТабуретY, спасибо.
Теперь все нормально.

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79

	За неподвижной пнг-картинкой двигается фон 30.08.2019, 07:54. Показов 2190. Ответов 8 Метки нет (Все метки) Здравствуйте, уважаемые программисты. Помогите решить непростой вопрос. Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ? (Получится такой эффект, что за неподвижной пнг-картинкой - двигается фон.) Миниатюры 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 14:42 [ТС]
	на js без канваса 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 18:39 [ТС]
	ТабуретY, а как здесь - регулировать скорость ? 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 19:52 [ТС]
	ТабуретY, понятно. А как смайлик - внизу посередине страницы разместить ? 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 21:27 [ТС]
	ТабуретY, спасибо. Теперь все нормально. 0

Опции темы

За неподвижной пнг-картинкой двигается фон

Решение