atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:41:32 +03:00
parent 874af541f3
commit ac8b2c04d8
2 changed files with 12 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/content/Backgrounds/GridMotion/GridMotion.vue
View File

@@ -68,40 +68,24 @@ onMounted(() => {
<template> <template>
<div ref="gridRef" class="w-full h-full overflow-hidden"> <div ref="gridRef" class="w-full h-full overflow-hidden">
<section <section class="relative flex justify-center items-center w-full h-screen overflow-hidden" :style="{
class="relative flex justify-center items-center w-full h-screen overflow-hidden"
:style="{
background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`, background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
}" }">
>
<div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div> <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
<div <div
class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center" class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
> <div v-for="rowIndex in 4" :key="rowIndex" class="gap-4 grid grid-cols-7"
<div :style="{ willChange: 'transform, filter' }" ref="rowRefs">
v-for="rowIndex in 4"
:key="rowIndex"
class="gap-4 grid grid-cols-7"
:style="{ willChange: 'transform, filter' }"
ref="rowRefs"
>
<div v-for="itemIndex in 7" :key="itemIndex" class="relative"> <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
<div <div
class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white" class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white">
> <div v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
<div class="top-0 left-0 absolute bg-cover bg-center w-full h-full" :style="{
v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
:style="{
backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`, backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
}" }"></div>
></div> <div v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" class="z-[2] p-4 text-center"
<div v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"></div>
v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
class="z-[2] p-4 text-center"
v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
></div>
<div v-else class="z-[1] p-4 text-center"> <div v-else class="z-[1] p-4 text-center">
{{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }} {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
</div> </div>

1
src/demo/Backgrounds/GridMotionDemo.vue
View File

@@ -80,6 +80,5 @@ const items = [
`<div key='item-1'>Custom Content</div>`, `<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 14", "Item 14",
// Add more items as needed
]; ];
</script> </script>