Amp-google-vrview-image ¿Para qué sirve?

Amp-google-vrview-image

La extensión amp-google-vrview-image permite incorporar medios VR de 360 grados en páginas AMP.

Si experimenta con este ejemplo en un navegador de escritorio, puede interactuar con la imagen mostrada haciendo clic en ella y arrastrando el ratón. La mejor manera de percibir los efectos permitidos por este componente es verlo en un dispositivo móvil e interactuar con las imágenes moviendo el dispositivo usando el visor de cartón .

Los atributos soportados por este componente son:

Src: el origen de la imagen que se muestra
Stereo: si se proporciona, la imagen se considera una imagen estereoscópica; De lo contrario es una imagen monoscópica.
Yaw: rotación inicial de yaw ) del observador
Yaw-only: si se especifica, restrinja el movimiento sólo a las rotaciones de guiñada

Añadir el script amp-google-vrview-image justo abajo de la apertura <head>


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

Uso básico

Por defecto amp-google-vrview-image espera una imagen mono y el valor de guiñada es 0.


Ejemplo





<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"
  width="400"
  height="300"
  layout="responsive">
</amp-google-vrview-image>

Agregue el atributo stereo para las imágenes estereoscópicas


Ejemplo





<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"
  stereo
  width="400"
  height="300"
  layout="responsive">
</amp-google-vrview-image>

Agregue el atributo stereo para las imágenes estereoscópicas. El valor inicial de guiñada es de 90 grados


Ejemplo





<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"
  stereo
  yaw="90"
  width="400"
  height="300"
  layout="responsive">
</amp-google-vrview-image>

Utilice el atributo de yaw-only para restringir el movimiento al eje de guiñada solamente


Ejemplo





<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"
  stereo
  yaw-only
  width="400"
  height="300"
  layout="responsive">
</amp-google-vrview-image>

Tags: Amp HTML en espanol

EFECTOS VISUALES

Amp-google-vrview-image ¿Para qué sirve?