Привет, меня зовут Стивен.
В этом выпуске мы сделаем несколько причудливых спецэффектов, которые имитируют эффект увеличения значка Dock в macOS:
Если просто увеличивать иконку за иконкой, то это на самом деле не сложно. Однако наш стиль заключается в том, чтобы делать это достаточно осторожно. Когда курсор перемещается влево и вправо по одному и тому же значку, это влияет на размер значков слева и справа для достижения очень последовательного эффекта. В этом сложность этого времени. . . .
Хорошо, так что давайте начнем.
Видеоверсия этого урока находится по адресувооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поДобро пожаловать три подряд внимание!
часть HTML
Откройте редактор CodePen, добавьте несколько значков в часть HTML, здесь я буду использовать смайлики Emoji для представления, добавьте<ul>метка списка,classустановить какdock, затем используйте<li>Возьмите каждый смайлик и наложите на него слой<div>, классglass.
Разделы CSS
Затем часть CSS, добавьтеhtmlселектор, чтобы установить базовый размер текста на15px. Присоединяйсяbodyселектор, будетmarginиpaddingустановить как0,displayустановить какflex, ширина установлена на100%,min-heightМинимальная высота установлена на100vh,overflowустановить какhidden.
а затем поместите его внизу страницы,align-itemsустановить какflex-end.
Присоединяйся.glassселектор с шириной, установленной на100%, высота установлена на8rem, затем установите светло-серый цвет фона,displayустановить какflex,justify-contentустановить какcenter.
Присоединяйся.dockселектор, центрирование значков и их расположение по горизонтали,list-styleСтиль списка настроен наnone,marginиpaddingустановить как0,displayустановить какflex,justify-contentиalign-itemsустановить какcenter.
Затем установите стиль значка и добавьте.dock liСелектор, поскольку здесь используется эмодзи, его можно установить, установивfont-sizeчтобы изменить его размер,font-sizeустановить как6rem. затем добавьте немногоpadding, левый и правый настроены на0.5rem,cursorСтиль курсора установлен наdefaultЭто стрелка по умолчанию.
Что ж, часть стиля почти такая же, следующим шагом будет реализация части со спецэффектами.
Принципы анимации
Во-первых, давайте разберемся в принципе этого эффекта, например, когда мы подводим курсор к четвертому значку, он увеличивается. Кроме того, третья и пятая иконки рядом с ней немного увеличены, а при расположении курсора влево третья иконка увеличивается чуть больше, чем пятая, и наоборот.
Поэтому нам нужно знать, находится ли курсор слева, посередине или справа, когда курсор находится на значке.
часть JavaScript
Перейдите к части JavaScript, сначала используйтеquerySelectorAll()положить все.dock liВернись. Затем пройдите цикл, для каждогоliПрисоединяйсяmousemoveпрослушиватель событий.
определить переменнуюitem, назначенный какe.target, так как он будет упоминаться несколько раз позже. Тогда вам нужно знать, где значокliШирину контейнера определяем переменнойitemRect, назначенный какitem.getBoundingClientRect().
Затем нужно вычислить положение курсора на иконке и определить переменнуюoffset, назначенный какe.clientXминусitemRect.left, поскольку оно может быть отрицательным, положимMath.abs(), затем разделите наitemRect.width.
Теперь, когда курсор перемещается влево от значка,offsetподойдет0, при движении вправоoffsetподойдет1.
С этим значением мы можем рассчитать увеличение значка. Определите две переменные, которыеprevиnext,пройти черезpreviousElementSiblingа такжеnextElementSiblingПолучить значок, где находится текущий курсор, предыдущий и следующийliэлемент.
определить другую переменнуюscale, если я хочу, чтобы значок был самым большим1.6раз, он назначается как0.6.
Затем рассчитывается коэффициент увеличения и записывается в переменную CSS соответствующего элемента. в обстановкеprevРаньше вы должны сначала судить, можете ли вы его получить, потому что, когда курсор находится на первом значке,prevбыло быnull. затем пройтиsetProperty(), установите коэффициент масштабирования в переменную CSS, я бы установил его равным1плюсscaleумножить наMath.abs(offset - 1),offset - 1потому что элемент слева теперь устанавливается, поэтомуoffsetЗначение противоположно, т.0к1изменить на1к0.
Затем используйте ту же логику, чтобы установить коэффициент увеличения элемента справа, разница в том, что здесьoffsetЕго можно использовать напрямую, и для текущего значка он напрямую установлен на1 + scaleявляется максимальным значением.
определить сброс--scaleфункция с именемresetScale(), положить всеliиз--scaleсбросить на1.
Всего есть два места, где эта функция должна выполняться, а именно вmousemoveсобытие, и когда курсор покидает Dock. новыйmouseleaveпрослушиватель событий и выполнитьresetScale(), Это оно.
С помощью инструментов разработчика взгляните--scaleПеремена:
Во время движения курсора за пределами диапазонаliиз--scaleсбросить на1, а когда курсор покидает Dock, всеliиз--scaleсбрасываются на1.
последний шаг
Ну, вот и мы, мы всего в одном шаге.
Вернувшись в раздел CSS, измените настройку размера текста на6remумножить наvar(--scale), потому что это включает в себя операции, поэтому поместите слойcalc().
существует.dockИнициализация селектора--scaleза1. есть тест:
Эффект увеличения достигается, но позиционирование немного проблематично. Это не сложно решить, т.positionустановить какrelative. затем вычислитьtopСмещение относительно увеличенной иконки в порядке. добавить еще немногоtransitionНастройки перехода анимации.
Кстати, давайте сделаем эффект нажатия на иконку с последующей ее загрузкой.Если вам интересно, сделайте паузу на некоторое время и попробуйте реализовать это самостоятельно.
Здесь также очень просто, определить вызываемыйloadingнастройки анимации черезtranslateY()Переместите его вверх и вниз, затем присоединитесь.dock li.loadingселектор, то есть когдаliимеютloadingПри вызове этого класса анимация выполняется и повторяется бесконечно.
Перейдите в раздел JavaScript, добавьтеliПрослушиватель событий щелчка, а затем добавьте целевой элементloadingэтоclassВот и все.
Давайте посмотрим на завершенный эффект этого случая
Выше приведено все содержание, которое будет представлено в этом выпуске.
Исходный код для этого случая находится накод спрей.IO/стивен класс/боюсь...
Ваша поддержка-моя мотивация, пожалуйста, обратите вниманиеМинимальный класс CodingStartup, давайте работать вместе!
- Станция Б:space.bilibili.com/451368848
- YouTube: YouTube.com/кодирование начало…
- Самородки:Талант /user/249773…