AMP (Accelerated Mobile Pages) это ускоренные мобильные страницы.
Читайте:
• Официальный сайт AMP страниц:
https://amp.dev
• Валидация (проверки на ошибки):
https://validator.ampproject.org
• Google реклама на AMP-страницах:
https://support.google.com/admanager/answer/6352089?hl=ru
• Yandex реклама на AMP-страницах:
https://yandex.ru/support/partner2/mobile/amp-pages.html
Если у вас не установлена
Google Web Designer нужно установить
Google Web Designer...
Открываем
Google Web Designer
Новый кадр сделаем активным.
Нажмем на стрелочку (слево вверху чтобы переместить текст).
Увидим синюю линию это путь перемещения
Html
<!DOCTYPE html>
<html amp4ads="">
<head>
<meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl343110ebc25149ca82cf9780bd0c2f33"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="generator" content="Google Web Designer 8.0.1.0401">
<meta name="environment" content="gwd-googleads"><meta name="ad.size" content="width=300,height=250">
<script async="" src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
<style amp4ads-boilerplate="">
body{visibility:hidden}
</style>
<style amp-custom="">
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
p,
h1,
h2,
h3 {
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
perspective: 1400px;
-webkit-perspective: 1400px;
-moz-perspective: 1400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
position: absolute;
}
.gwd-page-container-wrapper {
width: 300px;
height: 250px;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
top: 0px;
left: 0px;
transform: translateZ(0px);
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
width: 300px;
height: 250px;
}
.gwd-page-size {
width: 300px;
height: 250px;
}
#pagedeck > .amp-carousel-button-prev,
#pagedeck > .amp-carousel-button-next {
display: none;
}
.gwd-p-uckv {
position: absolute;
left: 81px;
top: 159px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
}
#page1.gwd-play-animation .gwd-gen-1i28gwdanimation {
animation: 0.5s linear 0s 1 normal forwards gwd-gen-1i28gwdanimation_gwd-keyframes;
-webkit-animation: 0.5s linear 0s 1 normal forwards gwd-gen-1i28gwdanimation_gwd-keyframes;
-moz-animation: 0.5s linear 0s 1 normal forwards gwd-gen-1i28gwdanimation_gwd-keyframes;
}
</style>
<script data-source="https://cdn.ampproject.org/v0/amp-gwd-animation-0.1.js" async="" custom-element="amp-gwd-animation" src="https://cdn.ampproject.org/v0/amp-gwd-animation-0.1.js"></script>
<script data-source="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js" async="" custom-element="amp-ad-exit" src="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js"></script>
<script data-source="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async="" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</head>
<body class="document-body">
<div class="gwd-page-container-wrapper">
<amp-carousel class="gwd-page-container" id="pagedeck" layout="fill" type="slides">
<div id="page1" class="gwd-page-wrapper page1-content" data-gwd-width="300px" data-gwd-height="250px">
<div class="gwd-page-content gwd-page-size">
<p class="gwd-p-uckv gwd-gen-1i28gwdanimation">Hello!</p>
</div>
</div>
</amp-carousel>
</div>
<amp-gwd-animation id="gwdAnim" timeline-event-prefix="tl_" layout="nodisplay">
</amp-gwd-animation>
<amp-ad-exit id="exit-api">
<script type="application/json">{ "targets": {} }
</script>
</amp-ad-exit>
<style amp-keyframes="">
@keyframes gwd-gen-1i28gwdanimation_gwd-keyframes {
0% {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
100% {
transform: translate3d(160px, -133px, 0px);
-webkit-transform: translate3d(160px, -133px, 0px);
-moz-transform: translate3d(160px, -133px, 0px);
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-1i28gwdanimation_gwd-keyframes {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(160px, -133px, 0px);
-webkit-animation-timing-function: linear;
}
}
@-moz-keyframes gwd-gen-1i28gwdanimation_gwd-keyframes {
0% {
-moz-transform: translate3d(0px, 0px, 0px);
-moz-animation-timing-function: linear;
}
100% {
-moz-transform: translate3d(160px, -133px, 0px);
-moz-animation-timing-function: linear;
}
}
</style>
</body>
</html>
Афишу
Your feedback ... Comments ...