Nationwide Polamorous Matrimony

    @luxdamore/vue-fake3d-image-effect

    1.3.0 • Public • Published

    🎉 Vue Fake3d image effect

    DEMO

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

    npm version npm downloads License

    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
            v-once
            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

    MIT License // Copyright (©) 2019-present Luca Iaconelli

    💸 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

    Otechie

    ko-fi

    💘 Inspired by

    Fake3dImageEffect by Tympanus Check Preparing the image section for how to do the image-map

    Install

    npm i @luxdamore/vue-fake3d-image-effect

    DownloadsWeekly Downloads

    57

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar