by zhangxinxu from Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
Эта статья может быть воспроизведена полностью, но требуется письменное разрешение первоначального автора, а первоначальный автор и источник сохраняются, а абстрактный дренаж необязателен.
1. Прическа с челкой и производное взаимодействие с iPhone X
В форме iPhone X есть примечательная особенность, то есть у него явная челка.
Кроме того, есть несколько крутых взаимодействий.
Например, следующее взаимодействие:
Интерактивные видеоэффекты, нажмите здесь, чтобы испытать:t.cn/Rp01GKc
При прокрутке страницы список будет автоматически располагаться вокруг челки iPhone X.
Глядя на реакцию на приведенном выше снимке экрана Weibo, кажется, что этого эффекта трудно достичь. На самом деле, CSS3 уже давно поддерживает этот конкретный эффект обтекания формы. Можно добиться как фигур CSS3, так и регионов CSS3. Эта статья покажет как использовать формы CSS3 для достижения эффекта автоматического оборачивания челки iPhone X при прокрутке содержимого элемента.
2. CSS3 Shapes реализует прокрутку элементов, автоматически оборачивающую эффект тряски головы iPhone X.
Увидеть — значит поверить, чтобы увидеть эффект, вы можете нажать здесь:CSS3 Shapes реализует демонстрацию челки iPhone X для переноса списка
Вы также можете напрямую отсканировать QR-код на своем мобильном телефоне (если это iPhone), чтобы испытать:
Прокрутите список, чтобы увидеть что-то вроде GIF ниже:
Принцип накручивания челки
В CSS-фигурах есть свойство CSS, называемоеshape-outside, который позволяет располагать встроенные элементы снаружи в неправильной форме, синтаксис выглядит следующим образом (см.MDN):
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url>值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
shape-outsideЧтобы свойства вступили в силу, они должны быть плавающими.floatэлемент.
Демонстрационный эффект в этой статье реализован с использованиемshape-outside:polygon(), нарисуйте многоугольную форму, похожую на форму челки через координаты точки, код CSS:
.shape {
float: left;
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}Фиолетовая область на рисунке ниже указывает:
В это время элементы списка, которые не установлены с помощью BFC (контекст форматирования блока), будут автоматически располагаться вокруг этой формы, то есть область челки будет автоматически исключена.
Затем просто наложите фальшивое изображение челки iPhone X на эту область.
На этом эффект статического списка, окружающего челку, завершен.
Следующий ключевой вопрос: как сделать так, чтобы элементы списка динамически переносились при прокрутке?
из-заshape-outsideЭлемент, в котором он расположен, является плавающим элементом, поэтому он должен прокручиваться вместе с контейнером. Нам нужен эффект, заключающийся в том, что область челки, которую мы рисуем, должна быть зафиксирована. Что нам делать? На данный момент я делаю это с помощью JavaScript.
Принцип очень прост, слушайте событие прокрутки контейнера, пусть нашshape-outsideНарисованная область компенсируется размером прокрутки в реальном времени. На данный момент визуальный эффектshape-outsideРегионы постоянно привязаны к контейнеру прокрутки.clientHeightв середине.
Весь эффект достигается таким образом, и соответствующий JS выглядит следующим образом:
box.addEventListener('scroll', function () {
var scrollTop = box.scrollTop;
// 滚动偏移应用在shape-outside上
shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
});Доступен более подробный коддемонстрационная страница.
3. Другие более простые способы обернуть челку iPhone X с помощью фигур CSS.
Если наш выбор технологии уделяет больше внимания простоте и простоте понимания, а не потреблению ресурсов и профессии, мы также можем использоватьshape-outside:url(image.png)синтаксис достигает аналогичного эффекта, где'image.png'Это изображение, которое используется для окружения.Оборачивать или нет, определяется на основе расчета альфа-канала.Если описать простыми словами, это обтекание непрозрачной области изображения.
из-за использованияurl()Вычисление формы основано на элементе изображения, иinset(), circle(), ellipse()илиpolygon()Вычислительные свойства этих базовых методов формы неодинаковы, поэтому можно напрямую использовать вертикальнуюmarginКомпенсировать. Это лучше, чемpolygon()Таким образом, гораздо проще понять вычисление положения координат в реальном времени.
Давайте посмотрим на код CSS и JS следующим образом:
.shape {
float: left;
shape-outside: url(liu-outside.png);
margin-top: 150px;
}box.addEventListener('scroll', function () {
var scrollTop = box.scrollTop;
// 滚动偏移应用在margin-top上
shape.style.marginTop = (150 + scrollTop) + 'px';
});Как видите, когда мы прокручиваем контейнер, меняется только одноmarginTopзначение в порядке; в то время как вышеshape-outside:polygon()Реализации нужно менять несколько значений координат одновременно.
Увидеть значит поверить, вы можете безжалостно нажать здесь:shape-outside url реализует обертку списка демо iPhone X челки
Если это iPhone, вы также можете отсканировать следующий код:
Эффект аналогичен:
есть деталь
Здесь необходимо объяснить одну деталь, то есть изображение в виде окружающей области и изображение челки, показанное спереди, не являются одним и тем же изображением, потому что наша область челки должна иметь разрыв с текстом позади, так,url(liu-outside.png)этот в'liu-outside.png'Изображение заливается специальным сплошным цветом (расширяет размер окружающей области справа):
В-четвертых, совместимость фигур CSS и заключительные замечания.
Совместимость CSS Shapes поддерживается браузером Chrome и браузером Safari (включая iOS), что означает, что мы можем использовать его на iPhone, отлично. Просто нужно отметить, что в iOS10.2 и более ранних версиях использование фигур CSS все еще необходимо добавить.webkitЧастный префикс, но говорят, что iPhone X по крайней мере по умолчанию использует iOS 11, а эффект взаимодействия челки обрабатывается для iPhone X, поэтомуwebkitНе беда, если приватный префикс не добавлен.
Этот пример в этой статье показывает важность широты знаний.Если мы углубимся в код CSS и JS, используемый для достижения конечного эффекта, на самом деле это всего лишь несколько строк кода.Просто нажмите на клавиатуру, и все будет кончено. за несколько минут.
Так почему же большинство фронтендеров чувствуют себя коровой, когда видят этот эффект, и даже думают, что «UI и фронтенд уже плакали и падали в обморок в сортире»? На самом деле, я не знаю CSS3 Shapes и CSS3 Regions, связанных со свойствами CSS, связанными с обтеканием макета.
Итак, домой от работы, часто фокусируется на некоторых передовых технологиях все еще очень необходимо, обратите внимание на передовую технологию, а не популярную технику. Многие сцены, использующие передовую технологию, потому что небольшое меньшинство, не популярное, вы даже можете даже проектировать менее чем за несколько лет. Если вы хотите выполнить технически, мы должны отказаться от утилитарного ума, найдите время, чтобы понять его.
выше~
Пишу торопливо, если есть неточности прошу поправить.
Наконец, спасибо, что потратили свое драгоценное время на чтение этой статьи!
Эта статья является оригинальной статьей, и точки знаний будут часто обновляться, а некоторые ошибки будут исправлены.Поэтому, пожалуйста, сохраняйте первоисточник для перепечатки, что удобно для отслеживания источника, избежания введения в заблуждение устаревшими неправильными знаниями и наличия лучший опыт чтения.
Адрес этой статьи:Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
(Конец этой статьи) // Хотите награду? нажмитездесь. Есть что сказать? нажмитездесь.