Скачать "Marquee-like Content Scrolling (HTML & CSS)"

"videoThumbnail Marquee-like Content Scrolling (HTML & CSS)

1:19

Marquee Tag

3:26

Css

4:12

Styling the Marquee Element

5:29

Styling the Marquee Content Element

9:54

A Continuous Flow of Marquee Elements

12:24

Linear Gradient

17:12

Root Selector

25:54

Set the Marquee Elements Custom Property

28:23

Use Cases

28:27

Logo Slider

29:16

Scrolling Text

30:45

Add Images as Marquee Content

Water Wave Filling Box With Animation

Water Wave Filling Box With Animation

Канал: Learning Axis

marquee

marquee effect

marquee effect css

marquee effect in html

marquee css

scrolling marquee

css animation

marquee animation

css marquee effect

text animation

content scrolling

content scroller

marquee-like content scrolling

scrolling banner

infinite carousel

logo slider

logo slider html css

logo slider css

scrolling content carousel

logo ticker

how-to

html

css

javascript

front-end

ui

ux

tutorial

web tutorials

web development

coding

coding journey

00:00:00

эй, как дела, ребята, надеюсь, у вас

00:00:01

сегодня все хорошо, мы создаем этот эффект,

00:00:04

похожий на эффект прокрутки контента, с помощью HTML

00:00:09

и CSS. Это хороший способ отобразить

00:00:11

некоторую информацию пользователю,

00:00:14

например, вот текст, который может быть новостями,

00:00:17

специальные предложения, цены на акции или

00:00:20

обменные курсы и т. д. вот несколько изображений

00:00:23

и слайдер с локомотивом. Надеюсь, вы

00:00:27

получите некоторую пользу от этого видео,

00:00:29

не забудьте поставить лайк, поделиться, подписаться, и

00:00:32

без лишних слов, поехали, это наша

00:00:43

отправная точка, я создал два файлы, которые

00:00:46

они индексируют с точкой HTML и

00:00:49

файлы CSS с точкой в файле HTML с точкой. Я набрал

00:00:52

базовый шаблонный код html5,

00:00:56

вставил заголовок, мой ключ, например,

00:01:00

прокрутку контента, и связал документ с

00:01:03

внешней таблицей стилей, CSS-

00:01:06

файл с точкой, который в настоящее время пуст, и мы

00:01:10

Теперь можно перейти к определению содержимого

00:01:13

тела, но прежде чем приступить к

00:01:15

фактической реализации, я хотел бы

00:01:17

упомянуть о существовании тега Marquee,

00:01:20

который можно использовать для вставки

00:01:24

области прокрутки текста, и давайте добавим поведение для

00:01:27

прокрутки, которое используется по умолчанию. путь

00:01:30

и направление влево, что также является

00:01:33

значением по умолчанию, и давайте вставим сюда текст.

00:01:37

Словом, я знаю оригинал,

00:01:43

давайте сохраним и откроем проект в

00:01:47

браузере. Я буду использовать

00:01:49

расширение кода Visual Studio для живого сервера,

00:01:56

действительно, мы можем видеть прокрутка текста

00:01:59

справа налево, и это будет

00:02:03

повторяться бесконечно циклически,

00:02:09

поэтому теоретически мы могли бы использовать

00:02:12

элемент Mikey в качестве отправной точки для нашего

00:02:14

проекта, это неправильно, потому что

00:02:19

элемент Marquis устарел, хотя он

00:02:23

все еще может работать в некоторых браузерах, его использование

00:02:27

не рекомендуется, так как его можно удалить в

00:02:29

любой момент, старайтесь избегать его использования,

00:02:34

ладно, давайте забудем об использовании

00:02:37

HTML-элемента my key и позже будем использовать

00:02:41

CSS для реализации желаемого

00:02:44

поведения, поэтому давайте создадим наш собственный

00:02:48

элемент Marquis, это будет div

00:02:50

элемент с классом Marquis,

00:02:54

который будет содержать элемент ul с

00:02:58

содержимым области выделения класса,

00:03:03

поэтому мой ключевой элемент будет статической

00:03:07

фиксированной частью, а это будет

00:03:10

движущаяся часть, и давайте добавим несколько

00:03:13

элементов списка, скажем, 9,

00:03:20

и это все с HTML-разметка,

00:03:25

давайте для начала перейдем к CSS.

00:03:33

Я просто вставлю некоторые

00:03:36

базовые стили, чтобы сэкономить некоторое время,

00:03:38

просто импортируя семейство телефонов Montserrat,

00:03:41

сбрасывая поля и отступы на

00:03:44

ноль и размер поля в рамку для

00:03:47

всех элементов и для настройки тела

00:03:51

фона семейства телефонов. цвет и цвет

00:03:53

и, наконец, использование flexbox для

00:03:57

центрирования содержимого, не обязательно

00:04:00

то, что я бы сделал в реальном

00:04:01

проекте, это просто для презентационных

00:04:03

целей. Я думаю, что это выглядит лучше

00:04:05

по центру, поэтому давайте сохраним все

00:04:10

в порядке и приступим к стилизации

00:04:17

фона элемента выделения. цвет, и давайте использовать этот

00:04:20

цвет, очень темно-серый, почти черный, и

00:04:24

цвет,

00:04:27

давайте использовать этот цвет, очень светло-серый,

00:04:30

почти белый,

00:04:33

хорошая задница, или теперь давайте использовать какой-нибудь другой

00:04:37

цвет, чтобы все было видно,

00:04:39

так как этот цвет такой же, как

00:04:42

цвет фона тела, поэтому давайте использовать помидор по

00:04:45

какой-то причине мне нравится этот цвет,

00:04:48

хорошо, и давайте установим для моего ключевого элемента

00:04:54

значение 80% ширины и высоты области просмотра

00:05:03

- 20% высоты области просмотра,

00:05:10

мы также хотим скрыть контент,

00:05:13

который выходит за пределы области выделения,

00:05:15

и для этой цели мы воспользуемся

00:05:17

свойством overflow и установим для него значение «

00:05:20

скрыто», однако на данный момент давайте оставим

00:05:23

все видимым, чтобы иметь

00:05:26

полное изображение, а теперь давайте приступим к

00:05:29

стилизации элемента содержимого области,

00:05:36

начнем с установки наименьшего стиля в значение «

00:05:39

нет»,

00:05:42

давайте установим высоту, равную 100 % его родительского

00:05:48

элемента, чтобы он занимал всю

00:05:50

высоту элемента выделения, и давайте установим

00:05:54

отображение двух ног, чтобы отображать

00:06:01

его содержимое в строке,

00:06:05

теперь это будет движущаяся часть, поэтому через

00:06:08

некоторое время мы определим анимацию или этот

00:06:12

элемент, однако давайте сначала определим

00:06:16

стиль для отдельных элементов списка

00:06:24

или для начала давайте добавим рамку вокруг

00:06:27

каждого союзника, чтобы можно было

00:06:30

видеть занимаемую им область, и давайте используем

00:06:34

бирюзовый цвет,

00:06:39

а теперь давайте установим ширину области просмотра 220,

00:06:43

напомним, что ширина для

00:06:47

Ширина элемента marquee составляет 80 в области просмотра, поэтому

00:06:50

мы ожидаем, что элементы в области выделения будут или перечисляться

00:06:58

не совсем так, как нам хотелось, и это

00:07:00

потому, что значение по умолчанию для

00:07:03

коэффициента сжатия Flex равно одному, чтобы

00:07:07

элементы Flex сжимались, чтобы вписаться

00:07:11

в их размер. Flex-контейнер, поэтому, чтобы

00:07:15

предотвратить сжатие элементов,

00:07:17

давайте очень хорошо установим это значение равным нулю,

00:07:22

и вы начнете понимать, к

00:07:25

чему мы клоним,

00:07:27

вспомнив, что часть за пределами границ области выделения

00:07:30

будет скрыта,

00:07:33

и снова давайте использовать flexbox для выровняем

00:07:37

содержимое по центру

00:07:40

и установим размер шрифта равный пяти REM,

00:07:49

а также установим пробелы для nowrap,

00:07:56

чтобы гарантировать, что текст

00:07:58

никогда не перейдет на следующую строку, если,

00:08:01

конечно, не встретится тег br,

00:08:06

а теперь давайте определим анимацию для

00:08:09

рынка контент, давайте назовем

00:08:12

прокрутку анимации и установим

00:08:16

продолжительность анимации равной десяти секундам.

00:08:18

Функция синхронизации анимации будет линейной, а счетчик

00:08:21

длительности анимации — бесконечным,

00:08:26

и давайте укажем анимацию,

00:08:36

теперь это может быть нашей отправной точкой, или

00:08:40

мы можем начать с правого края, давайте

00:08:44

сделаем последнее, поэтому в этом случае мы

00:08:47

хотели бы переместить содержимое области выделения

00:08:50

вправо на 80 ширины порта,

00:08:58

и в конечном итоге мы хотим переместить

00:09:04

содержимое области выделения влево в девять

00:09:10

раз на 20 ширины порта, то есть на 180

00:09:15

ширины области просмотра, поэтому давайте сохраним и посмотрим результат.

00:09:25

хорошо, и давайте раскомментируем

00:09:28

переполнение: скрыто здесь, давайте также изменим

00:09:31

цвет

00:09:34

и удалим переносчик,

00:09:51

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

00:09:54

непрерывный поток элементов выделения,

00:09:57

например, когда здесь находится девять, чтобы также

00:10:01

отображались цифры один, два, три

00:10:05

ну, в этом случае мы должны дублировать

00:10:08

элементы здесь, но сколько элементов, ну, по

00:10:12

крайней мере, моя ширина ключа, в этом случае

00:10:15

ширина области просмотра восемьдесят, разделенная на

00:10:19

ширину каждого элемента, что составляет ширину области просмотра 20,

00:10:23

поэтому теперь мы должны повторить как минимум

00:10:26

четыре элемента,

00:10:30

если мы дублируем более четыре

00:10:34

элемента, то у нас не будет никаких

00:10:36

проблем, поскольку анимация будет перезапускаться

00:10:39

каждый раз, просто игнорируя дополнительные

00:10:41

элементы. Однако, если мы продублируем

00:10:44

менее четырех элементов, то

00:10:48

в конце каждого повторения анимации будет некоторое пустое пространство,

00:10:51

если мы не хотим

00:10:54

дублирующиеся элементы, мы можем использовать JavaScript

00:10:57

для автоматизации этого процесса, и на самом деле мы

00:11:00

сделаем это ближе к концу этого

00:11:02

видео, а теперь, чтобы лучше

00:11:05

видеть, что происходит, давайте добавим

00:11:07

цвет фона для дублируемых

00:11:10

элементов,

00:11:14

поэтому давайте сохраним и посмотрим результат вот:

00:11:23

дублированные элементы

00:11:27

в порядке, но для того, чтобы иметь непрерывный

00:11:30

поток, а не начинать анимацию

00:11:32

с правого края, давайте начнем с

00:11:35

нуля,

00:11:42

давайте сохраним и посмотрим результат,

00:11:51

вот дублированные элементы,

00:11:56

и как только анимация перезапустится,

00:11:59

дублированные элементы заменяются

00:12:01

исходными элементами мгновенно и

00:12:04

анимация непрерывная,

00:12:09

хорошо, давайте удалим цвет фона из

00:12:12

дублированных элементов,

00:12:18

теперь мы можем сделать вход и выход

00:12:22

элементов немного более постепенным, добавив

00:12:25

линейный градиент к левому и правому

00:12:28

краям моего ключевого элемента, для этой цели

00:12:32

мы могли бы создать два отдельных элемента

00:12:35

и разместим их по левому и правому

00:12:38

краям, или, в качестве альтернативы, мы могли бы использовать

00:12:42

псевдоэлементы «до» и «после»

00:12:45

поверх элемента «Маркиз», давайте воспользуемся

00:12:48

последним подходом,

00:12:51

вставим эту часть и быстро пройдемся по

00:12:55

ней, чтобы мы абсолютно

00:12:57

позиционировали «до» и после

00:13:01

псевдоэлементов относительно элемента выделения,

00:13:04

поэтому давайте добавим позицию: относительно здесь, мы

00:13:09

размещаем псевдоэлемент перед

00:13:12

левым краем, установив верхнюю и левую

00:13:16

позиции на 0, а высоту на 100%

00:13:20

элемента выделения, и аналогичным образом мы

00:13:23

размещаем псевдоэлементы после того, как псевдоэлемент на

00:13:26

правом краю

00:13:28

установлен на 10, содержимое REM пусто,

00:13:33

поскольку нас интересует только установка

00:13:36

ширины и высоты для элементов и,

00:13:38

следовательно, для линейного градиента, который

00:13:42

на самом деле считается фоновым

00:13:43

изображением, и, наконец, мы сказали Z-индекс равным 1

00:13:48

просто для того, чтобы убедиться, что эти

00:13:51

элементы размещены поверх

00:13:54

элемента выделения,

00:13:57

теперь для левого элемента мы устанавливаем

00:14:00

фон в виде линейного градиента с

00:14:02

направлением вправо, начиная с этого

00:14:05

цвета на 0%, который является левым краем, и

00:14:10

заканчивая прозрачным на 100. %, который равен 1,

00:14:15

что составляет 10 REM от левого края, и

00:14:20

аналогично для правого элемента, просто

00:14:24

меняя направление справа налево, если

00:14:29

вы заинтересованы в более подробном

00:14:31

объяснении линейного градиента,

00:14:35

недавно я создал видео на эту тему,

00:14:38

поэтому не стесняйтесь проверить это, я также

00:14:41

включу ссылку в описание, ок,

00:14:45

давайте сохраним и посмотрим результат,

00:14:49

теперь мы можем видеть постепенный

00:14:51

вход и выход элементов,

00:14:56

хорошо, что мы также могли бы опубликовать анимацию,

00:15:00

когда мышь находится над содержимым области выделения,

00:15:04

так что давайте продемонстрируйте

00:15:10

мой ключевой контент, и в этом случае мы

00:15:14

хотим установить состояние воспроизведения анимации,

00:15:19

чтобы опубликовать

00:15:22

вас,

00:15:24

и давайте

00:15:29

действительно проверим, когда указатель мыши находится над анимацией

00:15:33

содержимого рамки, анимация публикуется хорошо, но давайте пока

00:15:40

прокомментируем это,

00:15:45

хорошо, мы закончили с основами, так что

00:15:48

теперь вы можете взять эту основную концепцию и

00:15:50

создать и стилизовать нужные элементы выделения,

00:15:52

однако почему бы не сделать наш код

00:15:55

немного более удобным в сопровождении, например здесь,

00:15:58

вместо того, чтобы вручную выполнять

00:16:00

вычисления, почему бы просто не использовать

00:16:03

функцию Calc CSS, так что давайте сделаем это

00:16:07

так, как мы хотим чтобы переместиться влево

00:16:12

на 20, вы должны умножить ширину на 9,

00:16:18

хорошо, но что, если мы здесь хорошо изменили количество

00:16:23

элементов? В этом случае нам

00:16:26

следует вернуться к нашему CSS, найти эту точку

00:16:29

здесь и изменить число, или,

00:16:32

альтернативно, мы могли бы определить

00:16:35

переменные CSS в в верхней части нашей страницы и используйте

00:16:39

их сейчас, прежде чем продолжить. Я должен

00:16:42

упомянуть, что при использовании переменных CSS или

00:16:45

пользовательских свойств мы потеряем небольшой

00:16:47

процент поддержки браузеров, поскольку

00:16:51

до 21 мая 2019 года поддержка

00:16:55

переменных CSS браузерами охватывает около 92%

00:16:59

глобального использования, поэтому это решение, которое вы

00:17:02

должны принять сейчас, давайте объявим

00:17:06

переменные CSS в корневом селекторе, чтобы

00:17:10

они имели глобальную область действия. Корневой

00:17:13

селектор похож на селектор HTML,

00:17:17

однако он имеет специфику уровня класса,

00:17:20

поскольку это псевдокласс, поэтому он

00:17:23

фактически переопределяет селектор HTML,

00:17:27

имя переменной должно начинаться с двух тире,

00:17:31

и оно чувствительно к регистру, или для начала

00:17:34

давайте объявим ключ отметки с

00:17:40

переменной и установим его на

00:17:43

ширину области просмотра восемьдесят,

00:17:46

продолжим, объявив высоту Marquis

00:17:52

и установим ее на высоту области просмотра 20,

00:17:59

далее давайте установите количество элементов Marquise

00:18:05

- девять, поэтому, если количество моих ключевых элементов

00:18:10

изменилось, мы должны вручную обновить

00:18:13

число здесь, поскольку нет способа

00:18:17

подсчитать количество дочерних элементов контента Marquis

00:18:20

с помощью CSS. Далее давайте установим

00:18:25

отображаемое количество элементов Marquis и в

00:18:30

нашем например, это число было равно 480

00:18:34

ширине области просмотра, разделенной на 20, что было

00:18:38

шириной элемента. Далее давайте

00:18:43

вычислим и сохраним в переменной

00:18:47

элемент Marquis с

00:18:50

этим должен быть равен ширине области,

00:18:54

разделенной на отображаемые элементы Marquis,

00:18:57

поэтому вычислим, и мы имеем использовать

00:19:02

функцию VAR для доступа к переменной CSS, чтобы

00:19:07

она была равна Marquis с

00:19:15

отображаемыми ключевыми элементами /

00:19:20

и, наконец, давайте объявим

00:19:25

переменную длительности анимации

00:19:29

в нашем примере, это значение было установлено на десять

00:19:33

секунд, в качестве альтернативы мы могли бы каким-то образом

00:19:37

связать это значение на количество

00:19:41

элементов выделения, например, давайте установим продолжительность моей ключевой

00:19:45

анимации, чтобы рассчитать

00:19:51

время моих ключевых элементов, скажем, две

00:19:55

секунды,

00:19:58

хорошо, теперь давайте заменим соответствующие

00:20:01

значения в таблице стилей

00:20:05

значениями наших пользовательских свойств.

00:20:48

Хорошо, надеюсь, я не забыл все, что мы

00:20:52

могли бы даже установить размер шрифта для моего ключевого

00:20:55

элемента относительно высоты маркиза,

00:21:00

например, давайте установим его равным

00:21:07

высоте маркиза, умноженной на

00:21:13

2/3, поэтому он будет равен 2/3

00:21:16

высоты маркиза, конечно, в случае

00:21:20

текст побольше, мы, вероятно, уменьшим

00:21:22

размер шрифта, ок, давайте сохраним и посмотрим, результат,

00:21:30

кажется, работает гладко, и давайте

00:21:33

посмотрим здесь на изменение, как только оно достигнет четырех,

00:21:39

теперь хорошо для маленьких экранов. Я думаю, мы

00:21:46

могли бы добавить немного очень простой отзывчивости

00:21:49

просто для того, чтобы чтобы он выглядел немного

00:21:51

лучше,

00:21:57

я просто вставлю эту часть. Я,

00:22:00

конечно, включу в описание ссылку

00:22:02

на весь проект, поэтому для экранов

00:22:04

с разрешением 600 пикселей или меньше

00:22:08

применяются эти правила стиля,

00:22:11

поэтому мы сбрасываем размер шрифта маршрута до 12 пикселей,

00:22:15

это влияние на единицы REM, вспомните, что R

00:22:19

означает маршрут, мы также сбрасываем некоторые

00:22:25

переменные CSS, поэтому значения пользовательских свойств, поэтому

00:22:27

мы устанавливаем ширину Marquis на 100% ширины области просмотра,

00:22:31

чтобы мы могли использовать всю

00:22:33

ширину в случае меньших экранов, мы также

00:22:36

сбрасываем высоту Marquis на чрезвычайно

00:22:38

плохие элементы высоты и метки отображаются

00:22:40

до 3 вместо 4, поэтому

00:22:43

для каждого элемента будет немного больше места, поэтому

00:22:46

обратите внимание, как легко поддерживать и

00:22:49

манипулировать стилем CSS при использовании

00:22:52

переменных CSS, хорошо, и, наконец, мы уменьшаем

00:22:56

ширину линейного градиента до левый и

00:22:59

правый края элемента Marquis, так что

00:23:02

давайте сохраним и посмотрим, что результат

00:23:11

выглядит лучше. Я думаю,

00:23:14

хорошо,

00:23:17

теперь вместо того, чтобы вручную дублировать

00:23:20

элементы здесь

00:23:23

или подсчитывать ключевые элементы my и

00:23:26

устанавливать здесь число, мы могли бы пойти

00:23:30

дальше и использовать JavaScript

00:23:33

в для выполнения этих задач, поэтому на

00:23:37

этом этапе анимация прокрутки

00:23:40

нарушена, поскольку моя переменная ключевых элементов

00:23:45

не определена,

00:23:49

поэтому давайте сначала создадим наш

00:23:52

файл JavaScript и назовем его основной точкой Cheers,

00:23:57

и давайте свяжем файл JavaScript с

00:24:00

документом

00:24:05

или, альтернативно, вместо размещения

00:24:07

сценарий в конце тела, мы могли бы

00:24:10

поместить его в заголовок, используя

00:24:13

атрибут dafair, который указывает браузеру,

00:24:16

что сценарий предназначен для выполнения

00:24:18

после передачи документа, и

00:24:21

общее выполнение сценария

00:24:23

на самом деле происходит быстрее, потому что таким образом

00:24:26

сценарий был загружен параллельно

00:24:29

с браузером для анализа HTML,

00:24:32

поддержка абсолютного блага

00:24:35

близка к 98%, хорошо, давайте перейдем к

00:24:39

нашему файлу JavaScript для начала, давайте получим

00:24:43

доступ к корневому элементу документа

00:24:45

и сохраним его в

00:24:53

следующей нам переменной чтобы получить доступ к значению

00:24:57

отображаемого пользовательского свойства my key elements,

00:25:00

чтобы узнать, сколько

00:25:03

элементов нужно дублировать,

00:25:11

мы будем использовать метод get вычисленного стиля,

00:25:14

который возвращает объект,

00:25:16

содержащий значения всех

00:25:18

свойств CSS элемента,

00:25:21

и, в частности, мы заинтересованы в

00:25:24

получении значения свойства для

00:25:28

отображаемого свойства элементов Marquee,

00:25:32

и, наконец, нам нужно получить доступ к

00:25:35

элементу содержимого Marquee, чтобы иметь

00:25:38

возможность добавлять дублированные элементы,

00:25:52

теперь все в порядке, давайте установим

00:25:57

пользовательское свойство элементов Marquee для корневого элемента,

00:26:01

чтобы стиль корневой точки Свойство dot set

00:26:11

мои ключевые элементы — это свойство, которое мы хотим

00:26:14

установить, и значение, которое мы хотим установить, —

00:26:17

это мое ключевое содержимое, у которого

00:26:22

есть дети,

00:26:25

собачья нога,

00:26:29

хорошо, поэтому теперь, если мы сохраним, мы увидим, что

00:26:32

анимация прокрутки теперь работает, но

00:26:36

мы ожидаем, что пустые места в

00:26:39

конце анимации, так как мы

00:26:42

еще не дублировали элементы, здесь все

00:26:49

в порядке,

00:26:51

поэтому давайте воспользуемся циклом for, чтобы

00:26:54

клонировать отображаемые элементы моих ключевых элементов

00:26:58

и добавить их в выделенное вами содержимое,

00:27:11

и давайте сначала клонируем дочерний элемент if

00:27:15

содержимого Marquis,

00:27:24

и теперь мы хотим добавить этот клонированный

00:27:29

элемент к моему ключевому содержимому в качестве дочернего элемента,

00:27:40

и это все с помощью JavaScript, давайте посмотрим на

00:27:43

результат

00:27:48

девять, теперь мы ожидаем дублированные

00:27:51

элементы, здесь мы - один, два, три и

00:27:54

четыре,

00:27:58

очень хорошо, и если мы проверим

00:28:02

элементы давайте посмотрим,

00:28:07

действительно ли были созданы дублированные элементы, там мы

00:28:10

раз, два, три и четыре, хорошо,

00:28:19

и мы фактически закончили, но прежде чем

00:28:22

закрыть видео, давайте быстро

00:28:24

рассмотрим несколько вариантов использования, давайте сначала превратим

00:28:27

это в слайдер с логотипом для этой цели,

00:28:29

я используйте передние локальные значки Awesome,

00:28:32

поэтому давайте включим Found Awesome в наш

00:28:35

проект

00:28:40

и вставим логотипы, которые мы хотим

00:28:42

отображать, хорошо сохраним

00:28:47

и просто изменим отображаемую

00:28:50

переменную элементов выделения на пять

00:28:53

вместо четырех, так что давайте сохраним и посмотрим

00:28:56

результат, все

00:29:11

в порядке, это выглядит хорошо,

00:29:13

теперь давайте отобразим простой прокручиваемый текст,

00:29:19

поэтому здесь только два моих ключевых элемента: одна

00:29:23

ячейка кодирует путешествие, а другая

00:29:25

говорит, что все дело в путешествии, давайте

00:29:27

сохраним

00:29:29

и будем отображать по одному элементу за раз,

00:29:33

давайте также увеличим продолжительность анимации,

00:29:36

поскольку теперь у нас есть только два элемента и

00:29:40

давайте также внесем еще несколько изменений в стиль, изменим

00:29:42

цвет фона

00:29:44

на цвет,

00:29:48

а также изменим

00:29:51

здесь цвет линейного градиента,

00:29:55

хорошо, давайте сохраним,

00:30:02

это, вероятно, будет выглядеть лучше

00:30:05

сверху. Я бы также прочитал, используйте размер шрифта, и

00:30:09

если мы хотим увеличить расстояние

00:30:12

между двумя элементами мы могли бы вставить

00:30:17

пустые элементы между ними, например,

00:30:21

мы могли бы добавить аналит здесь

00:30:24

и еще один здесь, давайте сохраним,

00:30:37

хорошо, лучше, я думаю,

00:30:42

неплохо, и, наконец, мы добавим изображения в качестве

00:30:47

содержимого области выделения, но давайте сначала создадим

00:30:51

новую папку и назовем ее изображениями и давайте

00:30:56

переместим сюда изображения,

00:31:00

хорошо,

00:31:03

давайте попробуем элементы Mikey,

00:31:06

содержащие изображения,

00:31:10

а теперь, что касается стиля, давайте установим

00:31:13

высоту Marquis на тридцать, высота области просмотра,

00:31:16

мои ключевые элементы отображали два три, и

00:31:19

давайте сделаем анимацию немного быстрее,

00:31:22

умножая на три вместо четырех,

00:31:29

давайте также уменьшите ширину линейного градиента

00:31:33

для левого и правого краев до одного REM,

00:31:40

и, поскольку теперь у нас есть изображения, давайте

00:31:43

не забудем определить размеры,

00:31:50

я просто задам ширину, чтобы

00:31:54

сохранить соотношение сторон,

00:31:57

и давайте также добавим рамку вокруг каждого

00:32:01

изображения,

00:32:05

хорошо, давайте сохраним и посмотрите результат

00:32:13

отлично, ладно, ребята, давайте оставим это здесь.

00:32:16

Надеюсь, вам понравилось это видео и вы получили

00:32:18

от него какую-то пользу, или у вас есть какие-либо вопросы,

00:32:21

предложения или просто чтобы сказать привет, пожалуйста, используйте

00:32:24

раздел комментариев ниже, нажмите кнопку «Мне нравится»,

00:32:26

если вам нравится это видео, и поделитесь им.

00:32:28

это для всех, кому это может быть интересно,

00:32:30

также не забудьте подписаться, если вы

00:32:33

хотите большего, до следующего раза продолжайте кодировать,

00:32:35

продолжайте улучшаться и наслаждайтесь путешествием,

00:32:40

берегите себя, пока

Описание:

Learn how to create a Marquee-like Content Scrolling Effect with HTML and CSS. The effect is implemented from scratch, without using the HTML marquee element which is obsolete. Scrolling marquee is a nice way to display information to the user, such as news, announcements, special offers, stock prices, fx rates etc. It can also be used as an image carousel or a logo slider and in general for any type of scrolling content. Initially, the minimal HTML structure and CSS styling to achieve the effect is described. We then introduce and use CSS variables (custom properties), in order to make CSS styling easier to modify and maintain. And eventually, we use JavaScript just in order to overcome limitations of a CSS-only solution, automating a couple of tasks. Creating the marquee-like content scrolling effect from scratch, will allow you to modify it any way you want, according to your needs and imagination! Code for this Project: https://codepen.io/Coding_Journey/pen/yWjWKd Support the Channel 💙☕🙏 PayPal: https://www.paypal.com/paypalme/CodingJourney Suggested Videos: Colorful Background with linear-gradient: https://www.youtube.com/watch?v=1q6papqTEqI Font Awesome 5 Icons: https://www.youtube.com/watch?v=rXiO4bm2Zpc Typing Effect with HTML, CSS and JavaScript: https://www.youtube.com/watch?v=T4VE_6v9hFs Currency Converter with HTML, CSS and JavaScript: https://www.youtube.com/watch?v=ARBvYDNeNdM&list=PLdGqEpyfYoMCSMLcavLm4BmTiZoBnme-O Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below! Codepen: https://codepen.io/Coding_Journey/ Twitter: https://twitter.com/CodingJrney Email: [email protected] Subscribe 💖 https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Marquee-like Content Scrolling (HTML & CSS)"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Marquee-like Content Scrolling (HTML & CSS)" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Marquee-like Content Scrolling (HTML & CSS)"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Marquee-like Content Scrolling (HTML & CSS)" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Marquee-like Content Scrolling (HTML & CSS)"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Marquee-like Content Scrolling (HTML & CSS)"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.