From 2ae957d33b518305d55c171c378e74fdf08ed4a9 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 26 Jun 2024 10:14:49 +0300
Subject: [PATCH] add animation

---
 front/src/components/Promo/gallery.vue | 19 +++++--
 front/src/components/Promo/index.vue   | 76 ++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/front/src/components/Promo/gallery.vue b/front/src/components/Promo/gallery.vue
index d7ff234..c4400a3 100644
--- a/front/src/components/Promo/gallery.vue
+++ b/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")
-            .append("svg:image").attr("xlink:href", src).attr("width", 1920).attr("height", 1080).attr("x", 0).attr("y", 0);
+            .attr("id", `img${i}`)
+            .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(() => ({
diff --git a/front/src/components/Promo/index.vue b/front/src/components/Promo/index.vue
index abdd588..097e27c 100644
--- a/front/src/components/Promo/index.vue
+++ b/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,14 +32,35 @@ 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;
     left: calc(50% - 80px);
 
     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%;
@@ -47,8 +69,52 @@ const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
         fill: currentColor;
     }
 
-    width: 2rem;
-    height: 2rem;
-    padding: 0.25rem;
+    &:hover {
+        // animation-play-state: paused;
+        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>
\ No newline at end of file