Александр Казаков

Александр Казаков

Фрилансер, frontend, вёрстка

On Posted on by Александр Казаков to AMP

AMP Всплывающее окно

Документация

Сложность

AMP 50%
HTML 70%
CSS 60%
JavaScript 30%

AMP - Lightbox - Базовый вариант

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

Создадим пустую папку с нашим проектом. В данной папке, создадим файл:

  1. index.html

В данном файле, напишем следующий код:

<!doctype html>
<html amp lang="ru">

<head>
  <title>AMP Lightbox</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключим Шрифт -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic-ext">
  <!-- end Подключим Шрифт -->
  <!-- begin Подключаем для Lightbox нужный скрипт -->
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <!-- end Подключаем для Lightbox нужный скрипт --><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> <style amp-custom>
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
html {
  font-size: 16px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  background-color: #efefef;
  text-align: center;
}
.demo-descr{
  margin-top: 30px;
  margin-bottom: 30px;
}

.amp-lightbox{
  background: rgba(0,0,0,0.8);
}
.amp-lightbox__content{
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left:  50%;
  max-width: 500px;
  width: 90%;
}
.amp-lightbox__close{
  border: none;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 30px;
  position: absolute;
  right: -20px;
  top: -30px;
  transition: color .3s;
}
.amp-lightbox__close:hover{
  color: #fff;
}
.amp-lightbox__content-header{
  background-color: #083250;
  border-bottom: 1px solid #000;
  padding: 20px 30px;
  position: relative;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  margin-bottom: 15px;
}
.amp-lightbox__header-title{
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
}
.amp-lightbox__content-body{
  background-color: #fff;
  padding: 30px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.amp-lightbox__body-descr-p{
  margin-bottom: 15px;
}
  </style> </head>

<body>
  <div class="demo-descr">
    <h1>Lightbox - Basic</h1>
    <p>Пример всплывающего окна, на AMP странице.</p>
  </div>
  <button on="tap:amp-lightbox">Смотреть всплывающее окно</button>
  <amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
    <div class="amp-lightbox__content">
      <div class="amp-lightbox__content-header">
        <button type="button" on="tap:amp-lightbox.close" class="amp-lightbox__close">×</button>
        <h4 class="amp-lightbox__header-title">Пример всплывающего окна, на AMP странице</h4></div>
      <div class="amp-lightbox__content-body">
        <div class="amp-lightbox__body-descr">
          <p class="amp-lightbox__body-descr-p">The amp-lightbox component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.</p>
          <p class="amp-lightbox__body-descr-p">The amp-lightbox component defines the child elements that will be displayed in a full-viewport overlay. To close the lightbox via click or tap use the on attribute on one or more elements inside the lightbox. In this example the user can click anywhere in the lightbox to close it.</p>
        </div>
      </div>
    </div>
  </amp-lightbox>
</body>

</html>

Демонстрацию работы, можно посмотреть Здесь.

AMP - Lightbox - Форма обратной связи

Описание и демонстрацию работы, можно посмотреть Здесь.

AMP - Lightbox - Изображение

Существует специальный тег amp-image-lightbox для изображений, его и будем использовать.

На официальном сайте и на ampbyexample.com достаточно много базовых примеров. Здесь будут более сложные примеры, чтобы не повторяться, и не копировать то, что уже есть.

Создадим пустую папку с нашим проектом. В данной папке, создадим файл:

  1. index.html

В данном файле, напишем следующий код:

<!doctype html>
<html amp lang="ru">

<head>
  <title>AMP Lightbox Carousel</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключим Шрифт -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic-ext">
  <!-- end Подключим Шрифт -->
  <!-- begin Подключаем Карусель -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <!-- end Подключаем Карусель -->
  <!-- begin Подключаем Image lightbox -->
  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
  <!-- end Подключаем Image lightbox -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <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> <style amp-custom>
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
html {
  font-size: 16px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  background-color: #efefef;
  text-align: center;
}
.demo-descr{
  margin-top: 30px;
  margin-bottom: 30px;
}
.container{
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.amp-figure{
  position: relative;
  margin: 0;
}
.amp-figure__image{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
.amp-figure__figcaption{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #ddd;
}
.amp-carousel__preview{
  display: flex;
  justify-content: space-around;
}
.amp-carousel__preview-item{
  max-width: 60px;
  width: 100%;
  height: auto;
  display: block;
  border:  1px solid white;
}
</style> </head>

<body>
  <div class="demo-descr">
    <h1>Lightbox - Сarousel</h1>
    <p>Пример всплывающего окна в карусели, на AMP странице.</p>
  </div>
  <div class="container">
    <amp-image-lightbox id="amp-carousel__lightbox" layout="nodisplay"></amp-image-lightbox>
    <amp-carousel id="amp-carousel" width="500" height="300" layout="responsive" type="slides" loop>
      <figure class="amp-figure">
        <amp-img on="tap:amp-carousel__lightbox" role="button" tabindex="0" src="http://via.placeholder.com/1000x600/00BFFF/FFFFFF?text=1" alt="Item - 1" title="Item - 1, view in lightbox" layout="responsive" width="500" height="300" class="amp-figure__image"></amp-img>
        <figcaption class="amp-figure__figcaption">Item - 1 Description</figcaption>
      </figure>
      <figure class="amp-figure">
        <amp-img on="tap:amp-carousel__lightbox" role="button" tabindex="0" src="http://via.placeholder.com/1000x600/4051B5/FFFFFF?text=2" alt="Item - 2" title="Item - 2, view in lightbox" layout="responsive" width="500" height="300" class="amp-figure__image"></amp-img>
        <figcaption class="amp-figure__figcaption">Item - 2 Description</figcaption>
      </figure>
      <figure class="amp-figure">
        <amp-img on="tap:amp-carousel__lightbox" role="button" tabindex="0" src="http://via.placeholder.com/1000x600/673AB7/FFFFFF?text=3" alt="Item - 3" title="Item - 3, view in lightbox" layout="responsive" width="500" height="300" class="amp-figure__image"></amp-img>
        <figcaption class="amp-figure__figcaption">Item - 3 Description</figcaption>
      </figure>
      <figure class="amp-figure">
        <amp-img on="tap:amp-carousel__lightbox" role="button" tabindex="0" src="http://via.placeholder.com/1000x600/E91C63/FFFFFF?text=4" alt="Item - 4" title="Item - 4, view in lightbox" layout="responsive" width="500" height="300" class="amp-figure__image"></amp-img>
        <figcaption class="amp-figure__figcaption">Item - 4 Description</figcaption>
      </figure>
    </amp-carousel>
    <div class="amp-carousel__preview">
      <amp-img on="tap:amp-carousel.goToSlide(index=0)" role="button" tabindex="0" src="http://via.placeholder.com/60x40/00BFFF/FFFFFF?text=1" width="60" height="40" layout="responsive" alt="a sample image" class="amp-carousel__preview-item"></amp-img>
      <amp-img on="tap:amp-carousel.goToSlide(index=1)" role="button" tabindex="1" src="http://via.placeholder.com/60x40/4051B5/FFFFFF?text=2" width="60" height="40" layout="responsive" alt="a sample image" class="amp-carousel__preview-item"></amp-img>
      <amp-img on="tap:amp-carousel.goToSlide(index=2)" role="button" tabindex="2" src="http://via.placeholder.com/60x40/673AB7/FFFFFF?text=3" width="60" height="40" layout="responsive" alt="a sample image" class="amp-carousel__preview-item"></amp-img>
      <amp-img on="tap:amp-carousel.goToSlide(index=3)" role="button" tabindex="3" src="http://via.placeholder.com/60x40/E91C63/FFFFFF?text=4" width="60" height="40" layout="responsive" alt="a sample image" class="amp-carousel__preview-item"></amp-img>
    </div>
  </div>
</body>

</html>

Демонстрацию работы, можно посмотреть Здесь.

Получилась отnличная адаптивная карусель с lightbox.

Tags

Рубрики

Свежие записи

Комментарии

Метки

amp amp-html css Facebook freelancing google-amp html Javascript lightbox php royalslider stackoverflow vk youtube Вконтакте Обзор О жизни Центрирование background-image Центрирование текста фриланс

Полезное