html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Объединение CSS-анимации и JavaScript

 Четыре с половиной года назад CSS переходы были впервые введены в WebKit, и три года, как к ним присоединилась анимация по ключевым кадрам CSS. В настоящее время они приближаются к переломному моменту реализации в браузерах — на данный момент поддерживаются в Chrome, Safari и Firefox, а значит, стали доступными для 50-60 процентов веб-пользователей, и скоро появятся в Опере 12 и Internet Explorer 10 . CSS анимации и CSS переходам в последнее время уделяют очень много внимания, поэтому в этой статье   мы увидим, как CSS анимацию можно объединить с обработчиками событий JavaScript, что значительно увеличивает возможности анимации. Это будем делать путем создания простого многоярусного слайд-шоу, которое показывает переходы между набором выбранных изображений.

В конце этого года выйдет Internet Explorer 10, который должен стать большим толчком для освоения CSS анимации.

Давайте с самого начала уточним, что для того, чтобы  показать, как можно объединить CSS-анимацию и события JavaScript,  мы будем использовать карусель MacGuffin. Конечно, существуют другие способы создания слайд-шоу, которые являются лучшими, но они не смогут отобразить, как применять анимацию событий.

Разметка 

Основная разметка является достаточно простой. Это блок DIV с двумя дочерними элементами IMG, каждый из которых имеет свой уникальный класс:

<div class="holder">
<img class="img-1" src="kitten-1.jpg">
<img class="img-2" src="kitten-2.jpg">
</div>
Для управления слайд-шоу используется  упорядоченный список четырех элементов, каждый из которых имеет атрибут data, значение которого является названием одного из четырех файлов изображений, которые будут использовать в примере:
.holder { position: relative; }
.holder img {
bottom: 0;
left: 0;
position: absolute;
}
img.img-1 { z-index: 8; } img.img-2 { z-index: 7; }

Как вы обратили внимание, эта разметка находится не в HTML файле. Для удобства она позже будет добавлена с помощью скрипта. Эти два блока разметки содержат всю информацию, которая нужна, чтобы создать сценарий, но сначала нужно задать им стили.

CSS переходы были введены еще в октябре 2007 года и объявлены на блоге Surfin 'Safari WebKit.

Стили

Для начала, два элемента изображений должны быть позиционированы в той же точке внутри своих родителей. Чтобы img-1 появлялся перед img-2, ему присваивается высший z-index.

.holder { position: relative; }
.holder img {
bottom: 0;
left: 0;
position: absolute;
}
img.img-1 { z-index: 8; } img.img-2 { z-index: 7; }

Для того, чтобы элементы img появлялись слайдами, к  img-2 применяются CSS преобразования, которые позволяют немного уменьшить  его  и переместить  немного выше  img-1. К нему также применяется переход, о котором речь будет идти немного ниже.

img.img-2 {
transform: scale(0.96) translateY(-3.6%);
transition: all 500ms ease-out;
}
Наконец, создаем ключевой кадр анимации, который называем  upndown. С помощью него слайд img-2  будет размещаться за слайдом img-1.

@keyframes upndown {

50% { transform: scale(1) translateY(-120%); }
to {
transform: none;
z-index: 9;
}
}

Вы видите, что из отправной точки он будет сдвигаться на 120% вверх и  возвращаться обратно, увеличивая z-index до 9После того, как мы создали ключевые кадры, называем их .img-2.stage-1. 

Разметка и стили были прописаны, поэтому теперь можно перейти к JavaScript.

Опера 12 включает поддержку CSS анимаций, что предоставит ряд новых возможностей мобильным устройствам.

Сценарии JavaScript

В моем документе используются три файла JavaScript:

Первый, JQuery, объяснять не нужно. Следующий файл пользовательской сборки Modernizr , который обеспечивает поддержку CSS анимации и переходов.

В третьем файле, мы будем создавать ​​собственный сценарий, о котором и пойдет речь.

Modernizr определяет  возможности браузера по CSS анимации и переходам

Первый шаг заключается в инициировании JQuery с  ready() методом и  с помощью Modernizr проверить, может ли браузер поддерживать пример. 

$(document).ready(function(){
if(Modernizr.cssanimations && Modernizr.csstransitions) {
// Run our script
} else {
// Do something else
});

Следующим шагом будет создание нескольких переменных: holder , который является DOM(document object mode) для нашего элемента-контейнера .holder, в то время как controls содержит все разметку для элементов управления, которые были продемонстрированы ранее.  (в разделе «Разметка»):

 

После переменных нужно определить  функции: swapStage1 , swapStage2 и swapStage3. К каждой из них будет написано ниже. Вместе с глобальными переменными и определенными функциями, определенных, вставляем управление разметкой  controls после контейнера элементов holder. 

holder.after(controls);

Пришло время создать первый слушатель событий, который  будет вызывать функцию swapStage1 при нажатии любого элемент из списка.

$('#trigger').on('click','li:not(.active)',swapStage1);

Вот вся функция swapStage1:

Функция swapStage1 ( электронной ) {
$ ( e.currentTarget ) . AddClass ( «активный» ) братья и сестры. ( ) removeClass. ( «активный» ) ;
VAR img2data = $ ( e.currentTarget ) данных. ( 'IMG' ) ;
holder.find ( "img.img-2» ) . Attr ( "SRC" , img2data + 'JPG. ) AddClass. ( "стадия-1" ) ; }

 

Во-первых, это добавит класс active только к элементу списка, по которому щелкают, но что еще более важно, чтобы не вызывать конфликты в сценарии, устанавливает блокировку второго клика.

Далее получает значение атрибута от элемента data-img ( по которому щелкают) и изменяет значение атрибута href в .img-2, это позволяет изменить изображение.

Наконец, добавляется класс  stage-1 в .img-2., где в игру вступаю события нашей CSS-анимации.

События CSS-анимации

Когда в .img-2 уже добавлен класс stage-1, запускаются ключевые кадры анимации, которые называются  upndown. Это, как вы помните, позволяет подняться ему вверх, а потом снова опуститься перед элементом .img-1. Когда анимация завершена, запускается событие под названием animationend. В нашем сценарии есть обработчик событий, созданный для перелистывания.

holder.on ( "animationend ' , 'img.img-2.stage-1 " , swapStage2 ) ;

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

holder.on('animationend MSAnimationend oanimationend webkitAnimationEnd', 'img.img-2.stage-1', swapStage2);

Несмотря на то, функции swapStage2 вызывается, когда анимация upndown завершена. Сразу становится видно, что это очень полезный способ объединить анимации. 

В сценарии swapStage2 классы элементов: .img-1 становятся классами .img-2 и наоборот — а также добавляет stage-2 для .img-2.

Вот функции в полном объеме:

function swapStage2(e) {
var screen1 = holder.find('img.img-1');
var screen2 = holder.find('img.img-2');
screen1.attr('class','img-2 stage-2');
screen2.attr('class','img-1');
$('#trigger li.active').removeClass('rotate');
}

Проигнорируем последнее правило. Мы заинтересованы в подмене классов, поскольку элементы  img поменяли свои позиции, и был добавлен stage-2 в .img-2. 

Нужно помнить, что при создании нашего CSS, переходы .img-2 применяются к .img-1. Это происходит, когда элемент меняет свое положение. При завершении перехода, срабатывает еще одно событие.

holder.on ( "transitionend ' , 'img.img-2.stage-2 " , swapStage3 ) ;

Это работает так же, как и animationend , но с переходом CSS, поэтому, когда элемент возвращается обратно в стек, переход завершается, и вызывается функция swapStage3 .

 Опять же, вы можете наблюдать, как достаточно легко реализуются цепочки различных типов анимации CSS. 

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

5

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции