Простые анимация для сайта html

gif 404

Возможно, вы иногда замечали, как на сайте движется текстовый контент по горизонтали или вертикали, а может даже передвигаются изображения. Выглядит это сложновато, но на самом деле за это отвечает всего лишь один тег языка html <marquee>.

Это не новый элемент и не относиться к html5. Изначально он был создан для Internet Explorer, но спустя время его стали поддерживать и другие браузеры.

Итак, как же создать бегущую строку? На самом деле нужно просто ввести необходимый текст в парном теге <marquee> – и он «побежит». Другое дело, как именно он будет двигаться.

Ниже добавлена таблица с описанием важных атрибутов данного элемента.


Атрибут

Описание

behavior
Указывает способ передвижения контента:
alternate – содержимое двигается между двумя границами, отбиваясь от них;
scroll – объект движется как бы по кругу (появляется с одной стороны, скрывается с другой);
slide – контент проходит весь путь и останавливается.

loop
Определяет сколько раз будет повторяться содержимое описываемого тега. Например, -1 используется для бесконечного повторения.

direction
Устанавливает направление передвижения:
down – движется с верхнего края вниз;
left – от правого края влево;
up – от нижней границы к верхней;
right – слева направо.

scrollamount
Задает пиксельное расстояние между текущим положением объекта и следующим. Влияет на скорость движения. Изначально равен 6.

scrolldelay
Также влияет на скорость «бега», однако за счет частоты обновления. Устанавливает задержку в миллисекундах.

Теперь пришло время опробовать полученные знания на практике. Вставьте ниже представленную программную реализацию бегущих строк в диалоговое окно для кода и запустите в браузере.


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
 .one {
 width:300px;
 height:200px;
 text-shadow: #000 0px 1px 1px;
 color: #6004b5;
 font-size: 110px;
 font-weight: bolder;
 margin-left:30px;
padding-left:25px;
 }
</style>

<marquee class="one" behavior="alternate" direction="down" scrollamount="12">404</marquee>

<marquee direction="right" scrollamount="15""><figure><img src="https://ya-webdesign.com/images/cat-gif-png-6.gif"></figure></marquee>

На странице отобразились две анимации: прыгающая строка и бегущий котик.



Опубликовано 15 апреля, 2019 NeonaFM в категории "HTML коды

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *