A fake 3D Image Effect made with WebGL - w/ VueJS - SSR Compatible
This package is available on npm.
# Save it as a dep
npm install --save @luxdamore/vue-fake3d-image-effect
// 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,
},
}; // Plugin
import Fake3dImageEffect from '@luxdamore/vue-fake3d-image-effect';
import '@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css';
// Install
Vue.use(
Fake3dImageEffect
); <!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> <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>- Create a file in the
pluginsfolder; - Name it
fake3d-image.client.js; - Install it as a plugin;
- Import it in the
nuxt.config.jsfile as client side only.
# 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
| 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 |
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.
Details changes for each release are documented in the release notes.
MIT License // Copyright (©) 2019-present Luca Iaconelli
Do you want to share a beer? We can be good friends.. Paypal // Patreon
It's always a good day to be magnanimous - cit
Check
Preparing the imagesection for how to do theimage-map.
