Процедура добавления следующих страниц в нашу историю «Домашние питомцы» довольно схожа с уже знакомым вам процессом добавления страницы в веб-историю. Используя уже имеющиеся у вас знания и информацию, представленную ниже, создайте оставшиеся страницы. Если вы зашли в тупик, вы можете свериться с завершенным кодом (pets-completed.html).
СОВЕТ. Помните, что каждой странице нужен уникальный атрибут «id» (например, id="page1").
Страница 1. Кошки
Демонстрирует, как отобразить изображение и текст на одном слое.
Адаптивный элемент amp-img (cat.jpg, 720 x 1280px)
Элемент со следующим текстом: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Страница 2. Собаки
Демонстрирует, как расположить текст и отобразить изображение, заполняющее экран, используя два слоя.
Состоит из двух слоев:
Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-img(dog.jpg, 720 x 1280px).
Слой 2: реализует шаблон thirds и содержит 2 элемента:
Элемент
с заголовком: Dogs
Элемент
, указывающий grid-area, занимающий lower-third (нижнюю треть экрана) и содержит следующий текст: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.
Страница 3. Птицы
Демонстрирует, как расположить текст, добавить изображение, заполняющее экран, а также обеспечить фоновое звуковое сопровождение страницы.
Содержит 3 слоя:
Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-img (bird.jpg, 720 x 1280px).
Слой 2: реализует шаблон vertical и содержит один элемент:
Элемент
с заголовком Birds
Слой 3: реализует шаблон vertical и содержит один элемент:
Элемент для следующей информации: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
Третий слой использует свойство class="bottom" для выравнивания дочерних элементов по низу экрана.
Воспроизводит аудиофайл в фоновом режиме, пока страница продолжает отображаться. Воспроизводить фоновое аудио можно как во всей истории, так и на одной странице. Чтобы воспроизводить аудио только на странице, добавьте в элемент <amp-story-page> атрибут background-audio="assets/bird-singing.mp3".
Страница 4. Кролики
Демонстрирует, как расположить текст и отобразить заполняющее экран видео.
Содержит 3 слоя:
Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-video (rabbit.mp4).
Не забывайте о размещении обязательного скрипта для компонента amp-video в своем разделе , чтобы видео отображалось.
Укажите изображение poster (rabbit.jpg). Этот атрибут является обязательным для корректно сформированных AMP-историй.
Чтобы видео воспроизводилось автоматически, установите атрибут autoplay. Этот атрибут является обязательным для корректно сформированных AMP-историй.
Чтобы видео воспроизводилось циклически, установите атрибут loop.
Установите размер: width="720"height="1280" и макет: layout="responsive".
Слой 2: реализует шаблон vertical и содержит один элемент:
Элемент
с заголовком: Rabbits
Слой 3: реализует шаблон vertical и содержит один элемент:
Элемент
, который содержит следующий текст: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Примените к слою CSS-класс bottom, чтобы корректно выровнять дочерние элементы по низу экрана.
Наша история «Домашние питомцы» почти завершена. На нашей последней странице мы используем анимацию, чтобы собрать всех питомцев вместе.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.