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

Для начала скачайте этот зип-файл:

smile

Распакуйте его, откройте все файлы в текстовом редакторе.

Любую анимацию можно легко осуществить ява-скриптами, в нашем случае мы будем пользоваться популярной библиотекой jQuery.

Для этого нам необходимо ее сначала ВКЛЮЧИТЬ в индексный файл, добавляем до закрывающего </head>:

<script type=»text/javascript» src=»js/jquery-2.1.1.min.js»></script>

Теперь добавим таким же способом свой ява-скриптик:

<script type=»text/javascript» src=»js/my_scripts.js»></script>

(Внимание — в архиве уже все включено!)

Заглянем в наш my_scripts.js — именно в него мы будем писать код.

Для начала — не пугайтесь — сохраните себе эту «рыбу» (шаблон) куда-нибудь для последующего использования. Эта конструкция позволяет потом включать свои скрипты в Вордпресс.

Обычно для активации jQuery используют другой шаблон:

$( document ).ready(function() {
    
    функции, которые активируются на загрузку документа

});

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

// функции, которые активируются на загрузку документа

Кстати, я оставила вам 2 вида комментариев в ява-скрипт-документах. Первый способ — поставить два слэша (//) и написать что-то после этой отбивки. Комментарий будет выделен цветом в вашем редакторе.

Но иногда комментарии очень длинные, либо вам нужно закомментировать целый блок кода, чтобы временно отключить его. Для этого используются слэш+звездочка на открытие комментария, а потом звездочка+слэш на закрытие:

/* ваш комментарий */

Да, еще один момент, в smile.html я дописала первому зубу класс first, чтобы мы могли подцепиться именно к нему. Если мы будем писать действие к tooth, то оно повлияет на все зубы, ведь класс tooth является для них общим.

После этого открфли наш ява-скрипт, перепрыгнули на новый абзац после комментария (чтобы ваш код не стал частью комментария) и пишем код:

$('.tooth.first').click(function(){
    $(this).animate({'height' : '80px'})
});

Разбираем наш ява-скрипт:

Ко всем элементам html-документа нужно обращаться через знак доллара, то есть, чтобы подцепиться к .tooth.first, мы пишем:

$(‘.tooth.first’)

знак доллара, скобки — внутри кавычки — внутри классы в таком же виде, как в документе цсс.

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

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

В ява-скриптах все действия присоединяются к элементам и друг к другу через точки, то есть мы просто ставим после $(‘.tooth.first’) точку и добавляем действие — click. Переводится как:

$(‘зуб.первый’).на_клик(функция(){

})

Тоже не обязательно запоминать пока правописание, но на всякий случай — функции объявляются сами по себе так:

function(){

    тут то, что она делает

}

Так как мы ставим функцию как действие на клик, то мы помещаем ее в скобки:

click(function(){

    тут то, что она делает

});

Поэтому в конце у нас не просто закрывающая фигурная скобка, а двойная вот такая:

});

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

$(this).animate({‘height’ : ’80px’})

Тут мы видим слово this, оно переводится как «это», «этот». То есть мы же находимся сейчас внутри первого зуба? Значит мы спокойно можем изнутри указать — ЭТОТ. Вот как раз и использование переменной вместо названия, поэтому вокруг this нет кавычек. И его запросто можно заменить на знакомое нам ‘.tooth.first’:

$(‘.tooth.first’).animate({‘height’ : ’80px’})

animate — это, как вы догадались, значит АНИМИРОВАТЬ. Мы в очередной раз после элемента ставим точку и цепляем действие «анимировать», опять открваем скобки, но на сей раз мы вставляем не функцию, а параметры, по которым должна пройти анимация. А именно — высота: 80px.

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

Надеюсь, понятно, что мы тут понаписали:

на клик на зуб — проанимировать его высоту с текущей до 80 пикселей.

Теперь откройте свой смайл в браузере (или обновите) и кликните не белый зуб (второй слева) — он вырос!

Развлекаемся дальше, скопипастите себе:

$('.tooth.second').click(function(){
    $(this).animate({'top' : '500px'})
});

Что мы видим?

$(‘.зуб.второй’).на_клик(функция(){

    $(этот).анимировать({‘верхняя координата’ : ‘500 пикселей’})

});

Обновите страницу, кликните на серый — он выпал! Так как мы проанимировали его координату top — увеличили отступ сверху до 500 пикселей.

Ну а теперь я хочу изменить цвет зуба на желтый. К сожалению, конструкция:

$('.tooth.second').click(function(){
    $(this).animate({'background-color' : 'yellow'})
});

НЕ РАБОТАЕТ!

Ява-скрипт не поддерживает анимированное изменение цветов. Тогда мы придумаем, как сделать это по-другому. В CSS3 есть возможность производить анимацию. Это делается через присвоение или отключение классов, и на изменение состояния.

Например, рассмотрим знакомый нам линк.

<a href="">bla</a>

Вставьте его куда-нибудь в smile.html. В css, чтобы указать цвет для ссылки, мы пишем:

a{
    color: black;
}

Чтобы при наведении мыши на ссылку менялся ее цвет, мы обычно пишем:

a:hover{
    color: red;
}

Но этот цвет меняется резко, что если мы хотим плавнй переход? Вставляем в a{ } следующий блок:

-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;

Все три строки отвечают за одно и то же, но для разных браузеров. Тоже пользуйтесь копи-пастой, главное, чтобы после кавычек были одинаковые значения (кроме некоторых исключений, когда разным браузерам значения присваиваются через разные стили, информация по этому поводу всегда предоставлена в онлайн-уроках, то есть вы будете и дальше просто копипастить готовые коды).

Главное слово здесь — transition, котрое переводится как «переход». То есть мы пишем: переход: всё 0,3 секунды. В английском языке десятичные отделяются точками, а тысячи — запятыми, в русском все наоборот. Поэтому здесь мы пишем .3s, что равно 0.3s, или, по-русски — 0,3 сек.

All — все — отвечает за то, что трехсекундные переход будет использован для любых типов анимации — на изменение цвета, размера, положения и т.п. Когда нам нужно выделить какой-то один тип анимации, мы укажем вместо all например width.

Ну, короче, вставили этот блок, целиком в css у вас добавится:

a{
color: black;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
a:hover{
color: red;
}

Теперь обновите свой смайл в браузере, наведите мышь на линк bla — он плавно изменит цвет с черного на красный.

Запомните! transition нужно ставить в ‘a’, НЕ в ‘a:hover’, хотя логически кажется, что должно быть наоборот, ведь анимация происходит на ховер.

Как же нам применить это замечательное свойство css к зубу, чтобы он также менял плавно цвет на клик?

Вставляем этот же css transition в пятый зуб, чтобы получилось:

.tooth.five{
background-color: #0FF;
width: 30px;
height: 30px;
left: 10%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

То есть присваиваем пятому зубу свойство менять плавно свои состояния.

Теперь добавим к пятому зубу класс yellow, который сделает наш зуб желтым:

.tooth.five.yellow{
background-color: yellow;
}

Если в хтмл-файле вы добавите yellow к пятому зубу, чтобы было вот так:

<div class="tooth five yellow">
</div>

обновите страницу, то увидите, что зуб стал желтым.

И вот сейчас время для самого фокуса. Уберите yellow из хтмл (верните как было, Ctrl+Z)

Открываем наш ява-скрипт файл и дописываем после всех зубов:

$('.tooth.five').click(function(){
    $(this).addClass('yellow')
});

То есть получаем:

$(‘.зуб.пятый’).на_клик(функция(){

    $(этот).добавитьКласс(‘жёлтый’)

});

Обновим smile.html в браузере и кликнем на голубой зуб. Аллилуйя! Он медленно пожелтел.

Если хотите, чтобы желтел еще медленнее — меняйте количество секунд в css:

-webkit-transition: all 3s;
-moz-transition: all 3s;
transition: all 3s;

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

Надеюсь, все понятно? Мы добавили пятому зубу свойство transition, динамически с помощью ява-скрипта на клик добавляем к пятому зубу класс yellow, которые переписывает цвет зуба на желтый. Всю динамику можно проследить через инспектор.

До клика:

После клика:

Домашнее задание!

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

Если что — вопросы в комментариях! Хтмл разметка, к сожалению, в комментах не проходит, так что пытайтесь как-то объяснить словами )