add animation

front/src/components/Promo/gallery.vue

@@ -3,14 +3,13 @@ import { SERVER_URL, IMAGE_URL } from '../../constants'
 import * as d3 from "d3"
 import { onMounted } from "vue"
 
-const componentFiles = import.meta.glob('../../assets/promo/bg/bg_*.jpg', { eager: true })
-const componentFilesEntries = Object.entries(componentFiles);
-
 onMounted(async () => {
     const res = await fetch(`${SERVER_URL}/api/front_img/`)
     const files = await res.json()
     const width = 1920
     const height = 1080
+    // const width = window.innerWidth
+    // const height = window.innerHeight
     const radius = 10
 
     const svg = d3.select('#gallery').append("svg")
@@ -22,10 +21,18 @@ onMounted(async () => {
     files.forEach((element: any, i: number) => {
         // const src = element[1].default
         const src = `${IMAGE_URL}/${element.file}`
-        console.log(src)
         defs.append("svg:pattern")
-            .attr("id", `img${i}`).attr("width", 1920).attr("height", 1080).attr("patternUnits", "userSpaceOnUse").attr("preserveAspectRatio", "none")
+            .attr("id", `img${i}`)
-            .append("svg:image").attr("xlink:href", src).attr("width", 1920).attr("height", 1080).attr("x", 0).attr("y", 0);
+            .attr("width", width)
+            .attr("height", height)
+            .attr("patternUnits", "userSpaceOnUse")
+            .attr("preserveAspectRatio", "none")
+            .append("svg:image")
+            .attr("xlink:href", src)
+            .attr("width", width)
+            .attr("height", height)
+            .attr("x", 0)
+            .attr("y", 0);
     });
 
     const circles = d3.range(20).map(() => ({

front/src/components/Promo/index.vue

@@ -19,6 +19,7 @@ const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 * {
     --logo-start-color: v-bind(startColor);
     --logo-end-color: v-bind(endColor);
+    --anim-time: 4s;
 }
 
 .main {
@@ -31,8 +32,10 @@ const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 }
 
 .pin {
+    cursor: pointer;
+    
     border-radius: 0.25rem;
-    background-image: linear-gradient(var(--logo-start-color), var(--logo-end-color));
+    overflow: hidden;
     
     position: absolute;
     bottom: 300px;
@@ -40,6 +43,25 @@ const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 
     color: white;
     
+    width: 2rem;
+    height: 2rem;
+    padding: 0.25rem;
+
+    animation: bounce2 var(--anim-time) ease infinite;
+    transition: all 300ms linear;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -1rem;
+        right: -1rem;
+        bottom: -1rem;
+        left: -1rem;
+        background-image: linear-gradient(var(--logo-start-color), var(--logo-end-color));
+        animation: bounce2grad var(--anim-time) ease infinite;
+        z-index: -1;
+    }
+
     svg {
         max-width: 100%;
         max-height: 100%;
@@ -47,8 +69,52 @@ const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
         fill: currentColor;
     }
 
-    width: 2rem;
+    &:hover {
-    height: 2rem;
+        // animation-play-state: paused;
-    padding: 0.25rem;
+        animation: none;
+        transform: scale(1.5);
+        &::before {
+            // animation-play-state: paused;
+        }
+    }
+
+}
+
+@keyframes bounce2grad {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: rotate(90deg)
+    }
+
+    40% {
+        transform: rotate(60deg);
+    }
+
+    60% {
+        transform: rotate(20deg);
+    }
+}
+
+@keyframes bounce2 {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0) scale(1.5);
+    }
+
+    40% {
+        transform: translateY(-2rem);
+    }
+
+    60% {
+        transform: translateY(-1rem);
+    }
 }
 </style>