Приветствую Вас, Гость! Регистрация RSS

Среда, 22.01.2020
  
Главная » Файлы » Скрипты+Программы » Скрипты для Ucoz





Анимации CSS являются замечательным инструментом в руках веб дизайнера. С их помощью можно создавать практически любые чудеса в окне веб браузера. Есть пара "но". Первое "но" - создание анимаций часто связано с использованием пустых элементов div, что выходит за рамки семантичности кода HTML. Второе "но" - не все браузеры поддерживают анимации. И пользователи таких программ видят перед собой пустое окно вместо великолепной динамической картины.

Но что если в пустом элементе div размещать описание для тех пользователей, которые не могут позволить себе пользоваться последними версиями модных браузеров. Такое использование будет очень похоже на применение тега alt для изображений.

ДЕМО

Сделаем анимацию восхода луны и темнеющей земли.

Code

<div class="moon">
  Луна восходит.
</div>

<div class="ground">
  И освещает землю.
</div>


CSS скрывает текст и вызывает анимации:

Code

.ground, .moon {
  text-indent: -9999px;
  overflow: hidden; /* text-indent без данного свойства может привести к рваным анимациямы */
}

.ground {
  -webkit-animation: ground-to-black 5s ease;
  -moz-animation: ground-to-black 5s ease;
  -ms-animation: ground-to-black 5s ease;
}

.moon {
  -webkit-animation: rising-moon 5s ease;
  -moz-animation: rising-moon 5s ease;
  -ms-animation: rising-moon 5s ease;
}

/* Далее следует определение кадров */


Вместо текста можно использовать что-то еще, связанное с темой анимации.
Например, элемент audio.
Затем можно использовать JavaScript для определения возможностей браузера и позиционирования текста, если потребуется.

Материал подготовил: Bizon

Перевел: Сергей Фастунов

Автор\Источник: http://css-tricks.com/semantic-animation/
Категория: Скрипты для Ucoz | Добавил: bizon | Теги: анимация, null, Семантическая
Просмотров: 1336 | Загрузок: 0 | Рейтинг: 1.0/6 | |

Новости по теме:

Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML

  • Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Гость