Эффект прокрутки страницы на iPhone 12 построчно

CSS
Эффект прокрутки страницы на iPhone 12 построчно

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

Продолжая нашу серию статей на официальном сайте Apple, в этом сеансе будет представлен эффект скольжения построчно по мере прокрутки страницы на странице iPhone 12 Pro:

Видеоверсия этого урока находится по адресувооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооДобро пожаловать три подряд внимание!

Здесь также специально указано, что все графические материалы, используемые в этом обучении, получены с веб-сайта Apple, и авторские права на изображения принадлежат Apple.Они используются только в учебных демонстрационных целях.Пожалуйста, не используйте эти изображения в реальной сети. страницы. .

часть HTML

Откройте редактор CodePen и добавьте заголовок в раздел HTML. Поскольку у него есть подзаголовок, я бы использовал<p>этикетка, чтобы держать его. затем добавьте<div>,idпо имениiphone, что добавляет два<div>,idсоответственноhardwareа такжеui;hardwareбудет использоваться для отображения корпуса и рамок iPhone, аuiОтобразится содержимое экрана.

CSS-часть

Давайте сначала определим немного CSS, чтобы у нас было лучшее представление о том, что мы делаем. Присоединяйся:rootселектор, определите некоторые переменные и стили:

  • --device-widthда770px
  • --device-heightда1336px
  • --ui-widthда640px
  • Базовый размер текста15px

тогда присоединяйтесь#iphoneСелектор, наборpositionдаrelative, значения ширины и высоты получаются из переменных.

воссоединиться#hardwareселектор, установка ширины и высоты100%, а затем фоновое изображение, загрузите изображение тела iPhone, чтобы поддерживать экран высокой четкости Retina Display, размер этого изображения в два раза больше, поэтому установитеbackground-size, ширина и высота также равны установленному значению переменной.

Что ж, здесь я хочу представить свойство CSS маски изображения, вы обнаружите, что теперь за круглой рамкой вокруг iPhone есть черный фон:

И я обнаружил, что Apple специально подготовила изображение-маску, которая рисует внешний вид iPhone, заливает его белым цветом, а круглая рамка прозрачна:

мы можем пройтиmask-imageЭто свойство применяет к нему изображение маски. Поскольку это свойство CSS все еще является экспериментальным, добавьте-webkitВерсия префикса, как и фоновое изображение, изображение в два раза больше, поэтому вам также нужно установить размер маски, установитьmask-sizeустановите значение переменной и добавьте-webkitПрефиксная версия.

Теперь вы можете видеть, что маска успешно применена и черный фон iPhone исчез. Что касается того, почему Apple напрямую не устанавливает фон изображений iPhone прозрачным? Я предполагаю, что это для оптимизации размера изображения, потому что прозрачное нижнее изображение должно использовать формат PNG, а емкость такого большого цветного изображения PNG будет намного больше, чем у JPG, поэтому Apple использует высокую степень сжатия. JPG как изображение iPhone, а затем подготовьте одноцветное изображение PNG для маскирования, что действительно может значительно сэкономить пропускную способность сети.

Ок, после введения этого атрибута можно добавитьbodyселектор, установите цвет фона на черный,marginустановить как0, а затем отцентрируйте содержимое страницы вверх, вниз, влево и вправо:

  • displayустановить какflex
  • flex-directionустановить какcolumn
  • justify-contentустановить какcenter
  • align-itemsустановить какcenter
  • min-heightустановить как100vh

шрифт установлен наHelvetica, добавьте ещеpadding, настроить и опустить, чтобы быть4rem, слева и справа есть0.

Затем установите стиль заголовка и добавьтеh2селектор, цвет текста устанавливается на серый,text-alignустановить какcenterОтцентрируйте его и установите размер текста на4.5rem, толщина текста600. потомmarginустановить и опустить6rem,о0.

Присоединяйсяh2 pселектор для стиля субтитров,marginустановить как0, цвет текста может быть установлен на белый.

Размер кадра установлен, и следующим шагом является установка содержимого экрана iPhone.

существует#uiОн добавил изображение, верхнюю часть экрана интернет-интерфейса, а затем каждая строка данных - это изображение, я бы использовал<ul>список, чтобы построить его, добавьте<li>, содержимое представляет собой изображение, всего 7 строк.

Вернитесь в раздел CSS и добавьте#uiСелектор,positionустановить какabsolute,topустановить как0. Затем центрировать его влево и вправо, первое местоleftустановить как50%, а потомtransformустановить какtranslateX(-50%)Вот и все.

Присоединяйся#ui .top-uiСелектор для установки положения верхнего изображения пользовательского интерфейса.displayустановить какblock, ширина берется из переменной, а высотаauto,Потомmargin, указанный выше70px, слева и справа естьauto, ниже0. добавить еще немногоpadding-bottom, установить как30pxи нижняя граница.

перейти в раздел списка, добавить#ui ulселектор, будетlist-styleустановить какnone, чтобы изменить стиль списка,marginа такжеpaddingустановить как0.

Затем задайте стиль картинки внутри и добавьте#ui ul li imgселектор, наборdisplayдаblock, ширина берется из переменной, а высотаauto,marginустановить и опустить10px,оauto.padding-bottomда10px, а затем добавьте нижнюю границу.

Теперь, когда интерфейс в основном настроен, давайте займемся частью анимации.

часть анимации

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

Присоединяйся#ui ul li img:hoverселектор, наборtransformдляscale(1.8),Потомopacityустановить как0. существует#ui ul li imgдобавить в селекторtransition: .25s transform ease-in-out;, а теперь попробуйте подвести курсор к одной из строк, можно добиться эффекта приближения к уменьшению и возврату к списку.

добавить некоторое смещение, например.translateY()установить как-60px, эффект примерно такой:

Однако эта анимация не запускается курсором, она запускается при прокрутке страницы, а ходом анимации можно управлять прокруткой, поэтому я буду использовать JavaScript, чтобы вычислить, насколько прокручивается текущая страница, а затем установить соответствующее количество рядов.transformа такжеopacity.

Чтобы упростить настройку стилей CSS с помощью JavaScript, я хочу установить значение параметра на стороне CSS, чтобы контролировать ход выполнения строки анимации.

первыйhoverа такжеtransitionудаляются настройки, а затем внутри HTML, в первомliприсоединиться тамstyle,настраивать--progressда0.5:

--progressмоя собственная переменная CSS, я хочу установить ее как0когдаscale()установить как1.8,так же какopacityустановить как0; в то время как его заданное значение равно1когдаscale()установить как1,opacityустановить как1. Сделайте это как анимированный переключатель, тогда мы на стороне JavaScript, просто нужно настроить это--progressВы можете управлять анимацией.

существует#ui ul li imgвнутри, присоединяйтесьtransform, первый наборscale(),Буду1.8минус0.8 * var(--progress), так что в--progressдля1когда,scaleто есть1;а также--progressдля0когда,scaleто есть1.8.

приходи ещеtranslateY(),Буду-60pxумножить на1 - var(--progress), так что в--progressдля1час,translateYто есть0;а также--progressдля0когда,translateYто есть-60px.

опять такиopacityустановить прямо на--progressзначение ,0будет скрывать это, когда1он будет отображаться. попробуй настроить--progressзначение, вы можете увидеть специфический эффект этого значения параметра.

потом<li>снято с установленного значения на#ui ulгенерал-лейтенант--progressинициализирован как0Вот и все.

часть JavaScript

Наконец, все дело в управлении анимацией с помощью JavaScript.

Сначала определитеrowsконстанты, будет каждый<li>Верните его, а затем определите файл с именемhtmlпостоянная, назначенная какdocument.documentElement, так как позже будет несколько цитатdocument.documentElementиз.

Присоединяйсяdocument.addEventListener, мониторscrollПрокрутка страницы, определение переменной,scrolledравныйhtml.scrollTopПоделить наhtml.scrollHeightминусhtml.clientHeight.

Это приводит к0к1значение между, когда страница прокручивается вверх, это0, при прокрутке вниз1.

Далее каждый<li>, один за другим будут--progressустановить как1.

добавить одинfor ofпетля назад, помещая каждый<li>Получите это, потому что анимация идет одна за другой, и сколько прокруток страницы можно получить черезscrolledfetch, поэтому мы хотим рассчитать каждый<li>существует0к1интервал между ними.

определитьtotalпеременная, будет1Поделить на<li>, затем вычислите два значения, одно из которыхstart,Будуtotalумножить наindex, другойend,Будуtotalумножить наindexДобавить1,пройти черезconsole.log(), поставить каждый<li>Посмотрите на вывод интервала.

Имея эту информацию, мы можем рассчитать каждый<li>из--progressстоимость. определить переменнуюprogress,БудуscrolledуменьшатьstartПоделить наendуменьшатьstart; Тогда еслиprogressбольше или равно1, будуprogressустановить как1; меньше или равно0установлен на0.

Наконец, будетprogressзначение черезsetPropertyустановлен в<li>начальство.

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

Это все для этого эпизода.

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

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

Категории