Расскажите о некоторых интересных интерактивных анимациях на маркетинговой странице Apple.

предисловие

Просмотр два дня назадМаркетинговая страница Apple 16 дюймовКогда я был в то время, я нашел несколько интересных взаимодействий.Я думал, что хоть я и бедный человек, но мои знания безграничны, поэтому я исследовал волну.

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

два эффекта

флип-эффект

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

увеличить изображение

В начале это полноэкранное изображение, которое медленно превращается в другое изображение в процессе прокрутки, затем изображение медленно уменьшается с центром экрана в качестве точки отсчета, в процессе уменьшения изображение фиксируется на экране.По центру при уменьшении до определенного значения картинка прокручивается полосой прокрутки.

Предварительное знание

Прежде чем мы начнем писать код, нам нужно понять несколько моментов, которые будут использоваться в следующем коде.

липкое позиционирование`sticky`

можно просто считатьотносительное позиционированиеrelativeиФиксированное позиционированиеfixedСочетание элементов , относительно позиционируется перед охватом указанного диапазона, а затем фиксируется.

stickyФиксированное относительное смещение элемента определяется относительно его ближайшего элемента-предка с помощью поля прокрутки. Если ни один из элементов-предков не прокручивается, он определяется относительноviewportдля вычисления смещения элемента.

один пример

Следующий код,htmlСтруктура выглядит следующим образом:

<body>
  <h1>我是 sticky 的第一个 demo</h1>
  <nav>
    <h3>导航A</h3>
    <h3>导航B</h3>
    <h3>导航C</h3>
  </nav>
  <article>
    <p>...</p>
    <p>...</p>
    // ...
  </article>
</body>

Стиль следующий:

nav {
  display: table;
  width: 100%;
  position: sticky;
  top: 0;
}

в кодеnavэлементы будут основываться наbodyдля липкого позиционирования, вviewportПрокрутка области просмотра до элементаtopрасстояние менее0pxРаньше элемент располагался относительно, что означало, что он будет прокручиваться вместе с документом. После этого элемент будет зафиксирован на расстоянии от вершины0pxпозиция.

принцип

stickyВ качестве принципа вы можете взглянуть на книгу Учителя Чжан Синьсюй.Глубокое понимание правил расчета позиции sticky sticky positioning, можно вкратце посмотреть объяснение учителяstickyВ этой картинке использованы:

图片引自张鑫旭深入理解position sticky

в<nav>даstickyэлемент, область синего прямоугольникаstickyэлемент папы, используемый для переноскиstickyэлементы, красная область<nav>Относительные прокручиваемые элементы.

Когда вся синяя область находится в красной области,stickyЭлементы не обладают липким эффектом (рис. 1);
При медленном скольжении вверх синее поле выходит за пределы красного элемента прокрутки, затемstickyЭлемент будет скользить вниз в синей рамке, создавая эффект липкости (как показано на рисунках 2 и 3);
Когда синий прямоугольник пересекает красный прямоугольник, потому чтоstickyЭлемент находится в синей рамке, поэтому его сразу уносит волна, и нет эффекта липкости (рис. 3).

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

Вышеуказанные принципы относятся к г-ну Чжан Синьсюю.Глубокое понимание правил расчета позиции sticky sticky positioning, поясняется в статьеблок потокаиЛипкий ограничивающий прямоугольникобъяснение концепции, а также конкретная структура кода иcssДля достижения вы можете просмотреть исходный текст.

Общие примеры

В бизнесе мы можем столкнуться с таким сценарием: то есть список, данные в списке нужно отображать по времени, а время нужно фиксировать вверху при прокрутке, В это время мы можем использоватьstickyДля решения этой проблемы:

конкретныйhtmlСтруктура выглядит следующим образом:

<body>
  <h1>时间固定demo</h1>
  <div className={styles.wrapper}>
    <section>
      <h4>5月20日</h4>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </section>
    <section>
      <h4>5月19日</h4>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </section>
    // ...
</body>

Стиль следующий:

body {
  margin: 0px;
  padding: 100px;
  height: 2000px;
}

h4 {
  margin: 2em 0 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  top: 0;
  z-index: 1;
  position: sticky;
}

Код такой же, как и выше, каждый из которых является<section>, затем дайте<h4>настраиватьstickyПозиционирование, так что вышеуказанный эффект может быть достигнут.

будь осторожен

курс использованияstickyКогда мы это делаем, нам нужно обратить внимание на несколько моментов:

Родительский элемент не может иметьoverflow:visibleКромеoverflow设置，否则没有粘滞效果。 если вы установитеstickyНет эффекта, вы можете видеть, установлены ли родительские элементыoverflow:hidden, вы можете удалить его.
должен быть указанtop,bottom,left,rightОдно из 4 значений, иначе только относительное позиционирование.
Высота родительского элемента не может быть нижеstickyВысота элемента (обратитесь к приведенному выше объяснению принципа)
stickyЭлемент действует только внутри своего родительского элемента (см. объяснение принципа выше)

Еще одна вещь, о которой следует упомянуть, это совместимость, мы можемCan I useПосетите официальный сайтstickyСовместимость, красный:

существуетIEСледующий совершенно бесполезен, если ваш проект нужно рассматриватьIE, вам нужно использоватьfixedбыть совместимым.

параллакс прокрутки`background-attachment`

Что такое параллакс прокрутки, посмотрите на следующий пример, чтобы понять:

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

Эффект на картинке выше, нам нужна только одна линияcssЭто может быть достигнуто, не нужно писать сложноjsкод, установленный напрямуюbackground-attachment: fixedЭто завершено.

`html`структура

<body>
  <section className={`${styles.gImg} ${styles.gImg1}`}>IMG1</section>
  <section className={`${styles.gImg} ${styles.gImg2}`}>IMG2</section>
  <section className={`${styles.gImg} ${styles.gImg3}`}>IMG3</section>
</body>

код стиля

section {
  height: 100vh;
}

.gImg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.gImg1 {
  background-image: url(@/assets/mac1.jpg);
}

.gImg2 {
  background-image: url(@/assets/mac2.jpg);
}

.gImg3 {
  background-image: url(@/assets/mac4.jpg);
}

Прокручивая параллакс этоcssМы в основном готовы реализовать вторую анимацию.

Для объяснения параллакса прокрутки вы можете обратиться к этой статье.Параллакс прокрутки? CSS это подпруга, написано очень подробно.

`Canvas`рисовать

На самом деле вторую анимацию мы тоже можем использоватьcanvasЧтобы добиться этого с помощью рисования, мы можем нарисовать два изображения на холсте и отобразить пропорции двух изображений на холсте в соответствии с расстоянием прокрутки.

в состоянии пройтиcanvasкоторый предоставилdrawImageметод рисования, этот метод предоставляет множество способовCanvasнарисуйте изображение сверху.

Например, чего нам нужно добиться, так это нарисовать следующую картинку:

По сути нам нужно перехватить верхнюю половину картинки в первой главе, нижнюю половину следующей картинки, а потом склеитьojbkТеперь взгляните на диаграмму объяснения параметров:

Здесь нам нужно передать 7 параметров для достижения нужного нам эффекта:

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Значение конкретных параметров здесь подробно обсуждаться не будет, вы можете обратиться к нему.drawImage() Документация MDN.

Идея примерно состоит в том, чтобы сначала нарисовать первое изображение в качестве базовой карты, а затем мы покрываем часть первого изображения, рисуя второе изображение, чтобы можно было достичь упомянутого выше эффекта. Предположим, исходная ширина и высота нашего изображения равны2048*1024, размер холста544*341, расстояние смещения при прокрутке равноoffsetTop, поэтому мы можем написать следующий код:

function drawImage() {
  context.drawImage(img1, 0, 0, 2048, 1024, 0, 0, 544, 341);
  context.drawImage(img2, 0, 滚动偏移距离 * 1024 / 341, 2048, 1024, 0, 滚动偏移距离, 544, 341);
}

Я использовал его раньшеctx.drawImage(image, dx, dy, dWidth, dHeight), можно сослаться на сочинение автораИспользуйте React Hooks для реализации графитоподобного плагина предварительного просмотра изображений., на этот раз используется 7 параметров, вы можете обратиться к этой статьеНесколько способов нанесения картинок на холст, написано очень подробно.

`transform`середина`matrix`

Используется в CSS3transformЭлементы можно трансформировать. К ним относятся: смещение, вращение, смещение, масштабирование.transformможно использоватьtranslate/rotate/skew/scaleспособ управления преобразованием элемента, вы также можете использоватьmatrixспособ управления преобразованием элемента.

Например:

// 代码一
transform: matrix(1.5, 0, 0, 1.5, 0, 190.5);
// 代码二
transform: scale(1,5, 1.5) translate(0, 190.5)

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

Если вы хотите узнать больше об этом свойстве, вы можете обратиться к:Поймите матрицу преобразования CSS3, не изучая математику в колледже

открыть

Инициализировать проект

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Автор используетreact Hooksчтобы завершить эти два анимационных эффекта и использоватьumiБыстрая инициализация проекта, конкретные шаги инициализации могут относиться к написанию автораТеория два на практике - поможет вам очистить слепые пятна знания два, в котором подробно рассказывается, как использовать строительные леса для быстрой сборки проекта.

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

флип-эффект

Эффект переворота на самом деле очень прост, вы совершенно не можете себе представить, как это делает маркетинговая страница Apple?

он использовал120Изображение, соответствующее расстоянию прокрутки, чтобы нарисовать соответствующее изображение, которое должно отображаться в этой позиции прокрутки., да, вы не ослышались. Я думал, что это должно бытьcss3Я слишком много думаю о контроле угла наклона крышки для достижения эффекта переворота, хахаха.

идеи

Тогда наша реализация очень проста, нам нужно всего лишь сделать следующее:

Прежде всего, должна быть определена константа, указывающая на необходимость перехода от закрытого к полностью открытому.как далеко катитьсяДля этого мы определяемся здесь как400px.
Нам нужно знать, когда начинать переворачивать или закрывать крышку, чтобы изображение начало анимироваться, когда оно находится в середине экрана.

// 开始动画的 scrollTop
// $('#imgWrapper') 放图片的容器，html 结构下面有
startOpen = $('#imgWrapper').offset().top - (window.innerHeight / 2 - $('#imgWrapper').height() / 2);

При переворачивании или закрытии крышки нам нужно зафиксировать компьютер во вьюпорте, дождаться его полного открытия или закрытия, а затем дать ему прокрутиться полосой прокрутки, здесь мы можем использоватьposition: sticky.

`html`структура

<body>
 // ...
 <div className={styles.stickyContainer}>
   <div className={styles.stickyWrapper}>
     <div id="imgWrapper" className={styles.imgWrapper}>
       <img
          src={require(`@/assets/${asset}.jpg`)}
          alt="图片1"
       />
     </div>
   </div>
 </div>
 // ...
</body>

Среди них мы можем динамически вводить картинки черезrequire(图片路径)Для завершения, как и в приведенном выше коде, нам нужно только вычислить имя изображения, которое должно отображаться в соответствии с расстоянием прокрутки.

код стиля

.stickyContainer {
  height: 150vh;
}

.stickyWrapper {
  height: 100vh;
  position: sticky;
  top: 100px;
}

.imgWrapper {
  width: 100vh;
  height: 521px;
  margin: 0 auto;
}

.imgWrapper img {
  width: 100%;
}

Затем в процессе прокрутки вычисляется, какую картинку нужно отобразить первой.Мы уже упоминали выше:120картина, в400pxАнимация завершается на расстоянии прокрутки .

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

useEffect(() => {
  // 绑定事件
  window.addEventListener('scroll', scrollEvent, false);

  // 开始动画的滚动距离
  // startOpen
  startOpen = $('#imgWrapper').offset().top - (window.innerHeight / 2 - $('#imgWrapper').height() / 2);

  return ()=>{
    window.removeEventListener('scroll', scrollEvent, false);
  }
}, []);

// 滚动事件
const scrollEvent = () => {
  // 实时的 scrollTop
  const scrollTop = $('html').scrollTop();
  let newAsset = ''

  if (scrollTop > startOpen && scrollTop < startOpen + 400) {
    let offset = Math.floor((scrollTop - startOpen) / 400 * 120);
    
    if (offset < 1) {
      offset = 1;
    } else if (offset > 120) {
      offset = 120;
    }

    if (offset < 10) {
      newAsset = `large_000${offset}`;
    } else if (offset < 100) {
      newAsset = `large_00${offset}`;
    } else {
      newAsset = `large_0${offset}`;
    }
  }

  // 边界值判断
  // ....
  
  // 设置图片 url
  setAsset(newAsset);
};

Эффект предварительного просмотра

Эта флип анимация очень проста.Обмен 120 картинками, и соответствующие картинки рендерятся в реальном времени.На самом деле, нет никакого технического содержания.Вы также можете попробовать другие методы для достижения волны.

увеличить изображение

Мы можем добиться анимации масштабирования изображения на экране двумя способами, один из нихпараллакс прокруткиреализация, одинcanvasРендеринг изображений в режиме реального времени во время прокрутки.

Прежде чем мы начнем, давайте посмотрим на предыдущую картинку без увеличения, а именно:

Он состоит из двух картинок, картинка выводится на экран, он ичехол для компьютераВерхний интервал18px, при увеличении картинка такая же какчехол для компьютераВерхнее поле должно быть18 * 放大比率.

чехол для компьютера,следующее:

Далее мы представим два метода реализации.

`Canvas`выполнить

CanvasРеализация заключается в преобразовании изображения, отображаемого на экране, путемCanvasрисовать.

идеи

На самом деле эта анимация состоит из двух частей, однаналожение изображения,одинУменьшить изображение.

наложение изображения

использоватьCanvasрешать, использоватьCanvasДля реализации нам нужно использоватьdrawImageМетод рисует два изображения на холсте. Нужно только рассчитать масштаб первой картинки и масштаб второй картинки, которые холст должен отрисовывать в конкретное время через дистанцию прокрутки, и это можно решить. Просто нужно знать, когда начинать наложение изображения.

Уменьшить изображение

Мы используемtransform: matrixдобиться, когда уменьшение изображения основано на точке в центре экрана.

Рассчитываем соответствующий коэффициент увеличения иtranslateЗначение , как показано на рисунке ниже, изменяется в реальном времени.transform: matrixзначение параметра.

Здесь нам нужно рассчитать значения нескольких критических точек, таких как максимальный/минимальный коэффициент увеличения, максимальное/минимальное значение смещения, точка начала масштабирования и т. д.

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

некоторые важные ценности

Здесь нам нужно знать несколько значений:

определенная константа

// canvas 显示的图片宽度
const CANVAS_WIDTH = 544;

// canvas 显示的图片高度
const CANVAS_HEIGHT = 341;

// 动画持续的距离
const ZOOM_SCROLL_RANGE = 400;

// canvas 显示的图片 实际宽度
const IMG_NATURAL_WIDTH = 2048;

// canvas 显示的图片 实际高度
const IMG_NATURAL_HEIGHT = 1024;

Коэффициент усиления (curScale), заmatrixизscaleценность

Наименьший коэффициент увеличения равен 1, что само по себе.

Максимальный коэффициент увеличения - это высота экрана, деленная на коэффициент отображаемой на экране картинки, здесь автор будетcanvasШирина и высота рисуемого изображения544 * 341.

const CANVAS_WIDTH = 544;
const CANVAS_HEIGHT = 341;

const scaleRadio = window.innerHeight / CANVAS_HEIGHT;

Таким образом, диапазон коэффициента увеличения должен быть1 ～ scaleRadioмежду.

расстояние смещения (translate), заmatrixзначение смещения

Максимальное расстояние смещения должно быть, когдаcurScaleКогда оно равно 1, расстояние элемента обтекания от верхней части области просмотра, наше масштабирование всегда основано на центре экрана для увеличения/уменьшения масштаба, поэтому его можно легко получить:

// 最大的 translate
let StartScale = 0;
StartScale = window.innerHeight / 2 - $('#img-wrapper').height() / 2;

Минимальное расстояние смещения должно быть вcurScaleзаscaleRadio, расстояние между оборачивающим элементом и верхней частью области просмотра.В это время нам нужно использовать видеоизображение, упомянутое выше, для компьютерной оболочки.top = 18pxЭто значение установлено, потому что изображение увеличено, поэтому минимальное расстояние смещения должно быть:

miniTranslate = - 18 * scaleRadio

Таким образом, интервал смещения расстояния должен бытьminiTranslate ～ StartScaleмежду.

Начальная точка для начала операции масштабирования (NewStartScale)

На самом деле это очень просто, нам нужно начать масштабирование, когда вторая картинка полностью закроет первую картинку, это значение можно передать черезCanvasВерхнее значение оборачивающего элемента из верхнего документаплюсвысота одного экранаможно вычислить.

let NewStartScale = 0;

NewStartScale = $('#section-sticky-hero').offset().top + window.innerHeight;

основной код

Основной код — расчет при прокрутке:

const scrollEvent = () => {
  // 当前的 scrollTop
  const scrollTop = $('html').scrollTop();
  // 放大比率 默认为最大
  let curScale = scaleRadio;
  // 偏移距离 默认为最小
  let translate = -scaleRadio * 18;

  // StartScale：最大的偏移距离
  // NewStartScale：开始缩放操作的起始点
  // 没有就 return
  if (!NewStartScale || !StartScale)  return;

  // 计算 当前的 curScale
  // (scaleRadio - 1) / ZOOM_SCROLL_RANGE)： 每 1px 放大多少
  // scrollTop + scaleRadio * 18 - NewStartScale：当前滚动了多少
  curScale = scaleRadio - ((scaleRadio - 1) / ZOOM_SCROLL_RANGE) * (scrollTop + scaleRadio * 18 - NewStartScale);

  // 边界值处理
  if (curScale > scaleRadio) {
    curScale = scaleRadio;
  } else if (curScale < 1) {
    curScale = 1;
  }

  // 计算 当前的 translate
  // 从 scaleRadio * 18 开始
  // all = scaleRadio * 18 + StartScale
  // 滑动过程中不断相加
  translate = -scaleRadio * 18 + ((scrollTop + scaleRadio * 18 - NewStartScale) / ZOOM_SCROLL_RANGE * (scaleRadio * 18 + StartScale));

  // 边界值处理
  if (translate > StartScale) {
    translate = StartScale;
  } else if (translate < -scaleRadio * 18) {
    translate = - scaleRadio * 18;
  }

  // 使用 canvas 画图
  if (image1 && image2) {
    // 在图片覆盖阶段
    // curScale 还是最大的比率
    if (curScale === scaleRadio) {
      drawImage({
        img1: image1,
        img2: image2,
        secTop: CANVAS_HEIGHT * (scrollTop + 18 * scaleRadio - NewStartScale) / window.innerHeight,
      });
    } else {
      // 如果不是最大的比率，说明图片已经覆盖完了
      // 直接显示第二章
      drawImage({
        img1: image1,
        img2: image2,
        secTop: 0,
      });
    }
  }
	
  // 设置样式
  $('#img-wrapper').css({
    transform: `matrix(${curScale}, 0, 0, ${curScale}, 0, ${translate})`,
  });
};

htmlСтруктура выглядит следующим образом:

<body>
  // ... 其他内容
  <div id="section-sticky-hero" className={styles.stickyContainer}>
    <div className={styles.componentContainer}>
      <div className={styles.imgWrapper} id="img-wrapper">
        <canvas ref={canvasRef} id="canvas" className={styles.canvas}></canvas>
      </div>
    </div>
  </div>
  // ... 其他内容
</body>

Место ограничено, автор приводит только код события прокрутки иhtmlструктура, другой код, такой какdrawImageЭтот метод, если вы заинтересованы, вы можете обратиться к исходному коду.

Предварительный просмотр визуализаций

Реализация параллакса прокрутки

Ранее мы также говорили о принципе параллакса прокрутки, с этимbackground-attachment: fixedсвойство, вторая анимация в основном сделана наполовину.

Реализовать идеи

и вышеcanvasПо сравнению с рисунком шаг, охватываемый рисунком, на самом деле отличается, а остальные в основном аналогичны, включая расчет граничного значения.

наложение изображения

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

Когда первое изображение заполнит экран, добавьте два изображения одновременноbackground-attachment: fixedАтрибут, вы не можете добавить этот атрибут в начало, иначе он станет следующим эффектом:

Уменьшить изображение

Здесь мы не используемtransform: matrixЧтобы сделать это увеличение и уменьшение, мы используемbackground-positionиbackground-sizeдля картинУменьшить/Увеличить и сместить.

все остальное сCanvasПринцип реализации аналогичен.

основной код

Код логики прокрутки выглядит следующим образом:

const CANVAS_WIDTH = 544;
const CANVAS_HEIGHT = 341;

const WRAPPER_WIDTH = 694;
const WRAPPER_HEIGHT = 408;

const ZOOM_SCROLL_RANGE = 400;

// scalaRadio
// 图片放大的最大的倍数
const scaleRadio = window.innerHeight / CANVAS_HEIGHT;

const scrollEvent = () => {
  const scrollTop = $('html').scrollTop();
  let curScale = scaleRadio;
  let translate = -scaleRadio * 18;

  if (!imgFixFixed || !StartScale) return;

  // 第一张图片的 距离文档的顶部的距离为 imgFixFixed
  // 第一章图片的高度为 100vh，即一屏的高度
  // 所以第二章图片的 scrollTop 为 imgFixFixed + window.innerHeight
  if (scrollTop > imgFixFixed && scrollTop < imgFixFixed + window.innerHeight) {
    // 设置 fixed 属性
    setFixImg(true);
  } else {
    setFixImg(false);
  }

  // 假设我们缩放的距离是 400
  // 那么我们可以计算出 每 1px 缩放的比例
  // 接着一这个比例乘以滚动的距离
  curScale = scaleRadio - ((scaleRadio - 1) / ZOOM_SCROLL_RANGE) * (scrollTop - imgFixFixed - window.innerHeight);

  // curScale 边界值处理
  // ...

  // 从 scaleRadio * 18 开始
  // all = scaleRadio * 18 + StartScale
  // 滑动过程中不断相加
  translate = -scaleRadio * 18 + ((scrollTop - imgFixFixed - window.innerHeight) / ZOOM_SCROLL_RANGE * (scaleRadio * 18 + StartScale));

  // translate 边界值处理
  // ...

  // 设置图片的 css 样式
  // 进行图片基于中心点的缩放
  $('#g-img2').css({
    "width": curScale * CANVAS_WIDTH,
    "height": curScale * CANVAS_HEIGHT,
    "margin-top": `${translate + 18 * curScale}px`,
  });

  $('#img-wrapper').css({
    "width": scaleRadio * WRAPPER_WIDTH,
    "height": scaleRadio * WRAPPER_HEIGHT,
    "background-size": `${curScale * WRAPPER_WIDTH}px ${curScale * WRAPPER_HEIGHT}px`,
    "background-position": `center ${translate}px`,
  });
};

htmlСтруктура выглядит следующим образом:

<body>
  // ... 其他内容
  <section id="g-img" className={`${styles.gImg} ${styles.gImg1} ${fixImg ? styles.fixed : ''}`}>IMG1</section>

  <div className={styles.stickyContainer}>
    <div className={styles.componentContainer}>
      <div className={styles.imgWrapper} id="img-wrapper">
        <section id="g-img2" className={`${styles.gImg} ${styles.gImg2} ${fixImg ? styles.fixed : ''}`}>IMG2</section>
      </div>
    </div>
  </div>
  // ... 其他内容
</body>

Предварительный просмотр визуализаций

Суммировать

Сегодня я рассказал об анимации двух маркетинговых страниц Apple, Статья несложная, но в основном речь идет о применении нескольких базовых знаний.липкое позиционирование,параллакс прокрутки,Рисунок на холсте,Использование свойства матрицыИ так далее, я надеюсь помочь всем.

Честно говоря, я хочу комплимент!

использованная литература

Глубокое понимание правил расчета позиции sticky sticky positioning
Параллакс прокрутки? CSS это подпруга
Используйте React Hooks для реализации графитоподобного плагина предварительного просмотра изображений.
Несколько способов нанесения картинок на холст
Поймите матрицу преобразования CSS3, не изучая математику в колледже
Теория два на практике - поможет вам очистить слепые пятна знания два

образец кода

Пример кода анимации маркетинговой страницы Apple

предисловие

два эффекта

флип-эффект

увеличить изображение

Предварительное знание

липкое позиционированиеsticky

один пример

принцип

Общие примеры

будь осторожен

параллакс прокруткиbackground-attachment

htmlструктура

код стиля

Canvasрисовать

transformсерединаmatrix

открыть

Инициализировать проект

флип-эффект

идеи

htmlструктура

код стиля

Эффект предварительного просмотра

увеличить изображение

Canvasвыполнить

идеи

некоторые важные ценности

основной код

Предварительный просмотр визуализаций

Реализация параллакса прокрутки

Реализовать идеи

основной код

Предварительный просмотр визуализаций

Суммировать

использованная литература

образец кода

липкое позиционирование`sticky`

параллакс прокрутки`background-attachment`

`html`структура

`Canvas`рисовать

`transform`середина`matrix`

`html`структура

`Canvas`выполнить