vue-displacement-slideshow

Webgl image displacement transitions made simple. A Vue.js 2.0 slideshow component working with Three.js and GSAP.

Demo

The canvas can be interactive as well by setting the isInteractive props to true. See the props section to find more.

Live demo

DEMO

Installation

NPM

 npm i --save vue-displacement-slideshow

Example

With VueJs 2.0 :

<template>
    <vue-displacement-slideshow
            :images="images"
            displacement="require('../assets/displacement.png')"
            :intensity="0.2"
            :speedIn="1.4"
            :speedOut="1.4"
            ease="expo.out"
            ref="slideshow"></vue-displacement-slideshow>
</template>

<script>
    import VueDisplacementSlideshow from "vue-displacement-slideshow";

    export default {
        components: {
            VueDisplacementSlideshow,
        },
        computed: {
            images() {
                return [
                    require("../assets/images/1.jpg"),
                    require("../assets/images/2.jpg"),
                    require("../assets/images/3.jpg")
                ];
            }
        },
        methods: {
            init() {
                //We loop through all our images by calling the 'next' method of our component every 2 seconds
                setInterval(() => {
                    this.$refs.slideshow.next();
                }, 2000);
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

With Nuxt :

Just wrap the component between a no-ssr tag like so :

<no-ssr>
    <vue-displacement-slideshow />
</no-ssr>

This component is heavily based on this library : https://github.com/robin-dela/hover-effect

Props

Methods

Events emitted

Behavior

The first image of the array is displayed at first. When we call the next method while currently showing the last image, it will go to the first image. When we call the previous method while currently showing the first image, it will go to the last image.

The images are displayed as we would use background-size:cover in CSS.

If you set the prop startAsTransparent to true, then it adds a texture to your images array. If you want to remove it after, you can just call the removeImage method with 0 as the index parameter value.

Contributing

Contributions are welcome ! Follow the instructions in the contributing file

License

MIT