【BiliBili Autumn】 Эффект глубины резкости изображения головы

CSS
【BiliBili Autumn】 Эффект глубины резкости изображения головы

Привет, меня зовут Стивен.

В этом выпуске мы расскажем, как добитьсяБилиБили ОсеньЭффект верхнего изображения баннера, когда курсор перемещается, с движением влево и вправо, будет эффект глубины резкости и фокуса.

Видеоверсия этого урока находится по адресуЭй, пропорция ratio.com/video/bv1nz...Добро пожаловать три подряд внимание!

часть HTML

Откройте редактор CodePen и добавьте<header>ярлык, а затем добавить шесть<div>,Каждый<div>

Все эти шесть изображений взяты из BiliBili, авторские права на изображения принадлежат BiliBili, и они используются только в учебных целях.

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

Разделы CSS

В CSS сначала добавьтеbodyселектор, наборmarginдля0.

Присоединяйсяheaderселектор, высота установлена ​​на160px,positionустановить какrelative,overflowустановить какhidden. Затем поместите шестерку внутрь<div>пересекаться, соединятьсяheader > divСелектор,positionдаabsolute,topа такжеleftустановить как0, ширина и высота установлены на100%.

Я хочу центрировать изображения внутри, вверх и вниз, влево и вправо и добавитьdisplay: flex,justify-contentа такжеalign-itemsустановить какcenter, Это оно.

воссоединитьсяheader > div > imgселектор, чтобы установить стиль изображения.displayустановить какblock, ширина установлена ​​на110%, т.к. картинка будет двигаться влево-вправо позже, во избежание износа, поэтому ширину надо немного увеличить, а высоту поставить на100%,Присоединяйсяobject-fit: cover, заполняет контейнер пропорционально изображению.

Установить переменную CSS

Стиль установлен, мы должны зарезервировать две переменные CSS, переместить изображение влево и вправо и настроить нечеткость.

Присоединяйсяtransform: translatex(), заданное значениеvar(--offset),так же какfilter: blur(var(--blur)). Затем мы с помощью JavaScript установим--offsetа также--blurзначение для достижения эффекта анимации.

можно установить сначала--offsetЗначение по умолчанию0px,а также--blurЗначение по умолчанию2px.

часть JavaScript

Перейдите к части JavaScript, сначала определите константуimages, чтобы вернуть все картинки.

затем вheaderтам, присоединяйтесьaddEventListenerмониторmousemoveСобытие перемещения курсора. Сначала, чтобы рассчитать процент движения, определите переменнуюpercentage,Будуe.clientXПоделить наwindow.outerWidthЧтобы при перемещении ползунка влево0, при перемещении в крайнее правое положение1. затем определите переменнуюoffset, определяет расстояние положения многослойного изображения, помимо расстояния перемещения есть еще и размытость, а затем эти значения применяются к изображениям каждого слоя.

присоединиться первымfor ofВернуться назад, получить все фотографии, а затемoffset *= 1.3, то есть чем позже картинка, тем больше будет смещение. Затем вычислите значение многоуровневой неоднозначности, именно здесь я трачу больше всего времени на размышления о том, как это сделать, потому что...В средней школе не учили математику.

Что нам нужно сделать здесь, так это то, что, когда курсор находится в середине, 3-й и 4-й слой изображения имеют наименьшее размытие, которое близко к0, при этом 2-я и 5-я картинки имеют большую размытость, а 1-я и 6-я картинки имеют наибольшую размытость, а когда курсор находится справа, 6-я картинка имеет наибольшую размытость.0, чем левее изображения, тем сильнее размытие.

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

y = x^2 * 20Вероятно, именно этого эффекта мы и хотим добиться, поэтому оказывается, что изучение математики очень важно.

Вернуться сюда, определение переменныхblurValue,Будуindex / images.lengthминусpercentageкак в формулеx, затем умножить на2мощность, умножить наblur, то есть20.

Наконец, поsetProperty(), установите значения смещения и размытия на--offsetа также--blurэти две переменные CSS.

Давайте посмотрим на завершенный эффект этого случая

Кстати версия БилиБили тоже имеет эффект, то есть она может моргать, принцип тоже очень простой, подготовили несколько фоток процесса мигания, просто пользуйтесьsetInterval()а такжеsetTimeout()Достаточно регулярно преобразовать картинку, и я не буду вводить это здесь.

Выше все готово, чтобы представить содержимое этого.

Исходный код для этого случая находится накод спрей.IO/стивен класс/боюсь...

Ваша поддержка-моя мотивация, пожалуйста, обратите вниманиеМинимальный класс CodingStartup, давайте работать вместе!

Категории