Красивые, интерактивные, канонические страницы AMP

AMP упрощает создание надежных, отзывчивых и эффективных веб-страниц. AMP позволяет создавать обычные взаимодействия с сайтом без написания кода JavaScript. На веб-сайте amp.dev есть готовые шаблоны для быстрого старта.

Что вы будете строить

В этой лаборатории кода вы создадите полностью отзывчивую, интерактивную, красивую страницу AMP, которая включает в себя многие функции и расширенные компоненты AMP:

  • Отзывчивая навигация
  • Изображение обложки героя на всю страницу
  • Адаптивные изображения
  • Видео с автовоспроизведением
  • Встраивает, например, в Instagram
  • Действия и селекторы
  • Привязка данных с помощью amp-bind
  • Визуальные эффекты с amp-fx-collection и amp-animation

Что вам понадобится

  • Современный веб-браузер
  • Node.js и текстовый редактор или доступ к CodePen или аналогичной онлайн-площадке.
  • Базовые знания HTML, CSS, JavaScript и инструментов разработчика Google Chrome.

Инструменты для обслуживания контента

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

Нашим предпочтительным инструментом для локального обслуживания контента будет serve сервер статического контента на основе Node.js. Чтобы установить его, выполните следующую команду:

npm install -g serve

Скачайте шаблон с amp.dev

Шаблоны AMP — это хранилище быстрых шаблонов и компонентов AMP, которые помогут вам быстро создавать современные адаптивные страницы AMP.

Посетите шаблоны AMP и загрузите код «Простая статья» для шаблона «Лучшие фотографии животных года».

Запуск кода шаблона

Извлеките содержимое ZIP-файла.

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

Посетите http://localhost:5000/templates/article.amp.html в своем браузере. (Порт может быть 3000 или другим номером в зависимости от версии serve . Проверьте точный адрес в консоли.)

Пока мы этим занимаемся, давайте откроем Chrome DevTools и также переключим режим устройства.

Обрезать код шаблона

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

Удалите все внутри <body></body> .

Теперь у нас осталась пустая страница, содержащая только шаблонный код:

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

AMP-страница — это HTML-страница с дополнительными тегами и некоторыми ограничениями для надежной работы.

Хотя большинство тегов на странице AMP являются обычными тегами HTML, некоторые теги HTML заменены тегами, специфичными для AMP. Эти специальные элементы, называемые HTML-компонентами AMP , упрощают эффективную реализацию распространенных шаблонов.

Простейший HTML-файл AMP выглядит так (иногда его называют шаблоном AMP ):

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Взгляните на код пустой страницы, которую вы создали во время установки, которая включает в себя этот шаблон и несколько дополнений⁠ — главное, <style amp-custom> , который включает в себя множество минимизированных стилей CSS.

AMP не придерживается мнения о дизайне и не навязывает определенный набор стилей. Большинство компонентов AMP имеют очень простой стиль. Авторам страницы остается предоставить свой собственный CSS. Вот где в игру вступает <style amp-custom> .

Шаблоны AMP , тем не менее, предоставляют свои собственные стили CSS, которые красиво оформлены, кросс-браузерны и отзывчивы, чтобы помочь вам быстро создавать элегантные страницы AMP. Код шаблона, который вы загрузили, включает эти самоуверенные стили CSS в <style amp-custom>.

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

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

Добавьте адаптивную навигацию

Перейдите на страницу https://ampstart.com/components#navigation , скопируйте и вставьте HTML-код, предоставленный для ОТВЕТСТВЕННОЙ МЕНЮ, в body своей страницы.

Код, предоставленный AMP Start, включает в себя необходимую структуру классов HTML и CSS для реализации адаптивной панели навигации для вашей страницы.

Попробуйте: измените размер окна, чтобы увидеть, как оно реагирует на разные размеры экрана.

Этот код использует мультимедийные запросы CSS и компоненты AMP amp-sidebar и amp-accordion .

Добавьте изображение героя и заголовок

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

Перейдите на https://ampstart.com/components#media , скопируйте и вставьте HTML-код, предоставленный для Fullpage Hero, в свой код сразу после <!-- End Navbar --> comment в body.

Теперь давайте обновим изображение и заголовок.

Как вы могли заметить, во фрагменте кода есть два разных amp-img . Один используется для меньшей ширины и должен указывать на изображение с более низким разрешением, а другой — для больших дисплеев. Они переключаются автоматически на основе атрибута media , который AMP поддерживает во всех элементах AMP.

Обновите src , width и height для разных изображений и заголовка «Самые красивые походы на северо-западе Тихого океана», заменив существующий <figure>...</figure> на:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Давайте теперь посмотрим на страницу:

Резюме

  • Вы создали оболочку для своей страницы, включая адаптивную навигацию, главное изображение и заголовок.
  • Вы узнали больше о шаблонах AMP и использовали компоненты пользовательского интерфейса AMP Start, чтобы быстро собрать оболочку страницы.

Полный код для этого раздела можно найти здесь: http://codepen.io/aghassemi/pen/RpRdzV .

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

Давайте добавим main элемент, в котором будет размещаться содержимое страницы. Мы добавим его в конец body:

<main id="content">

</main>

Добавьте заголовки и абзацы

Добавьте следующее внутри main :

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

Поскольку AMP — это просто HTML, в этом коде нет ничего особенного, кроме названий классов CSS. Что такое px3 , mb2 и ampstart-dropcap ? Откуда они?

Эти классы не являются частью AMP HTML. Шаблоны AMP Start используют Basscss для предоставления низкоуровневого набора инструментов CSS и добавления классов, характерных для AMP Start.

В этом фрагменте px3 и mb2 определяются Basscss и преобразуются в padding-left-right и margin-bottom соответственно. ampstart-dropcap предоставляется AMP Start и увеличивает размер первой буквы абзаца.

Вы можете найти документацию для этих предопределенных классов CSS на http://basscss.com/ и https://ampstart.com/components .

Посмотрим, как теперь выглядит страница:

Добавить изображение

В AMP легко создавать адаптивные страницы. Во многих случаях сделать компонент AMP адаптивным достаточно просто добавить атрибут layout="responsive" . Подобно HTML-тегу img , amp-img также поддерживает srcset для указания разных изображений для различной ширины области просмотра и плотности пикселей.

Добавьте amp-img в main :

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

С помощью этого кода мы создаем адаптивное изображение, указав layout="responsive" и указав width и height.

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

Две причины:

  1. AMP использует ширину и высоту для расчета соотношения сторон и поддержания правильной высоты по мере изменения ширины в соответствии с родительским контейнером.
  2. AMP применяет статический размер для всех элементов, чтобы обеспечить удобство работы пользователей (без скачков на странице), а также для определения размера и положения каждого элемента для разметки страницы перед загрузкой ресурсов.

Давайте теперь посмотрим на страницу:

Добавить видео с автовоспроизведением

AMP поддерживает множество видеоплееров, таких как YouTube и Vimeo. AMP имеет собственную версию элемента video HTML5 в расширенном компоненте amp-video . Некоторые из этих видеоплееров, в том числе amp-video и amp-youtube , также поддерживают автоматическое воспроизведение без звука на мобильных устройствах.

Подобно amp-img , amp-video может стать адаптивным с добавлением layout="responsive"

Давайте добавим автовоспроизводящееся видео на нашу страницу.

Добавьте еще один абзац и следующий элемент amp-video в main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Давайте взглянем:

Добавить вставку

AMP имеет расширенные компоненты для многих сторонних встраиваний, таких как Twitter и Instagram . Для встраивания, в котором отсутствует компонент AMP, всегда есть amp-iframe .

Давайте добавим вставку Instagram на нашу страницу.

В отличие от amp-img и amp-video , amp-instagram не является встроенным компонентом. Тег скрипта импорта для него должен быть явно включен в head страницы AMP, прежде чем компонент можно будет использовать.

Шаблон AMP Start, который мы используем, включает несколько тегов сценария импорта. Найдите их в начале тега head и убедитесь, что включена следующая строка скрипта импорта:

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

Добавьте еще один абзац и следующий элемент amp-instagram в main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Давайте взглянем:

Это, вероятно, достаточно контента на данный момент.

Резюме

  • Вы узнали об адаптивных компонентах в AMP.
  • Вы добавили различные типы мультимедийного и текстового контента.

Готовый код для этого раздела можно найти здесь: http://codepen.io/aghassemi/pen/OpXGoa .

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

Хотя AMP не поддерживает пользовательский JavaScript, он по-прежнему предоставляет несколько стандартных блоков для получения и обработки действий пользователя.

Если каждое изображение для нашей AMP-страницы, ориентированной на фотографии, будет видно на странице, это не создаст хорошего пользовательского опыта. К счастью, мы можем использовать amp- carousel для создания слайдов с фотографиями, которые можно перемещать по горизонтали.

Во-первых, давайте удостоверимся, что тег скрипта для amp-carousel включен в head :

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

Теперь добавим на главную amp-carousel типа slides с несколькими изображениями main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" гарантирует, что одновременно отображается только одно изображение, и позволяет пользователям пролистывать их.

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

Давайте попробуем и посмотрим, как это выглядит:

1.gif

Теперь давайте добавим горизонтально прокручиваемый контейнер для миниатюр этих изображений. Мы снова будем использовать <amp-carousel> , но без type="slides" и с макетом фиксированной высоты.

Добавьте следующее после предыдущего элемента amp-carousel .

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Обратите внимание, что для миниатюр мы просто использовали layout="fixed" и версии одних и тех же фотографий с низким разрешением.

Давайте взглянем:

Изменение изображения, когда пользователь нажимает миниатюру

Для этого нам нужно связать такие события , как tap , с такими действиями , как смена слайда.

событие: мы можем использовать атрибут on для установки обработчиков событий для элемента, и событие tap поддерживается для всех элементов.

действие: amp-carousel carousel предоставляет действие goToSlide(index=INTEGER) , которое мы можем вызвать из обработчика события касания каждого миниатюрного изображения.

Теперь, когда мы знаем о событии и действии, давайте свяжем их вместе.

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

Измените существующий код, чтобы добавить атрибут id в карусель слайдов (первый):

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Теперь давайте установим обработчик событий ( on="tap:imageSlides.goToSlide(index=<slideNumber>)") " для каждой миниатюры :

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Обратите внимание, что мы также должны указать ему tabindex и установить role ARIA для доступности.

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

2.gif

Выделите миниатюру , когда пользователь коснется ее

Можем ли мы это сделать? Кажется, нет никаких действий для изменения классов CSS для элемента, который вызывается из обработчиков событий касания. Итак, как мы можем выделить выбранную миниатюру?

<amp-selector> на помощь!

amp-selector отличается от компонентов, которые мы использовали до сих пор. Это не компонент презентации, так как он не влияет на макет страницы; скорее, это строительный блок, который позволяет странице AMP узнать, какой вариант выбрал пользователь.

То, что делает amp-selector , довольно простое, но мощное:

  • amp-selector может содержать любые произвольные элементы HTML или компоненты AMP.
  • Любой элемент-потомок amp-selector может стать опцией, если он имеет атрибут option=<value> .
  • Когда пользователь нажимает на элемент, который является опцией, amp-selector просто добавляет selected атрибут к этому элементу (и удаляет его из других опций в режиме одиночного выбора).
  • Вы можете стилизовать выбранный элемент в своем пользовательском CSS, указав selected атрибут с помощью селектора атрибута CSS.

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

Добавьте тег script для amp-selector в head :

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Оберните карусель миниатюр в amp-selector
  2. Сделайте каждую миниатюру опцией, добавив атрибут option=<value> .
  3. Сделайте первую миниатюру выбранной по умолчанию, добавив selected атрибут.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Теперь нам нужно добавить стиль, чтобы выделить выбранную миниатюру.

Добавьте следующий пользовательский CSS в <style amp-custom> после уменьшенного шаблона CSS из AMP Start:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Давайте взглянем:

3.gif

Выглядит хорошо, но вы заметили ошибку?

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

В следующем разделе мы узнаем, как это сделать.

Резюме

  • Вы узнали о различных типах каруселей и о том, как их использовать.
  • Вы использовали действия и события AMP, чтобы изменить видимый слайд в карусели изображений, когда пользователь нажимает миниатюру изображения.
  • Вы узнали об amp-selector и о том, как его можно использовать в качестве строительного блока для реализации интересных вариантов использования.

Готовый код для этого раздела можно найти здесь: http://codepen.io/aghassemi/pen/gmMJMy

В этом разделе мы будем использовать amp-bind для улучшения интерактивности галереи изображений из предыдущего раздела.

Что такое amp-bind ?

Основной компонент AMP amp-bind позволяет создавать собственные интерактивные элементы с привязкой данных и выражениями.

amp-bind состоит из трех ключевых частей:

  1. Состояние
  2. Связывание
  3. Мутация

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

Binding — это выражение, которое связывает состояние с атрибутом HTML или содержимым элемента.

Мутация — это действие по изменению значения состояния в результате какого-либо действия или события пользователя.

Сила amp-bind начинается, когда происходит мутация: все компоненты, имеющие привязку к этому состоянию, будут уведомлены и автоматически обновятся, чтобы отразить новое состояние.

Давайте посмотрим на это в действии!

Раньше мы использовали действия AMP (например, goToSlide() ), чтобы связать карусель слайдов с полным изображением с событием tap на миниатюры изображений, и использовали amp-selector чтобы выделить выбранную миниатюру.

Давайте посмотрим, как мы можем полностью переделать этот код, используя подход amp-bind к привязке данных.

Но прежде чем мы начнем кодировать, давайте разработаем наш подход:

1. Каково наше государство?

В нашем случае все довольно просто: единственное значение, которое нас волнует, — это номер текущего слайда. Итак, selectedSlide — это наше состояние.

2. Какие у нас привязки?

Что нужно изменить при изменении selectedSlide ?

  • Видимый slide карусели с полным изображением:
<amp-carousel [slide]="selectedSlide" ...
  • selected элемент в amp-selector также должен измениться. Это исправит ошибку, с которой мы столкнулись в предыдущем разделе.
<amp-selector [selected]="selectedSlide" ...

3. Каковы наши мутации?

Когда нужно изменить selectedSlide ?

  • Когда пользователь переходит к новому слайду в карусели с полным изображением, проводя пальцем по экрану:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Когда пользователь выбирает миниатюру:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Давайте используем AMP.setState для запуска мутации, что означает, что нам больше не нужен весь код on="tap:imageSlides.goToSlide(index=n)" , который был на миниатюре!

Давайте сложим все вместе:

Добавьте тег script для amp-bind в head :

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

Замените существующий код галереи новым подходом:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Давайте проверим это. Коснитесь миниатюры, и слайды изображений изменятся. Проведите по слайдам изображений, и выделенная миниатюра изменится.

4.gif

Добавить текст в галерею

Мы уже проделали тяжелую работу по определению и изменению состояния текущего слайда. Теперь мы можем легко предоставить дополнительные привязки для обновления других частей информации на основе текущего номера слайдов.

Давайте добавим текст «Image x/of y» в нашу галерею:

Добавьте следующий код над элементом карусели слайдов:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

На этот раз мы привязываемся к внутреннему тексту элемента с помощью [text]= вместо привязки к атрибуту HTML.

Давайте попробуем:

5.gif

Резюме

  • Вы узнали об amp-bind .
  • Вы использовали amp-bind для реализации улучшенной версии галереи изображений.

Полный код для этого раздела можно найти здесь: http://codepen.io/aghassemi/pen/MpeMdL .

В этом разделе мы будем использовать две новые функции для добавления анимации на нашу страницу.

Добавьте эффект параллакса к заголовку

amp-fx-collection — это расширение, предоставляющее набор предустановленных визуальных эффектов, таких как параллакс, которые можно легко включить для любого элемента с атрибутами.

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

Эффект параллакса можно включить, добавив атрибут amp-fx="parallax" data-parallax-factor="<a decimal factor>" к любому элементу HTML или AMP.

  • Значение коэффициента больше 1 ускоряет прокрутку элемента, когда пользователь прокручивает страницу вниз.
  • Значение коэффициента меньше 1 замедляет прокрутку элемента, когда пользователь прокручивает страницу вниз.

Давайте добавим к заголовку нашей страницы параллакс с коэффициентом 1,5 и посмотрим, как это будет выглядеть!

Добавьте тег script для amp-fx-collection в head :

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Теперь найдите в коде существующий элемент title заголовка и добавьте к нему атрибуты amp-fx="parallax" and data-parallax-factor="1.5" :

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Давайте посмотрим на результат:

6.gif

Заголовок теперь прокручивается быстрее, чем остальная часть страницы. Прохладный!

Добавить анимацию на страницу

amp-animation — это функция, которая переносит API веб-анимации на страницы AMP.

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

Добавьте тег сценария для amp-анимации в head :

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

Теперь нам нужно определить нашу анимацию и целевой элемент, к которому она применяется.

Анимации определяются как JSON внутри тега amp-animation верхнего уровня.

Вставьте следующий код непосредственно под открывающим тегом body на своей странице.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Этот код определяет анимацию, которая выполняется в течение 30 секунд без задержки и масштабирует изображение на 30% больше.

Мы определяем прямую fill , чтобы изображение оставалось увеличенным после окончания анимации. target — это HTML- id элемента, к которому применяется анимация.

Давайте добавим id к главному элементу изображения на нашей странице, чтобы amp-animation могла воздействовать на него.

  1. Найдите существующее основное изображение (с высоким разрешением и layout="fixed-height" ) в своем коде и добавьте id="heroimage" к тегу amp-img .
  2. Для простоты также удалите media="(min-width: 416px)" а также удалите другой amp-img с низким разрешением, чтобы нам пока не приходилось иметь дело с несколькими анимациями и медиазапросами в amp-анимации. .
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

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

Добавьте следующее правило CSS в конец существующего <style amp-custom> :

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Давайте попробуем и посмотрим, как это выглядит:

7.gif

Тонкий!

Но я все равно мог бы сделать это с помощью CSS. В чем смысл amp-animation ?

В данном случае это верно, но amp-animation обеспечивает дополнительную функциональность, которую нельзя реализовать с помощью одного лишь CSS. Например, анимация может запускаться в зависимости от видимости (а также приостанавливаться в зависимости от видимости) или с помощью действия AMP. amp-animation также основана на API веб-анимации , который сам по себе имеет больше возможностей, чем анимация CSS, особенно в отношении возможности компоновки.

Резюме

  • Вы узнали о создании эффектов параллакса с помощью amp-fx-collection .
  • Вы узнали об amp-animation .

Полный код для этого раздела можно найти здесь: http://codepen.io/agassemi/pen/OpXKzo .

Вы только что закончили создание красивой интерактивной страницы AMP.

Давайте отметим это, еще раз взглянув на то, чего вы достигли сегодня.

Вот ссылка на готовую страницу: http://s.codepen.io/aghassemi/debug/OpXKzo

... и окончательный код: http://codepen.io/agassemi/pen/OpXKzo

Без названия.gif

Коллекцию записей CodePen для этой лаборатории кода можно найти здесь: https://codepen.io/collection/XzKmNB/

О, прежде чем мы пойдем...

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

Посмотрим:

Без названия.gif

Превосходно!

Хорошо проведите этот день.

Что дальше

Эта кодовая лаборатория только поверхностно показывает, что возможно в AMP. Существует множество ресурсов и лабораторий кода, которые помогут вам создавать удивительные страницы AMP:

Если у вас есть вопросы или проблемы, найдите нас на канале AMP Slack или создайте обсуждения, отчеты об ошибках или запросы функций на GitHub .