amp-anim
Introduction
Use amp-anim
to embed animations (gif, webp) into your AMP HTML files. Animation files should be loaded via HTTPS.
Setup
Import the animation component in the header.
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Basic usage
A basic embed. The usage of amp-anim
is similar to that of amp-img
.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
</amp-anim>
Placeholder
You can use amp-img
as a placeholder when loading of src
file takes time. The placeholder
attribute must be added to the nested amp-img
in this case.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
<amp-img placeholder width="245" height="300" src="https://amp.dev/static/samples/img/gopher.png"></amp-img>
</amp-anim>
Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.
Zu Stack Overflow wechseln Ein Feature wurde nicht erklärt?Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.
Beispiel auf GitHub bearbeiten-
Written by @sebastianbenz