Вход Регистрация
*— обязательные для заполнения поля
Войти через социальные сети

CSS3 Animation Cheat Sheet - шпаргалка по CSS3 анимации

CSS3 Animation Cheat Sheet - представляет собой набор готовых анимаций в одном файле .css, просто подключаемый к веб-проекту. Все, что вам нужно сделать, это добавить таблицу стилей на ваш сайт и применить готовые классы анимаций CSS для элементов, которые вы хотите анимировать.

CSS3 Animation Cheat Sheet использует CSS3 @keyframes и работает во всех последних браузерах ( даже в IE 10). Используя CSS3 @keyframes, вам не придется беспокоиться о позиционировании элемента для размещения анимации - это будет анимировано на месте. Кроме того, для пользователей со старыми браузерами , анимированный элемент будет виден и на своем месте, даже если анимация не срабатывает.
Ниже приведены инструкции о том, как начать работу.

  1. Скачайте файл стилей с анимациями;
  2. Подключите скачанный файл стилей между тегами <head>...</head> веб-страницы;

    <link rel="stylesheet" href="css/animations.css">

  3. Добавьте класс анимации из файла стилей к тому элементу, который нужно анимировать;

    <div id="object" class="slideUp">

  4. Для срабатывания анимации, вам нужно сделать их невидимыми, добавив свойство visibility: hidden для анимированных элементов:
    #object{ background-color: #fe5652; visibility: hidden; }
По умолчанию анимации сработают сразу при загрузке страницы - даже если элемент в нижней части страницы, но с помощью JQuery есть много способов для активирования анимации в заданное время.
Узнайте, как можно использовать эти анимации на вашем сайте.

Добавление эффектов используя библиотеку JQuery

  1. Подключите jQuery между тегами <head>...</head> веб-страницы;

    <script src="http://code.jquery.com/jquery-1.10.1.min.js">

  2. Добавить это код перед закрывающим тегом </body> для запуска анимации, когда пользователь прокручивает страницу к элементу:
    <script>
        $(window).scroll(function () {
            $('#animatedElement').each(function () {
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow + 400) {
                    $(this).addClass("slideUp");
                }
            });
        });
    </script>
    #animatedElement - замените на свой элемент, который нужно анимировать.
    slideUp - замените на класс анимации из файла стилей.

  3. Добавить это код перед закрывающим тегом </body> для запуска анимации, когда пользователь нажимает на элемент:
    <script>
        $('#animatedElement').click(function() {
            $(this).addClass("slideUp");
        });
    </script>

Комментарии
Авторизуйтесь, чтобы оставлять комментарии
ЗОЖ
Комментарии
Последние комментарии
Извините за беспокойство сама уже нашла в чем причина.
Здравствуйте! Подскажите, пожалуйста, как исправить ошибку при нажатии на кнопку &quot;оставить ...
Спасибо большое - уже решил вопрос. Открыл бекап дамп базы mysql в notepad++ и в именно той строке ...
Не знаю, смотрите фильтры, условия, тип цен, крон должен выполнять файл, бывают ситуации, когда крон...
Можно восстановить только БД из бэкапа и вытащить из нее любые данные, в файлах хранятся только испо...
Можно идиотский вопрос ? Сам дурак удалил несколько адресов из списка адресов модуля Email-маркетин...
Добрый день! Не могу сделать выгрузку фида для Google Merchant. Пишет 0 товаров при выгрузке: http:/...
Подписка
Выберите рассылку