На прошлом уроке мы сделали вот такой смайлик, ДЗ было — вставить ему полон рот разнокалиберных и разноцветных зубов. Пришел черед регулировать их длину, цвет и выпадение.
Для начала скачайте этот зип-файл:
Распакуйте его, откройте все файлы в текстовом редакторе.
Любую анимацию можно легко осуществить ява-скриптами, в нашем случае мы будем пользоваться популярной библиотекой 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, которые переписывает цвет зуба на желтый. Всю динамику можно проследить через инспектор.
До клика:
После клика:
Домашнее задание!
Осталась пара зубов. Пусть розовый улетит наверх, а зеленый поменяет цвет на красный И при этом станет в два раза шире.
Если что — вопросы в комментариях! Хтмл разметка, к сожалению, в комментах не проходит, так что пытайтесь как-то объяснить словами )
не понимаю, почему переименовывая в цсс .tooth в .tooth.first какая-то жопа получается, а оставляя .tooth все ок. Получается непонятно тогда, откуда js берет .tooth.first если у меня там tooth. из хтмла чтоли? непонятно
ну да, там же в самом начале урока я пишу — добавляем класс first: «в smile.html я дописала первому зубу класс first, чтобы мы могли подцепиться именно к нему. Если мы будем писать действие к tooth, то оно повлияет на все зубы, ведь класс tooth является для них общим.» И далее принтскрин. Джсник конечно берет все из хтмл-а, для него документ — это поле битвы )) В джс ты можешь обратится к любому элементу страницы через его класс, айди или просто тег, и дать этому элементу задание — на загрузку страницы, на ресайз, на клик по кнопке и т.п.
и почему именно -500? а вдруг в другом браузере -500 это пол-экрана и зуб повиснет где-нить на лице))
1. Пиксели в своих размерах конечно меняются, но не в зависимости от браузера, а в зависимости от экрана. Например, на телефонах с экраном ретина (технология такая) пиксели мельче почти в 2 раза, так что вопрос правомерный. Для начала запомни, что в браузерах во всех пиксель одинаковый, потому что это единица монитора, а не браузера. И есть стандарты определенные. Вернемся к телефонам и десктопам. Обычно мы конечно не ставим значения в пикселях, и задачи у нас более прикладные. Например, есть вкладка, которая выезжает справа из-за экрана. Например, зайди сюда: http://self.digiproduct.co.il/home/projects, у тебя вкладка уже открыта, нажми крестик — она уедет направо за экран. Мы совершенно никак не можем узнать — на какую величину должна уехать вкладка — могут быть разные ширины экранов, тогда даже ширина вкладки будет разная (она у меня в процентах от ширины экрана). Не буду вдаваться в адские подробности, опишу принцип. В джиквери можно вытащить ширину экрана, на котором юзер открыл сайт. Берем эту ширину за основу (причем джиквери также эту ширину динамически вытаскивает на ресайз, то есть чувак к примеру крутит телефон то горизонтально, то вертикально, джс тут же считывает все имзенения и дает мне эту ширину). И дальше я просто пишу — на клик на кнопку «закрыть» (крестик справа) задвинуть эту выпадашку на МИНУС ШИРИНА ЭКРАНА в квадрате, чтобы уже надежно. Если ширина экрана 2000 пкс, то выпадашка уедет вправо на 4000 пикселей, если ширина 400 пкс (телефон), то на 800 пкс. Минус — так как чтобы уехала за пределы экрана, координата right должна быть отрицательной. Как отрицательный маргин, когда рот нужно было затянуть влево на половину его ширины.
и почему, добавляя класс (еллоу) он пишется без точки? это же класс, а не переменная..
смотря, куда ты добавляешь. Любой класс, который ты пишешь в хтмл — он пишется без точки. Эти же классы в цсс и в джс пишутся через точки. Но если ты имеешь в виду функцию $(this).addClass(‘red’), то тут без точки, просто такие правила правописания, это нужно запомнить как то, что перед «что» ставим запятую )))
Слушай, это же был отличный вопрос! Я сама только сейчас допетрила, почему так. Мы же через джс класс добавляем в HTML! а в хтмл классы без точек, потому мы и пишем $(this).addClass(‘red’), если бы мы поставили $(this).addClass(‘.red’), то в хтмл он бы написался так div class=»tooth .red», а это неправильно!