Efecto de sombra paralela para imágenes & videos-imagen-sombra
| Autor: | tunguskha |
|---|---|
| Views Total: | 1,088 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Esta es la versión de JavaScript de vainilla de la jQuery Image-Shadow. js plugin que proporciona una manera sencilla de aplicar un efecto de sombra paralela a cualquier imagen y vídeo usando JavaScript puro.
Funcionamiento
Importe la versión minimizada de la biblioteca Image-Shadow en el documento.
<script src="assets/js/image-shadow.min.js"></script> <!-- for video --> <script src="assets/js/video-shadow.min.js"></script>
Envuelve tu imagen en un contenedor DIV con la clase CSS de ' ishadow ' y especifica el nivel de desenfoque en el efecto ' Data-Blur '.
<div class="ishadow"> <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=633"> </div> <div class="ishadow"> <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=646"> </div> <div class="ishadow"> <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=628"> </div> ...
Para aplicar el efecto de sombra paralela a los vídeos HTML5:
<div class="vshadow"> <video autoplay preload loop data-autoplay="true" data-loop="true" data-blur="15" src="1.mp4" type="video/mp4"></video> </div>
Registro de cambios
12/23/2018
- Agregar imagen de traducción
