Выдёргиваем зубы у смайлика с помощью ява-скриптов

smile_teeth

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

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

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 является для них общим.

to1

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

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

to2

 

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

Ко всем элементам 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')
});

to3

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

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

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

});

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

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

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

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

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

До клика:

to4

 

После клика:

 

to5

 

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

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

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



7 thoughts on “Выдёргиваем зубы у смайлика с помощью ява-скриптов”

  • не понимаю, почему переименовывая в цсс .tooth в .tooth.first какая-то жопа получается, а оставляя .tooth все ок. Получается непонятно тогда, откуда js берет .tooth.first если у меня там tooth. из хтмла чтоли? непонятно

    • ну да, там же в самом начале урока я пишу — добавляем класс first: «в smile.html я дописала первому зубу класс first, чтобы мы могли подцепиться именно к нему. Если мы будем писать действие к tooth, то оно повлияет на все зубы, ведь класс tooth является для них общим.» И далее принтскрин. Джсник конечно берет все из хтмл-а, для него документ — это поле битвы )) В джс ты можешь обратится к любому элементу страницы через его класс, айди или просто тег, и дать этому элементу задание — на загрузку страницы, на ресайз, на клик по кнопке и т.п.

    • 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», а это неправильно!