Vue Fake 3D Image Effect Made with WebGL

Vue Fake 3D Image Effect Made with WebGL

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

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/[email protected]/dist/Fake3dImageEffect.css" />
                <!-- end old way -->

                <!-- New way -->
                <link rel="preload" href="https://unpkg.com/@luxdamore/[email protected]/dist/Fake3dImageEffect.css" as="style" onload="this.rel='stylesheet'" />
                <link rel="preload" href="https://unpkg.com/@luxdamore/[email protected]/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/[email protected]/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

Demo Download

A fake 3D Image Effect with WebGL and vue

A fake 3D Image Effect with WebGL and vue

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

Vue Fake3d image effect

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

Installation

This package is available on npm.

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

Usage

As a component
source-js
    // 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
source-js
    // 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
text-html-basic
    <!doctype html>
    <html>
        <head>

            <!-- Fake3dImageEffect style -->

                <!-- Old way -->
                <link rel="stylesheet" href="https://unpkg.com/@luxdamore/[email protected]/dist/Fake3dImageEffect.css" />
                <!-- end old way -->

                <!-- New way -->
                <link rel="preload" href="https://unpkg.com/@luxdamore/[email protected]/dist/Fake3dImageEffect.css" as="style" onload="this.rel='stylesheet'" />
                <link rel="preload" href="https://unpkg.com/@luxdamore/[email protected]/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/[email protected]/dist/Fake3dImageEffect.umd.min.js"></script>
            <!-- end Fake3dImageEffect script -->

        </body>
    </html>

Markup
text-html-basic
    <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
source-shell
    # 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

Inspired by

Fake3dImageEffect by Tympanus

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

Lighthouse

Download Details:

Author: LuXDAmore

Live Demo: https://luxdamore.github.io/vue-fake3d-image-effect

Official Website: https://github.com/LuXDAmore/vue-fake3d-image-effect

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

5 Best Vue Image Zoom Components For Vue.js App

5 Best Vue Image Zoom Components For Vue.js App

Vue Image zoom is a UI component that enables the visitor to zoom in/out images on the applications.

Vue Image zoom is a UI component that enables the visitor to zoom in/out images on the applications.

In this blog post, I’d like to share with you the 5 best Vue.js image zoom components that make it easier to implement the image zoom functionality on your web application.

1. vue-zoombox

a advanced zoombox.

  • Reposition on window resize
  • Full resolution for images
  • support for caption
  • support for scrolling
  • support for thumbs

Demo

Download


2. vue-product-zoomer

A Image Zoomer For Eshop Website.Saving Your Time...

Demo

Download


3. vue-magnifier

A Vue.js 2+ image zoom component which applies a magnifying glass effect to images.

Demo

Download


4. vue-zoom-on-hover

this vue.js component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area

Demo

Download


5. vue-zoomer

Zoom the image or other thing with mouse or touch

Demo

Download


I hope you like it!