Você já sabe como adicionar páginas a uma história AMP. Para incluir as próximas páginas da nossa história "A alegria de ter animais de estimação", o processo é bem parecido. Com base nas informações abaixo, crie as páginas restantes usando o que você aprendeu até agora. Se você tiver dúvidas, veja o código completo (pets-completed.html) (em inglês).
Cada página precisa de um atributo "id" exclusivo (por exemplo, id="page1").
Página 1: gatos
Demonstra como exibir uma imagem e um texto em uma única camada.
um elemento com a seguinte mensagem: "Dogs come when they're called. Cats take a message and get back to you." — Mary Bly
Página 2: cachorros
Demonstra como definir a disposição do texto e exibir uma imagem com duas camadas que preenche a tela inteira.
Contém duas camadas:
Camada 1: implementa o modelo fill e contém um componente amp-img responsivo (dog.jpg, 720 x 1280 px).
Camada 2: implementa o modelo thirds e contém dois elementos:
um elemento
com o título: Dogs
um elemento
que especifica uma grid-area ocupando a parte inferior da tela, o lower-third, e inclui o seguinte texto: 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.
Página 3: pássaros
Demonstra como organizar o texto, exibir uma imagem que preenche a tela e fornecer áudio de fundo para a página.
Contém três camadas:
Camada 1: implementa o modelo fill e contém um componente amp-img responsivo (bird.jpg, 720 x 1280 px).
um elemento com o seguinte texto: "A bird is three things: Feathers, flight and song, And feathers are the least of these." — Marjorie Allen Seiffert
Essa terceira camada especifica class="bottom" para alinhar os elementos filhos à parte inferior da tela.
Um arquivo de áudio tocará em segundo plano quando a página for exibida. Ele pode continuar por toda a história ou acompanhar uma única página. Para usar áudio em uma página, adicione o atributo background-audio="assets/bird-singing.mp3" ao elemento <amp-story-page>.
Página 4: coelhos
Demonstra como definir a disposição do texto e exibir um vídeo que preenche a tela inteira na página.
Contém três camadas:
Camada 1: implementa o modelo fill e contém um componente amp-video responsivo (rabbit.mp4).
Para exibir o vídeo, inclua o script necessário do componente amp-video na seção .
Especifique uma imagem de poster (rabbit.jpg). Esse atributo é obrigatório para histórias AMP.
Defina a exibição automática do vídeo com o atributo autoplay. Esse atributo é obrigatório para histórias AMP.
Configure o vídeo para voltar ao início automaticamente com o atributo loop.
Defina as dimensões como width="720"height="1280" e layout="responsive".
Camada 2: implementa o modelo vertical e contém um item:
um elemento
com o título: Rabbits
Camada 3: implementa o modelo vertical e contém um item:
um elemento
com o seguinte texto: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Aplique a classe CSS bottom à camada para alinhar os elementos filhos à parte inferior da tela.
Nossa história "A alegria de ter animais de estimação" está quase pronta. Usaremos animações na última página para mostrar todos os animais de estimação.