Crear efecto de movimiento de paralaje interactivo mediante WebVR API-gyroBackground. js

Vista prévia

Descripción

gyrobackground. js es una librería JavaScript pura que aplica un efecto de movimiento paralaje de estilo iOS a las imágenes usando webvr API .

Asegúrese de visitar la página demo en sus dispositivos móviles que soportan WebVR:

Funcionamiento

Instalación:

# Yarn
$ yarn add gyrobackground

# NPM
$ npm install gyrobackground --save

Importa la librería gyroBackground. js.

<script src="dist/gyroBackground.min.js"></script>

Cree un contenedor en el que desee mostrar las imágenes de paralaje.

<div id="target" class="gyro">

...
</div>

Inicialice la biblioteca en el elemento contenedor y especifique la ruta a la imagen de paralaje.

var background = new GyroBackground('.gyro', 'bg.jpg', {


// options here
});

Puede agregar más imágenes de paralaje (capas) al contenedor.

background.add('bg-2.jpg', {

// options here
});

Configuración del efecto de movimiento de paralaje al anular los siguientes parámetros:

var background = new GyroBackground('.gyro', 'bg.jpg', {



// sensitivity


sensitivity: 0.5,



// inverts effect


inverted: false,



// enables the parallax effect on devices that don't have WebVR support.


parallax: false,



// parallax speed


parallaxSpeed: -2,



// sensitivity in portrait mode.


portraitSensitivity: portraitSensitivity,



// sensitivity in landscape mode.


landscapeSensitivity: landscapeSensitivity,



// zoom levels


zoom: 0,


portraitZoom: portraitZoom,


landscapeZoom: landscapeZoom,



// offset options


offsetX: 0,


offsetY: 0,


portraitOffsetX: portraitOffsetX,


portraitOffsetY: portraitOffsetY,


landscapeOffsetX: landscapeOffsetX,


landscapeOffsetY: landscapeOffsetY,



// shows a 3D representation of the phone's original position vs current.


visualize: false,



// additional class


className: false



});