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.
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.