mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Merge branch 'main' into feat/true-focus
This commit is contained in:
David
GitHub
180
src/demo/Backgrounds/BeamsDemo.vue
Normal file
180
src/demo/Backgrounds/BeamsDemo.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="beams-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Beams
|
||||
:beam-width="beamWidth"
|
||||
:beam-height="beamHeight"
|
||||
:beam-number="beamNumber"
|
||||
:light-color="lightColor"
|
||||
:speed="speed"
|
||||
:noise-intensity="noiseIntensity"
|
||||
:scale="scale"
|
||||
:rotation="rotation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Width"
|
||||
:model-value="beamWidth"
|
||||
@update:model-value="beamWidth = $event"
|
||||
:min="0.1"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Height"
|
||||
:model-value="beamHeight"
|
||||
@update:model-value="beamHeight = $event"
|
||||
:min="1"
|
||||
:max="25"
|
||||
:step="1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Count"
|
||||
:model-value="beamNumber"
|
||||
@update:model-value="beamNumber = $event"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
:model-value="speed"
|
||||
@update:model-value="speed = $event"
|
||||
:min="0.1"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Noise Intensity"
|
||||
:model-value="noiseIntensity"
|
||||
@update:model-value="noiseIntensity = $event"
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.05"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Noise Scale"
|
||||
:model-value="scale"
|
||||
@update:model-value="scale = $event"
|
||||
:min="0.01"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Rotation"
|
||||
:model-value="rotation"
|
||||
@update:model-value="rotation = $event"
|
||||
:min="0"
|
||||
:max="360"
|
||||
:step="1"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="beams" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="beams.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue'
|
||||
import PropTable from '@/components/common/PropTable.vue'
|
||||
import Dependencies from '@/components/code/Dependencies.vue'
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue'
|
||||
import CodeExample from '@/components/code/CodeExample.vue'
|
||||
import Customize from '@/components/common/Customize.vue'
|
||||
import Beams from '@/content/Backgrounds/Beams/Beams.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import { beams } from '@/constants/code/Backgrounds/beamsCode'
|
||||
|
||||
const beamWidth = ref(3)
|
||||
const beamHeight = ref(30)
|
||||
const beamNumber = ref(20)
|
||||
const lightColor = ref('#ffffff')
|
||||
const speed = ref(2)
|
||||
const noiseIntensity = ref(1.75)
|
||||
const scale = ref(0.2)
|
||||
const rotation = ref(30)
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'beamWidth',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Width of each beam.'
|
||||
},
|
||||
{
|
||||
name: 'beamHeight',
|
||||
type: 'number',
|
||||
default: '15',
|
||||
description: 'Height of each beam.'
|
||||
},
|
||||
{
|
||||
name: 'beamNumber',
|
||||
type: 'number',
|
||||
default: '12',
|
||||
description: 'Number of beams to display.'
|
||||
},
|
||||
{
|
||||
name: 'lightColor',
|
||||
type: 'string',
|
||||
default: "'#ffffff'",
|
||||
description: 'Color of the directional light.'
|
||||
},
|
||||
{
|
||||
name: 'speed',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Speed of the animation.'
|
||||
},
|
||||
{
|
||||
name: 'noiseIntensity',
|
||||
type: 'number',
|
||||
default: '1.75',
|
||||
description: 'Intensity of the noise effect overlay.'
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
type: 'number',
|
||||
default: '0.2',
|
||||
description: 'Scale of the noise pattern.'
|
||||
},
|
||||
{
|
||||
name: 'rotation',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Rotation of the entire beams system in degrees.'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
189
src/demo/TextAnimations/ScrollFloatDemo.vue
Normal file
189
src/demo/TextAnimations/ScrollFloatDemo.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="demo-container"
|
||||
@wheel="smoothScroll"
|
||||
>
|
||||
|
||||
<div class="scroll-instruction">
|
||||
Scroll Down
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<ScrollFloat
|
||||
:children="scrollText"
|
||||
:animation-duration="animationDuration"
|
||||
:ease="ease"
|
||||
:scroll-start="scrollStart"
|
||||
:scroll-end="scrollEnd"
|
||||
:stagger="stagger"
|
||||
:container-class-name="containerClassName"
|
||||
:text-class-name="textClassName"
|
||||
:scroll-container-ref="{ current: containerRef }"
|
||||
:key="rerenderKey"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
|
||||
<PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
|
||||
<PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
|
||||
|
||||
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="scrollFloatCode" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="scrollFloatCode.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { gsap } from 'gsap'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
|
||||
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const scrollText = ref("vuebits")
|
||||
const animationDuration = ref(1)
|
||||
const ease = ref('back.inOut(2)')
|
||||
const scrollStart = ref('center bottom+=50%')
|
||||
const scrollEnd = ref('bottom bottom-=40%')
|
||||
const stagger = ref(0.03)
|
||||
const containerClassName = ref("")
|
||||
const textClassName = ref("")
|
||||
const rerenderKey = ref(0)
|
||||
|
||||
|
||||
const smoothScroll = (e: WheelEvent) => {
|
||||
e.preventDefault()
|
||||
const container = containerRef.value
|
||||
if (!container) return
|
||||
|
||||
const delta = e.deltaY || e.detail
|
||||
const scrollAmount = delta * 2
|
||||
|
||||
gsap.to(container, {
|
||||
scrollTop: container.scrollTop + scrollAmount,
|
||||
duration: 2,
|
||||
ease: "power3.out",
|
||||
overwrite: "auto"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const container = containerRef.value
|
||||
if (container) {
|
||||
container.addEventListener('wheel', smoothScroll, { passive: false })
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
const container = containerRef.value
|
||||
if (container) {
|
||||
container.removeEventListener('wheel', smoothScroll)
|
||||
}
|
||||
})
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'children',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'The text content to be animated character by character'
|
||||
},
|
||||
{
|
||||
name: 'scrollContainerRef',
|
||||
type: 'object',
|
||||
default: 'undefined',
|
||||
description: 'Ref to a custom scroll container (defaults to window)'
|
||||
},
|
||||
{
|
||||
name: 'containerClassName',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'Additional CSS classes for the container element'
|
||||
},
|
||||
{
|
||||
name: 'textClassName',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'Additional CSS classes for the text element'
|
||||
},
|
||||
{
|
||||
name: 'animationDuration',
|
||||
type: 'number',
|
||||
default: '1',
|
||||
description: 'Duration of the animation in seconds'
|
||||
},
|
||||
{
|
||||
name: 'ease',
|
||||
type: 'string',
|
||||
default: '"back.inOut(2)"',
|
||||
description: 'GSAP easing function for the animation'
|
||||
},
|
||||
{
|
||||
name: 'scrollStart',
|
||||
type: 'string',
|
||||
default: '"center bottom+=50%"',
|
||||
description: 'ScrollTrigger start position'
|
||||
},
|
||||
{
|
||||
name: 'scrollEnd',
|
||||
type: 'string',
|
||||
default: '"bottom bottom-=40%"',
|
||||
description: 'ScrollTrigger end position'
|
||||
},
|
||||
{
|
||||
name: 'stagger',
|
||||
type: 'number',
|
||||
default: '0.03',
|
||||
description: 'Delay between each character animation'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: 60vh ;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
padding-top: 150vh !important;
|
||||
padding-bottom: 50vh;
|
||||
}
|
||||
.scroll-instruction {
|
||||
text-align: center;
|
||||
color: #271E37;
|
||||
font-size: clamp(4rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.scroll-content{
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user