Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>18 ноя 2019</li>

3 <li>0</li>

4 </ul>Примерно за полчаса прямо в браузере мы напишем несколько анимаций и виджет аккордеон.

5 vlada_maestro / shutterstock

6 В бэкграунде - программирование, французский язык, академическое рисование, капоэйра. Сейчас учит финский. Любит путешествия и Балтийское море.

7 Во-первых, анимация привлекает внимание: вы скорее заметите движущуюся картинку, чем статичную. Во-вторых, делает взаимодействие с сайтом интереснее для пользователя.

8 Как создать анимацию? Есть язык, который изначально создавался для "оживления" сайтов. Это JavaScript. Именно на нём мы и напишем вместе несколько анимаций. Мы начнём с совсем простых, а закончим одной посложнее и более практически ценной: создадим виджетAccordion(аккордеон). А потом вас ждёт небольшой бонус: сделаем анимацию в CSS3.

9 Для работы нам понадобится библиотека jQuery(откуда её взять - расскажем чуть ниже).

10 Она используется на большинстве сайтов, потому что у неё много плюсов:

11 <ul><li>дружелюбный интерфейс;</li>

12 <li>она решает не только проблему анимаций, но и множество других;</li>

13 <li>работает на всех браузерах;</li>

14 <li>к ней много расширений и плагинов;</li>

15 <li>большое комьюнити (если у вас будут вопросы, то вы быстро найдёте на них ответы).</li>

16 </ul>Сегодня мы будем работать в онлайн-редакторе CodePen. Для этого не придётся ничего устанавливать, достаточно перейти по ссылке<a>CodePen</a>и нажать на кнопкуStart Coding.Если у вас уже есть любимый редактор, вы можете использовать его.

17 У вас откроется рабочее пространство с тремя колонками: HTML, CSS и JS (JavaScript):

18 Теперь нажмём шестерёнку возле JS - на экране появится окошко с настройками. Через строку поиска найдём тамjQuery:

19 После того как мы выбрали jQuery и закрыли настройки, блок под колонками должен стать белым: там и будут показываться анимации.

20 Давайте сделаем блок, который будет реагировать на клик. Для этого сначала определимdivв окошке HTML.

21 Что такоеdiv? Это тег, который группирует другие элементы HTML, объединяет несколько объектов - например, блок новостей. Сейчас у нас это будет просто квадрат. Назовём мы егоbox, а определим вот так:

22 Это всё, что нам сейчас нужно от окошка HTML, и мы можем перейти к следующему - CSS. В нём мы опишем, как же будет выглядеть нашdiv. Пусть это будет красный(red)квадрат со сторонами по 300 пикселей; для этого мы должны задать ширину(width)и высоту(height)такого размера.

23 .box { width: 300px; height: 300px; background: red; }Если вам больше нравятся голубые прямоугольники, то просто увеличьте ширину(или высоту)и измените цвет фона(background)на blue.

24 Теперь мы перейдём в столбикJSи анимируем нашdiv.

25 Сначала мы отметим для JavaScript, с каким именно блоком будем работать, а потом - при каком действии будет происходить анимация и какая:

26 $(".box").on('click', function(){ });<ul><li>$(".box")ищет элемент с классом box;</li>

27 <li>.on ('click'),определяет, когда произойдёт анимация (в нашем случае - при клике);</li>

28 <li>function()описывает саму анимацию - мы напишем эту функцию в фигурных скобках.</li>

29 </ul>Важный момент:мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его какthis.

30 $(".box").on('click', function(){ $(this).hide(); });Мы использовали функциюhide(спрятать),и теперь наш квадрат исчезнет, если на него кликнуть.

31 Есть ещё пара похожих функций: этоslideUp()иfadeOut(). Во всех случаях наш объект исчезнет. В чём же разница?

32 Если мы используемslideUp, то наш квадрат как бы отъедет вверх, а еслиfadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.

33 $(".box").on('click', function(){ $(this).slideUp(); });$(".box").on('click', function(){ $(this).fadeOut(); });Чтобы регулироватьвремя анимации,напишите его в скобках за функцией, вот так:

34 ПОМНИТЕ!

35 Время в JavaScript указывается в миллисекундах, так что 3000 - это на самом деле всего три секунды.

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

37 Например, мы хотим, чтобы при клике наш квадрат расплывался в прямоугольник с шириной 500 пикселей, при этом становился бледнее(в нашем случае - 0,3 от изначальной яркости), и чтобы всё это длилось четыре секунды.

38 Для этого в фигурных скобках за функцией мы зададим ширину(width)500px, а непрозрачность(opacity)- .3. За фигурными скобками напишем время анимации.

39 $(".box").on('click', function(){ $(this).animate({ "width": "500px", "opacity": ".3" }, 4000); })Вот и всё!

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

41 Приступим к работе - начнём опять в окошке HTML. Создадим сам аккордеон, а в нём - классpanel, в котором, в свою очередь, будут два класса:panel-headerи panel-body. На них мы напишем "HTML" и "helllo". Вам не обязательно писать то же самое, можете написать что угодно. Должно получиться вот так:

42 <div class="accordion"> <div class="panel"> <div class="panel-header"> <h1>HTML</h1> </div> <div class="panel-body"> hello </div> </div> </div>Сделаем несколько таких панелек. Для этого просто вставим то же самое(div class="panel" и всё, что под ним)ещё пару раз. У вас должно получиться вот это:

43 <div class="accordion"> <div class="panel"> <div class="panel-header"> <h1>HTML</h1> </div> <div class="panel-body"> helllo </div> </div> <div class="panel"> <div class="panel-header"> <h1>HTML</h1> </div> <div class="panel-body"> helllo </div> </div> <div class="panel"> <div class="panel-header"> <h1>HTML</h1> </div> <div class="panel-body"> helllo </div> </div> </div>Согласитесь, выглядит скудновато? Давайте добавим оформление. Для этого перейдём в окно CSS, определим там размеры нашего аккордеона(width: 450px)и отцентруем его(margin: auto). Теперь сделаем ему рамочку из чёрной линии в пиксель толщиной(border: 1px solid #222)и отступ текста в пять пикселей(padding: 5px). Конечно же, вы можете менять размеры и цвета.

44 .accordion { width: 450px; margin: auto; } .panel { border: 1px solid #222; padding: 5px; }Теперь скроем нижний текст(потом он будет показываться при клике):

45 .panel-body { display: none; }Напоминаем,что мы всё ещё работаем в окошке CSS.

46 А теперь - вишенка на торте! Сделаем так, чтобы наш заголовок подчёркивался, когда мы наводим на него мышку, а курсор превращался в указатель. Поможет нам в этом селекторhover, который обозначает изменения при наведении курсора:

47 .panel-header h1:hover { text-decoration: underline; cursor: pointer; }С оформлением мы закончили и наконец-то дошли до третьего окошка. По той же схеме, по которой мы заставляли квадрат исчезнуть, теперь заставим появиться наш текст.

48 Разница в том, что вместо функцииhideмы в этот раз используемtoggle() - она позволяет переключать состояния. Например, если бы мы использовали show, текст бы просто показывался, а так он открывается при первом клике, а при втором опять прячется.

49 $(".panel-header h1").on('click', function(){ $(".panel-body").toggle(); });Казалось бы, вот и всё, задача выполнена, можно заканчивать? Но всё не так просто. При клике на заголовок открывается не только текст под ним, но и тексты на остальных panel-body, потому что мы не прояснили, какой именно надо показать.

50 Как это исправить? Для начала немного разберёмся в отношениях наших заголовков. Они похожи на семью, где естьродители, дети и братья.В HTML-коде это хорошо видно, давайте посмотрим:

51 Линии красного цвета ведут от родителя к ребёнку, а оранжевые соединяют братьев.

52 Кликаем мы на текст "HTML", родитель(parent)которого -panel-header, а открыть нам надоpanel-body - братаpanel-header.Чтобы найти родителя, достаточно написать.parent, потому что родитель всегда один, зато братьев может быть много, поэтому мы не просто пишем.siblings,но и конкретизируем, какой именно(panel-body).

53 $(".panel-header h1").on('click', function(){ //$(".panel-body").toggle(); $(this).parent().siblings('.panel-body').toggle(); });Теперь наш виджет открывает только текст под тем заголовком, на который мы кликали. То, что получилось, - это базовая, голая версия. Вы можете улучшать этот виджет, изменять его и, конечно же, красиво оформить.

54 В качестве бонуса мы напишем небольшую CSS3-анимацию. Сейчас с помощью CSS можно создать много такого, что раньше можно было сделать только с помощью JavaScript.

55 Однако в этот раз триггером для запуска анимации будет не клик, а наведение курсора на объект.

56 Начнём мы опять с создания квадрата. Пусть в этот раз он будет зелёный:

57 С hoverмы уже знакомы, только добавим командуborder-radius: 50%,которая превратит наш квадрат в круг:

58 .box { width: 250px; height: 250px; background: green; } .box:hover { border-radius: 50%; }Что делать, если мы хотим сделать переход более плавным? Добавим в описание квадрата строчкуtransition:

59 .box { width: 250px; height: 250px; background: green; transition: all .5s; ease 2s; }<ul><li>allзадает параметры, которые мы меняем (ширину, высоту, прозрачность…) - в этом случае мы их не ограничиваем;</li>

60 <li>.5sопределяет время, которое будет длиться переход (полсекунды);</li>

61 <li>easeзадаёт амплитуду действия;</li>

62 <li>2sозначает задержку в две секунды.</li>

63 </ul>ВНИМАНИЕ!

64 В CSS-коде время указывается в секундах!

65 Строкуtransitionможно написать и в нижнем блоке - тогда параметры, написанные в той строке, будут действовать только при анимациях, за которые отвечаетhover. Например, на картинке ниже квадрат секунду подождёт, а потом будет пять секунд округляться. Когда мы отведём мышку, он подождёт две секунды и за полсекунды вернётся в свою привычную квадратную форму.

66 .box { width: 250px; height: 250px; background: green; transition: all .5s; ease 2s; } .box:hover { border-radius: 50%; transition: all .5s; ease 1s; }Если вам хочется добавить движение, вы можете заставить квадрат вращаться командойrotate(360deg).

67 .box:hover { border-radius: 50%; transform: rotate(360deg); }Вот и всё! Вы попробовали работать с библиотекой jQuery, сделали пару простых анимаций в JavaScript, написали виджет-аккордеон и уловили разницу с созданием анимации в CSS3.

68 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>