@luxdamore/vue-fake3d-image-effect

A fake 3D Image Effect with WebGL - w/ VueJS - SSR Compatible
4,614 22
vuejs webgl design nuxtjs 3d effects tympanus codrops
Install
npm install @luxdamore/vue-fake3d-image-effect
Latest Version:1.3.0
Vue:2
License:MIT
Last Updated:Mar 3, 2023
Links: GitHub  ·  npm
Maintainer: luxdamore

🎉 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

Related Packages

@luxdamore/vue-cursor-fx

An animated custom cursor effects for interactive elements like navigation - w/...

3,539 69
codrops design effects nuxtjs tympanus vuejs cursor
@luxdamore/vue-css-doodle

Porting of css-doodle to VueJs, a web component for drawing patterns with CSS -...

1,094 16
design effects nuxtjs vuejs css css-animations css-doodle doodle
@tresjs/post-processing

Post-processing library for TresJS

386,088 3,771
3d effects fx post-processing three threejs vue
vue-gl

Vue.js components rendering 3D graphics reactively via three.js

8,863 682
3d vuejs webgl canvas graphics three threejs vue
vue-force-graph

Vue component for 2D, 3D, VR and AR force directed graphs

17,517 29
3d webgl 2d ar canvas force graph three vr vue

Version History

Version Released Vue License
1.3.0 ^2.6.11 MIT
1.2.5 ^2.6.11 MIT
1.2.4 ^2.6.10 https://github.com/LuXDAmore/vue-fake3d-image-effect/LICENSE
1.2.3 ^2.6.10 https://github.com/LuXDAmore/vue-fake3d-image-effect/LICENSE
1.2.2 ^2.6.10 https://github.com/LuXDAmore/vue-fake3d-image-effect/LICENSE