mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw';
|
|
import type { CodeObject } from '../../../types/code';
|
|
|
|
export const flyingPosters: CodeObject = {
|
|
cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
|
|
installation: `npm install ogl`,
|
|
usage: `<template>
|
|
<FlyingPosters
|
|
:items="posterImages"
|
|
:plane-width="320"
|
|
:plane-height="320"
|
|
:distortion="3"
|
|
:scroll-ease="0.01"
|
|
:camera-fov="45"
|
|
:camera-z="20"
|
|
class="h-full w-full"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FlyingPosters from "./FlyingPosters.vue";
|
|
|
|
const posterImages = [
|
|
'https://picsum.photos/800/800?grayscale&random=1',
|
|
'https://picsum.photos/800/800?grayscale&random=2',
|
|
'https://picsum.photos/800/800?grayscale&random=3',
|
|
'https://picsum.photos/800/800?grayscale&random=4',
|
|
'https://picsum.photos/800/800?grayscale&random=5',
|
|
'https://picsum.photos/800/800?grayscale&random=6',
|
|
'https://picsum.photos/800/800?grayscale&random=7',
|
|
'https://picsum.photos/800/800?grayscale&random=8',
|
|
'https://picsum.photos/800/800?grayscale&random=9',
|
|
'https://picsum.photos/800/800?grayscale&random=10',
|
|
];
|
|
</script>`,
|
|
code
|
|
};
|