Awesome

🎉 Vue Fake3d image effect

A fake 3D Image Effect made with WebGL - w/ VueJS - SSR Compatible

Installation

This package is available on npm.


    # Save it as a dep
    npm install --save @luxdamore/vue-fake3d-image-effect

Usage

As a component


    // Component
    import { Fake3dImageEffect } from '@luxdamore/vue-fake3d-image-effect';
    import '@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css';

    // Install
    Vue.component(
        Fake3dImageEffect.name,
        Fake3dImageEffect
    );

    // Or in a .vue file
    export default {
        components: {
            'fake3d-image-effect': Fake3dImageEffect,
        },
    };

As a plugin


    // Plugin
    import Fake3dImageEffect from '@luxdamore/vue-fake3d-image-effect';
    import '@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css';

    // Install
    Vue.use(
        Fake3dImageEffect
    );

Browser's way


    <!doctype html>
    <html>
        <head>

            <!-- Fake3dImageEffect style -->

                <!-- Old way -->
                <link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-fake3d-image-effect@latest/dist/Fake3dImageEffect.css" />
                <!-- end old way -->

                <!-- New way -->
                <link rel="preload" href="https://unpkg.com/@luxdamore/vue-fake3d-image-effect@latest/dist/Fake3dImageEffect.css" as="style" onload="this.rel='stylesheet'" />
                <link rel="preload" href="https://unpkg.com/@luxdamore/vue-fake3d-image-effect@latest/dist/Fake3dImageEffect.umd.min.js" as="script" />
                <!-- end new way -->

            <!-- end Fake3dImageEffect style -->

        </head>
        <body>

            <!--
                Others script (ex. VueJs) and html.
            -->

            <!-- Fake3dImageEffect script -->
                <script src="https://unpkg.com/@luxdamore/vue-fake3d-image-effect@latest/dist/Fake3dImageEffect.umd.min.js"></script>
            <!-- end Fake3dImageEffect script -->

        </body>
    </html>

Markup


    <fake3d-image-effect
        centered
        fill-height-content
        tag="div"
        image="/imgs/about.jpg"
        image-map="/imgs/about-map.jpg"
    >
        <div class="container">
            <h2>
                Stare out cat door then go back inside
            </h2>
            <p>
                Cat ipsum dolor sit amet, find box a little too small and curl up with fur hanging out,lick left leg for ninety minutes, still dirty. Stand in doorway, unwilling to chose whether to stay in or go out unwrap toilet paper i vomit in the bed in the middle of the night.
            </p>
        </div>
    </fake3d-image-effect>

Integrations

NuxtJS

Create a file in the plugins folder;
Name it fake3d-image.client.js;
Install it as a plugin;
Import it in the nuxt.config.js file as client side only.

Options

Slots


    # Available
    slot="default"  # Add some content
    slot="overlay"  # Add an overlay between the default content and the background image
    slot="footer"   # Add a footer to the component

Props

Attribute	Type	Default	Required	About
tag	String	section	false	Tag of the rendered VNode in DOM
image	String	null	true	The img-src path
image-map	String	null	true	The img-src-map path
horizontal-threshold	String, Number	18	false	Sensibility for the X-ax
vertical-threshold	String, Number	23	false	Sensibility for the Y-ax
max-tilt	String, Number	15	false	Sensibility for the Tilt
gyro	Object	{ gravityNormalized:true, }	false	Gyro config object
centered	Boolean	false	false	Style, `text-align: center`
fill-height-content	Boolean	false	false	Style `height: 100%` for the default slot
width	String	100%	false	Width of component
height	String	100vh	false	Height of component

🐞 Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

👥 Contribution

Please make sure to read the Contributing Guide before making a pull request.

📖 Changelog

Details changes for each release are documented in the release notes.

📃 License

💸 Are you feeling generous today? :)

Do you want to share a beer? We can be good friends.. Paypal // Patreon

It's always a good day to be magnanimous - cit

💼 Hire me

💘 Inspired by

Fake3dImageEffect by Tympanus

Check Preparing the image section for how to do the image-map.

💡 Lighthouse

Lighthouse audit score