Piękne, interaktywne, kanoniczne strony AMP

AMP ułatwia tworzenie niezawodnych, elastycznych i wydajnych stron internetowych. AMP umożliwia tworzenie popularnych interakcji z witryną bez konieczności pisania kodu JavaScript. Witryna amp.dev zawiera wstępnie zaprojektowane szablony z szybkimi instrukcjami.

Co stworzysz

Dzięki nim dowiesz się, jak stworzyć w pełni elastyczną, interaktywną i piękną stronę AMP złożoną z wielu funkcji i rozszerzonych elementów AMP:

  • Elastyczna nawigacja
  • baner powitalny banera pełnoekranowego
  • Obrazy elastyczne
  • Film z autoodtwarzaniem
  • Elementy umieszczone na stronie, takie jak Instagram
  • Działania i selektory
  • Powiązanie danych z: amp-bind
  • Efekty wizualne z: amp-fx-collection i amp-animation

Czego potrzebujesz

  • Nowoczesna przeglądarka
  • Node.js i edytor tekstu albo dostęp do CodePen lub podobnego placu zabaw online
  • Podstawowa wiedza o narzędziach HTML, CSS, JavaScript i narzędziach Google Chrome dla programistów

Narzędzie do wyświetlania treści

Wykorzystamy Node.js do uruchomienia lokalnego serwera HTTP na potrzeby wyświetlania stron AMP. Aby dowiedzieć się, jak ją zainstalować, odwiedź stronę Node.js.

Narzędziem do wyświetlania treści lokalnych będzie serve (statyczny serwer treści oparty na Node.js). Aby go zainstalować, uruchom to polecenie:

npm install -g serve

Pobierz szablon z amp.dev

Szablony AMP to repozytorium z szybkimi szablonami i komponentami AMP, które ułatwiają szybkie tworzenie nowoczesnych, elastycznych stron AMP.

Pobierz szablony AMP i pobierz kod szablonu „&Simple Article&quot” „Najlepszy rok” ze zdjęciami zwierząt.

Uruchamianie kodu szablonu

Wyodrębnij zawartość pliku ZIP.

Uruchom polecenie serve w folderze article, aby udostępniać pliki lokalnie.

W przeglądarce otwórz stronę http://localhost:5000/templates/article.amp.html. Numer portu może wynosić 3000 lub inny, w zależności od wersji serve. Dokładny adres znajdziesz w konsoli).

Tymczasem otwórzmy Narzędzia deweloperskie w Chrome i włączmy też tryb urządzenia.

Przycinanie kodu szablonu

Na tym etapie opracowaliśmy ogólnie działającą stronę AMP. Ćwiczenia mają być jednak pouczające i praktyczne, więc...

Usuń wszystko, co znajduje się w sekcji <body></body>.

Pozostała nam pusta strona zawierająca tylko stały kod:

W trakcie tych ćwiczeń dodasz do tej pustej strony wiele komponentów, częściowo tworząc szablon z jeszcze większą liczbą funkcji.

Strona AMP to strona, która zawiera dodatkowe tagi i pewne ograniczenia w zakresie niezawodności.

Większość tagów na stronie AMP to zwykłe tagi HTML, ale niektóre z nich są zastępowane specjalnymi tagami HTML. Takie elementy nazywane komponentami AMP HTML ułatwiają wdrażanie typowych wzorców w wydajny sposób.

Najprostszy plik AMP HTML wygląda tak (czasem jest nazywany schematem 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>

Przyjrzyj się kodowi pustej strony utworzonej podczas konfiguracji, która zawiera ten schematyczny schemat i kilka dodatków, a w szczególności tag <style amp-custom> zawierający wiele zminifikowanych plików CSS.

Strony AMP nie są poświęcone projektowi i nie egzekwują konkretnego zestawu stylów. Większość komponentów AMP ma bardzo podstawowy styl. Autorzy strony mają dostęp do niestandardowego kodu CSS. Wchodzi do gry <style amp-custom>.

Szablony AMP zawierają jednak własne uznane style CSS, które są atrakcyjne pod względem wyglądu i działania w różnych przeglądarkach oraz elastyczne. Dzięki temu możesz szybko tworzyć eleganckie strony AMP. Pobrany kod szablonu zawiera te stylowane style CSS w <style amp-custom>.

Zaczniemy od ponownego dodania niektórych komponentów usuniętych z szablonu, aby utworzyć powłokę dla naszej strony, w tym menu nawigacyjnego, obrazu nagłówka strony i tytułu.

Uzyskajemy pomoc na stronie Komponenty interfejsu startowego AMP, ale nie zagłębimy się w szczegóły implementacji. Kolejne kroki w ramach ćwiczenia z programowania będą dają o wiele więcej możliwości.

Dodawanie elastycznej nawigacji

Przejdź na stronę https://ampstart.com/components#Nawigacja, a następnie skopiuj i wklej kod HTML podany dla MENUBARU w sekcji body na swojej stronie.

Kod udostępniany przez AMP Start obejmuje niezbędną strukturę klas HTML i CSS, by zaimplementować elastyczny pasek nawigacyjny strony.

Wypróbuj: zmień rozmiar okna, aby zobaczyć, jak reaguje na różne rozmiary ekranu.

Ten kod korzysta z zapytań o media CSS oraz komponentów AMP amp-sidebar i amp-accordion.

Dodaj baner powitalny i tytuł

Strony AMP zawierają również gotowe fragmenty, które pomogą Ci w tworzeniu pięknych i elastycznych tytułów oraz tytułów bohaterów.

Otwórz stronę https://ampstart.com/components#media, a potem skopiuj kod HTML wyświetlony na stronie Fullpage Hero i wklej go do kodu, zaraz po <!-- End Navbar --> comment w kodzie body.

Zaktualizuj teraz obraz i tytuł.

Jak być może wiesz, we fragmencie kodu znajdują się dwa różne tagi amp-img. Jedna z nich jest wyświetlana w przypadku miniatur o mniejszej szerokości i musi wskazywać obraz o niższej rozdzielczości, a drugi dotyczy większych ekranów. Są przełączane automatycznie na podstawie atrybutu media, który obsługuje wszystkie elementy AMP.

Zmień src, width i height na inne obrazy, a w tytule na „Najpiękniejsze wycieczki na północny zachód” przez zastąpienie istniejących elementów <figure>...</figure> wartościami:

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

Spójrzmy teraz na stronę:

Podsumowanie

  • Udało Ci się utworzyć szkielet strony, między innymi elastyczną nawigację oraz baner powitalny i tytuł.
  • Dowiedzieliśmy się więcej o szablonach AMP i użyliśmy komponentów interfejsu AMP Start, aby szybko utworzyć powłokę strony.

Pełny kod tej sekcji znajduje się tutaj: http://codepen.io/aghassemi/pen/RpRdzV

W tej sekcji dodamy do naszej strony obrazy, filmy, elementy osadzone i tekst.

Dodaj element main, który będzie hostować zawartość strony. Dodamy go na końcu body:

<main id="content">

</main>

Dodawanie nagłówków i akapitów

Dodaj te elementy w 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>

Strony AMP są tylko w języku HTML, więc poza tymi klasymi CSS nie ma w nim nic szczególnego. Co to są px3, mb2 i ampstart-dropcap? Skąd pochodzą?

Te klasy nie są częścią AMP HTML. Szablony AMP Start używają Basscs do tworzenia zestawu narzędzi CSS niskiego poziomu i dodawania klas właściwych dla AMP Start.

W tym fragmencie fragmenty px3 i mb2 są zdefiniowane przez Basscss i odpowiednio tłumaczone odpowiednio na fill-left-right i margin-left. Tag ampstart-dropcap jest stosowany przez AMP Start i powiększa pierwszą literę akapitu.

Dokumentację tych wstępnie zdefiniowanych klas CSS znajdziesz na http://basscss.com/ i https://ampstart.com/components.

Zobaczmy, jak wygląda strona:

Dodawanie obrazu

Tworzenie elastycznych stron w AMP jest łatwe. W wielu przypadkach zrobienie tego typu działania jest równie proste jak dodanie atrybutu layout="responsive". Podobnie jak tag HTML img, amp-img obsługuje też srcset do określania różnych obrazów o różnej szerokości widocznego obszaru i gęstości pikseli.

Dodaj amp-img do 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>

Tworzymy obrazy elastyczne za pomocą tego kodu, określając layout="responsive" i podając width i height.

Dlaczego podczas określania układu elastycznego muszę określić szerokość i wysokość?

2 powody:

  1. AMP wykorzystuje szerokość i wysokość do obliczania współczynnika proporcji oraz zachowania prawidłowej wysokości, gdy szerokość zmienia się, aby pasowała do kontenera nadrzędnego.
  2. AMP wymusza stosowanie statycznych rozmiarów wszystkich elementów, by zapewnić wygodę użytkownikom (nie przeskakuje na stronie) oraz określać rozmiar i pozycję każdego elementu przed pobraniem zasobów.

Spójrzmy teraz na stronę:

Dodawanie filmu odtwarzanego automatycznie

AMP obsługuje wiele odtwarzaczy wideo, w tym YouTube i Vimeo. AMP ma własną wersję elementu HTML5 video w ramach komponentu rozszerzonego amp-video. Niektóre z tych odtwarzaczy, w tym amp-video i amp-youtube, także obsługują wyciszone autoodtwarzanie na urządzeniach mobilnych.

Podobnie jak amp-img, amp-video może zyskać elastyczność, gdy dodasz layout="responsive"

Dodajmy automatycznie odtwarzaną reklamę wideo do naszej strony.

Dodaj kolejny akapit i następujący element amp-video do tabeli 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>

Przyjrzyjmy się:

Dodawanie elementu umieszczania

Strony AMP są rozszerzone do wielu elementów zewnętrznych, np. Twittera i Instagrama. W przypadku elementów osadzonych bez komponentu AMP zawsze występuje parametr amp-iframe.

Dodajmy do naszej strony umieszczenie Instagrama.

W przeciwieństwie do amp-img i amp-video amp-instagram nie jest wbudowanym komponentem. Zanim komponent będzie mógł korzystać z jego tagu, musisz go uwzględnić w jej head.

Szablon AMP, z którego korzystamy, zawiera kilka tagów skryptu importu. Poszukaj ich na początku tagu head i upewnij się, że zawiera on ten wiersz skryptu importu:

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

Dodaj kolejny akapit i następujący element amp-instagram do tabeli 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>

Przyjrzyjmy się:

To na razie tyle treści.

Podsumowanie

  • Znasz już komponenty elastyczne na stronach AMP.
  • Dodano różne typy multimediów i tekstu.

Pełny kod tej sekcji znajdziesz tutaj: http://codepen.io/aghassemi/pen/OpXGoa

Do tej pory utworzyliśmy tylko zawartość statyczną dla naszej strony. W tej sekcji utworzymy interaktywną galerię zdjęć, zawierającą takie elementy jak karuzela, lightbox i działania AMP.

Strony AMP nie obsługują niestandardowego kodu JavaScript, ale umożliwiają one wyświetlanie i obsługę działań użytkowników przez kilka elementów.

Zadbaj o to, aby wszystkie zdjęcia do naszej strony AMP skupionej na zdjęciach nie zapewniały użytkownikom dobrych wrażeń. Na szczęście możemy użyć komponentu amp-carousel, by tworzyć slajdy slajdów przesuwane w poziomie.

Najpierw upewnij się, że tag skryptu w tagu amp-carousel jest uwzględniony w tagu head:

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

Teraz dodajmy w elastycznym formacie amp-carousel typ slides o kilku obrazach do 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" gwarantuje, że w danym momencie widoczny jest tylko jeden obraz i umożliwia użytkownikom ich przewijanie.

W przypadku obrazów w karuzeli używamy elementu layout="fill", ponieważ karuzela slajdów zawsze wypełnia swój element podrzędny, więc nie trzeba określać innego układu, który wymaga szerokości i wysokości.

Wypróbuj go i sprawdź, jak wygląda:

1 GIF

Dodajmy kontener z przewijaniem w poziomie do miniatur tych obrazów. Znów użyjemy elementu <amp-carousel>, ale bez atrybutu type="slides" i układu o stałej wysokości.

Dodaj następujące elementy po poprzednim elemencie 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>

Pamiętaj, że w przypadku miniatur używamy tych samych zdjęć w wersji layout="fixed" i w niskiej rozdzielczości.

Przyjrzyjmy się:

Zmiana obrazu po kliknięciu miniatury

Aby to zrobić, musimy powiązać zdarzenia, takie jak tap, z działaniami takimi jak zmiana slajdu.

event: możemy użyć atrybutu on do zainstalowania modułów obsługi zdarzeń dla danego elementu, a zdarzenie tap będzie obsługiwane we wszystkich elementach.

action: amp-carousel ujawnia działanie goToSlide(index=INTEGER), które można wywołać z modułu obsługi zdarzeń kliknięcia każdego obrazu.

Wiesz już więcej o wydarzeniu i działaniu, więc możemy je powiązać.

Najpierw musisz dodać do karuzeli karuzelę id, abyśmy mogli się do niej odwoływać z modułu obsługi zdarzeń kliknięcia na miniaturach.

Zmodyfikuj bieżący kod, aby dodać atrybut id do karuzeli slajdów (pierwszy):

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

  ....

Teraz zainstalujemy moduł obsługi zdarzeń (on="tap:imageSlides.goToSlide(index=<slideNumber>)")&" na każdym obrazie miniatury):

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

Pamiętaj, że musimy też dać mu tabindex i ustawić ARIA role dla ułatwień dostępu.

To wszystko. Od teraz każdy obraz miniatury będzie się wyświetlał w karuzeli.

2 GIF

Zwróć uwagę na miniaturę, gdy użytkownik ją kliknie

Czy możemy to zrobić? Wygląda na to, że nie ma żadnych działań, które mogłyby zmienić klasy CSS w przypadku elementu wywoływanego z modułów obsługi zdarzeń kliknięcia. Jak możemy wyróżnić wybraną miniaturę?

<amp-selector> na ratunek!

Komponent amp-selector różni się od dotychczas używanych komponentów. Nie jest to komponent prezentacji, ponieważ nie ma wpływu na układ strony. Jest to element składowy, dzięki któremu strona AMP informuje, którą opcję użytkownik wybrał.

Co robi amp-selector, jest dość proste, ale daje wiele możliwości:

  • Pole amp-selector może zawierać dowolne elementy HTML lub komponenty AMP.
  • Każdy element podrzędny elementu amp-selector może stać się opcją, jeśli ma atrybut option=<value>.
  • Gdy użytkownik kliknie element, który jest opcją, amp-selector dodaje tylko atrybut selected do tego elementu (i usuwa go z innych elementów opcji w trybie pojedynczego wyboru).
  • Możesz zmienić styl wybranego elementu w niestandardowym kodzie CSS, ustawiając kierowanie na atrybut selected za pomocą selektora atrybutu CSS.

Zobaczmy, w jaki sposób pomaga nam to w realizacji zadania.

Dodaj tag skryptu dla amp-selector do head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Pakowanie karuzeli w amp-selector
  2. Ustaw każdą miniaturę jako opcję, dodając atrybut option=<value>.
  3. Ustaw pierwszą miniaturę jako domyślną, dodając atrybut 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>

Teraz musimy dodać styl, by wyróżnić wybraną miniaturę.

Dodaj ten niestandardowy kod CSS po <style amp-custom> zmniejszonej kodzie CSS z początku AMP:

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

Przyjrzyjmy się:

GIF

Wygląda to dobrze, ale czy wystąpił błąd?

Jeśli użytkownik przesunie karuzelę slajdu, wybrana miniatura nie zostanie zaktualizowana. Jak powiązać obecny slajd z karuzelą z wybraną miniaturą?

W następnej sekcji dowiesz się, jak to zrobić.

Podsumowanie

  • Znasz już różne typy karuzeli i wiesz, jak z nich korzystać.
  • Zdarzenia i zdarzenia AMP umożliwiają zmianę widocznego slajdu w karuzeli obrazów, gdy użytkownik kliknie obraz.
  • Wiesz już, jak używać amp-selector i jak używać go jako elementu składowego wdrożenia interesujących przypadków użycia.

Pełny kod tej sekcji znajduje się tutaj: http://codepen.io/aghassemi/pen/gmMJMy

W tej sekcji użyjemy tagu amp-bind, by poprawić interaktywność galerii obrazów z poprzedniej sekcji.

Co to jest amp-bind?

Główny komponent AMP amp-bind umożliwia tworzenie niestandardowych interakcji z powiązaniem danych i wyrażeniami.

amp-bind ma 3 główne elementy:

  1. Stan
  2. Powiązanie
  3. Mutacja

Stan to zmienna stanu aplikacji zawierająca wszystko: od jednej wartości do złożonej struktury danych. Wszystkie współdzielone komponenty mogą odczytywać i zapisywać elementy.

Wiązanie to wyrażenie, które wiąże stan z atrybutem HTML lub treścią elementu.

Mutacja to działanie, które ma na celu zmianę wartości stanu w wyniku niektórych działań lub zdarzeń użytkownika.

Moc amp-bind zaczyna się w momencie wystąpienia mutacji: wszystkie komponenty, które mają powiązania z tym stanem, zostaną powiadomione i zaktualizują się automatycznie, aby uwzględnić nowy stan.

Zobaczmy, jak to działa.

Wcześniej używaliśmy działań AMP (np. goToSlide()), by powiązać karuzelę slajdów z całym obrazem ze zdarzeniem tap na miniaturach, a wybraną miniaturę użyliśmy amp-selector.

Zobaczmy, jak możemy ponownie zaimplementować ten kod, korzystając z metody amp-bind do wiązania danych.

Zanim zaczniemy jednak kodowanie, opracujmy nasze podejście:

1. Jaki jest nasz stan?

W naszym przypadku jedyną możliwą wartością jest ta, którą mamy aktualny numer slajdu, czyli selectedSlide.

2. Jakie mamy powiązania?

Co należy zmienić po zmianie ustawienia selectedSlide?

  • Widoczna slide karuzeli pełnych obrazów: 
<amp-carousel [slide]="selectedSlide" ...
  • Trzeba też zmienić element selected w aplikacji amp-selector. Spowoduje to usunięcie błędu, który napotkaliśmy w poprzedniej sekcji.
<amp-selector [selected]="selectedSlide" ...

3. Jakie są mutacje?

Kiedy selectedSlide musi się zmienić?

  • Gdy użytkownik przejdzie do nowego slajdu w karuzeli pełnoekranowej, przesuń palcem:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Gdy użytkownik wybierze miniaturę:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Użyjmy AMP.setState do wywołania mutacji, co oznacza, że nie potrzebujemy już całego kodu on="tap:imageSlides.goToSlide(index=n)".

Skompletujmy go:

Dodaj tag skryptu dla amp-bind do head:

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

Zastąp obecny kod galerii nowym podejściem:

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

Przetestujmy to. Kliknij miniaturę, a slajdy obrazów zmienią się. Przesuń slajdy obrazu, a wyróżniona miniatura się zmieni.

4.gif

Dodawanie tekstu do galerii

Wykonaliśmy już ciężką pracę przy określaniu stanu i mutacji dla bieżącego slajdu. Teraz możemy z łatwością udostępniać dodatkowe powiązania w celu aktualizacji innych informacji na podstawie bieżącego numeru slajdu.

Dodaj do&gasa tekstu x/z y" do naszej galerii:

Dodaj ten kod nad elementem karuzeli:

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

Tym razem oznacza to powiązanie z tekstem wewnętrznym elementu za pomocą atrybutu [text]=, a nie atrybutu HTML.

Przekonaj się:

5.gif

Podsumowanie

  • Dowiedz się więcej o miejscu amp-bind.
  • Dzięki amp-bind udoskonalono wersję galerii obrazów.

Pełny kod tej sekcji znajduje się tutaj: http://codepen.io/aghassemi/pen/MpeMdL

W tej sekcji użyjemy 2 nowych funkcji, aby dodać animację do naszej strony.

Dodawanie efektu paralaksy do tytułu

amp-fx-collection to rozszerzenie gotowych efektów wizualnych, np. paralaksy, które można łatwo włączyć dla dowolnego elementu z atrybutem.

Efekt paralaksy polega na tym, że użytkownik przewija stronę, a element przewija się szybciej lub wolniej w zależności od wartości przypisanej do atrybutu.

Efekt paralaksy można włączyć, dodając atrybut amp-fx="parallax" data-parallax-factor="<a decimal factor>" do dowolnego elementu HTML lub AMP.

  • Wartość współczynnika większa od 1 przyspiesza przewijanie elementu przez użytkownika w dół.
  • Wartość współczynnika mniejsza niż 1 powoduje wolniejsze przewijanie strony, gdy użytkownik przewija stronę w dół.

Dodajmy paralaksę z współczynnikiem 1,5 do tytułu strony i zobaczmy, jak wygląda.

Dodaj tag skryptu dla amp-fx-collection do head:

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

Odszukaj w kodzie istniejący element z tytułem i dodaj do niego atrybut 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>

Przyjrzyjmy się wynikowi:

6 GIF

Tytuł jest teraz przewijany szybciej niż reszta strony. Super!

Dodawanie animacji do strony

amp-animation to funkcja, która przenosi interfejs Web anims API na strony AMP.

W tej sekcji użyjemy amp-animation, by wprowadzić subtelny efekt powiększenia obrazu na okładce.

Dodaj tag skryptu do komponentu amp-animacja do strony head:

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

Teraz musimy zdefiniować animację i element docelowy, do którego się odnosi.

Animacje są zdefiniowane jako JSON w tagu amp-animation najwyższego poziomu.

Wstaw ten kod bezpośrednio pod tagiem body otwierającym na Twojej stronie.

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

Ten kod definiuje animację trwającą 30 sekund bez opóźnienia i skalującą obraz o 30%.

Określamy fill do przodu, by zapewnić dalsze powiększenie obrazu po zakończeniu animacji. target to element HTML id elementu, którego dotyczy animacja.

Dodaj id do elementu banera powitalnego na naszej stronie, aby amp-animation mógł podjąć związane z nim działania.

  1. Znajdź w kodzie tag powitalny (obraz o wysokiej rozdzielczości z kodem layout="fixed-height") i dodaj id="heroimage" do tagu amp-img.
  2. Aby uprościć sobie pracę, usuń też tag media="(min-width: 416px)" i usuń drugą kreację o niskiej rozdzielczości amp-img, abyśmy nie musieli na razie obsługiwać wielu animacji i zapytań o media w komponencie amp-animation.
<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">

...

Jak widzisz, skalowanie obrazu powoduje przepełnienie jego nadrzędnego obiektu, więc musimy go naprawić, ukrywając przepełnienie.

Na końcu istniejącego pliku <style amp-custom> dodaj tę regułę CSS:

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

Wypróbuj go i sprawdź, jak wygląda:

7gif.

Subtelna!

Mogę to jednak zrobić, wykorzystując CSS. Jaki jest cel amp-animation?

To oczywiście prawda, ale parametr amp-animation umożliwia korzystanie z dodatkowych funkcji, których nie można wykonać w samej usłudze porównywania cen. Na przykład animację można uruchamiać na podstawie widoczności (a wstrzymywać również na podstawie widoczności) lub wywoływać działanie AMP. amp-animation wykorzystuje również interfejs API Web anims, który ma więcej funkcji niż animacje CSS, zwłaszcza w zakresie komponowania.

Podsumowanie

  • Wiesz już, jak tworzyć efekty paralaksy przy użyciu aplikacji amp-fx-collection.
  • Dowiedz się więcej o miejscu amp-animation.

Pełny kod tej sekcji znajdziesz tutaj: http://codepen.io/aghassemi/pen/OpXKzo

Wspaniała, interaktywna strona AMP właśnie się zakończyła.

Świętujmy to, aby zobaczyć, co udało Ci się dzisiaj osiągnąć.

Oto link do strony końcowej: http://s.codepen.io/aghassemi/debug/OpXKzo

... a ostateczny kod: http://codepen.io/aghassemi/pen/OpXKzo

Bez nazwy.gif

Zbiór wpisów dla ćwiczeń z programowania możesz znaleźć tutaj: https://codepen.io/collection/XzKmNB/

Zanim zaczniemy...

Zapomnialiśmy sprawdzić, jak strona wygląda w przypadku innych elementów, np. tabletu w trybie poziomym.

Zobaczmy:

Bez nazwy.gif

Znakomity

Życzę miłego dnia.

Co dalej?

To ćwiczenie z programowania zachęca tylko do działania na stronach AMP. Dostępnych jest wiele zasobów i ćwiczeń z programowania, które pomogą Ci tworzyć wspaniałe strony AMP:

Jeśli masz pytania lub problemy, znajdź nas na kanale Slack AMP, utwórz dyskusje, raporty o błędach lub prośby o dodanie funkcji w GitHub.