[PR] Merge pull request #57 from LS-KR/sakura

[+] Add Sakura Animation

src/App.vue

@@ -18,19 +18,29 @@
     <Divider height="5px"/>
 
     <GlobalButton/>
+    <Sakura :count="100" v-if="isEaster() && (gaussian() < 0.36)"/>
 </template>
 
 <script lang="ts">
-import Divider from "@/components/divider.vue";
 import GlobalButton from "@/components/buttons/GlobalButton.vue";
+import Divider from "@/components/divider.vue";
+import Sakura from "@/components/Sakura.vue";
 import {transColors} from "@/logic/constants";
+import {isEaster} from "@/logic/easterEgg";
+import {gaussian} from "@/logic/helper";
 import {applyTheme} from "@/logic/theme";
 import {info, logPrefixCss} from "@/logic/utils";
+import {isUwU} from "@/logic/uwu";
 import {Component, Vue} from 'vue-facing-decorator';
 import {getLang, t} from './logic/config';
-import {isUwU} from "@/logic/uwu";
 
-@Component({ components: { GlobalButton, Divider } })
+@Component({
+    components: { GlobalButton, Divider, Sakura } ,
+    methods: {
+        isEaster,
+        gaussian,
+    }
+})
 export default class App extends Vue {
     $route: any
     t = t

src/components.d.ts

@@ -43,6 +43,7 @@ declare module 'vue' {
     RecaptchaV2: typeof import('./components/RecaptchaV2.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Sakura: typeof import('./components/Sakura.vue')['default']
     ScrollButton: typeof import('./components/buttons/ScrollButton.vue')['default']
     SubmitPrompt: typeof import('./components/SubmitPrompt.vue')['default']
     SwitchButton: typeof import('./components/buttons/SwitchButton.vue')['default']

src/components/MDX.vue

@@ -5,6 +5,7 @@ import ChannelBackupButton from "@/components/buttons/ChannelBackupButton.vue";
 import CapDownQuote from "@/components/CapDownQuote.vue";
 import ColumnView from "@/components/ColumnView.vue";
 import DynamicIcon from "@/components/DynamicIcon.vue";
+import Sakura from "@/components/Sakura.vue";
 import * as Vue from 'vue';
 import {computed, defineComponent} from 'vue';
 import BlurBlock from "./BlurBlock.vue";
@@ -35,17 +36,19 @@ export default defineComponent({
 
         return () => (
             <div class="markdown-content" style={props.margins ? { margin: '10px min(4vw, 40px)' } : {}}>
+
                 {
                     renderFunction.value?.({
                         components: {
-                            PhotoScroll,
+                            BackupButtons,
+                            Banner,
+                            BlurBlock,
                             ChannelBackupButton,
                             CapDownQuote,
                             ColumnView,
-                            BackupButtons,
                             DynamicIcon,
-                            Banner,
-                            BlurBlock
+                            PhotoScroll,
+                            Sakura
                         }
                     })
                 }

src/components/Sakura.vue

@@ -0,0 +1,224 @@
+<script lang="ts">
+import {Vue, Component, Prop} from 'vue-facing-decorator';
+
+@Component({})
+export default class Sakura extends Vue {
+    @Prop({required: true}) count: number | string;
+
+    spans = ""
+
+    mounted() {
+        for (let i = 0; i < parseInt(this.count.toString()); i++) {
+            this.spans += `<span style="left: ${(i / parseFloat(this.count.toString())) * 100}%"></span>`;
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="sakura-container">
+        <div class="sakura" v-html="spans"/>
+    </div>
+</template>
+
+<style lang="scss">
+.sakura-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: none;
+
+    .sakura {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        span {
+            position: absolute;
+            top: -10%;
+            left: 0;
+            width: 0.8vw;
+            height: 0.4vw;
+            border-radius: 5% 80% 10% 80%;
+            background-color: #ffb6c1;
+
+            &:nth-child(6n+1) {
+                animation: sakura-anim-1 10s 0s linear infinite;
+            }
+
+            &:nth-child(6n+2) {
+                animation: sakura-anim-2 10s 0s linear infinite;
+            }
+
+            &:nth-child(6n+3) {
+                animation: sakura-anim-3 10s 0s linear infinite;
+            }
+
+            &:nth-child(6n+4) {
+                animation: sakura-anim-4 10s 0s linear infinite;
+            }
+
+            &:nth-child(6n+5) {
+                animation: sakura-anim-5 10s 0s linear infinite;
+            }
+
+            &:nth-child(6n+6) {
+                animation: sakura-anim-6 10s 0s linear infinite;
+            }
+
+            &:nth-child(3n+1) {
+                width: 1vw;
+                height: 0.5vw;
+            }
+
+            &:nth-child(3n+2) {
+                width: 0.8vw;
+                height: 0.4vw;
+            }
+
+            &:nth-child(3n) {
+                width: 0.6vw;
+                height: 0.3vw;
+            }
+
+            &:nth-child(4n+1) {
+                animation-duration: 5s;
+            }
+
+            &:nth-child(4n+2) {
+                animation-duration: 12s;
+            }
+
+            &:nth-child(4n+3) {
+                animation-duration: 8s;
+            }
+
+            &:nth-child(4n) {
+                animation-duration: 6s;
+            }
+
+            &:nth-child(11n+1) {
+                animation-delay: 0s;
+            }
+
+            &:nth-child(11n+2) {
+                animation-delay: 9s;
+            }
+
+            &:nth-child(11n+3) {
+                animation-delay: 2s;
+            }
+
+            &:nth-child(11n+4) {
+                animation-delay: 5s;
+            }
+
+            &:nth-child(11n+5) {
+                animation-delay: 6s;
+            }
+
+            &:nth-child(11n+6) {
+                animation-delay: 7s;
+            }
+
+            &:nth-child(11n+7) {
+                animation-delay: 3s;
+            }
+
+            &:nth-child(11n+8) {
+                animation-delay: 1s;
+            }
+
+            &:nth-child(11n+9) {
+                animation-delay: 2s;
+            }
+
+            &:nth-child(11n+10) {
+                animation-delay: 11s;
+            }
+
+            &:nth-child(11n) {
+                animation-delay: 10s;
+            }
+        }
+    }
+}
+
+@keyframes sakura-anim-1 {
+    0% {
+        top: -10%;
+        transform: translateX(0) rotateX(0) rotateY(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(15vw) rotateX(180deg) rotateY(360deg);
+    }
+}
+
+@keyframes sakura-anim-2 {
+    0% {
+        top: -10%;
+        transform: translateX(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(-15vw) rotateX(180deg) rotateY(360deg);
+    }
+}
+
+@keyframes sakura-anim-3 {
+    0% {
+        top: -10%;
+        transform: translateX(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(25vw) rotateX(180deg) rotateY(360deg);
+    }
+}
+
+@keyframes sakura-anim-4 {
+    0% {
+        top: -10%;
+        transform: translateX(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(-20vw) rotateX(360deg) rotateY(180deg);
+    }
+}
+
+@keyframes sakura-anim-5 {
+    0% {
+        top: -10%;
+        transform: translateX(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(-25vw) rotateX(180deg) rotateY(360deg);
+    }
+}
+
+@keyframes sakura-anim-6 {
+    0% {
+        top: -10%;
+        transform: translateX(0);
+    }
+
+    100% {
+        top: 100%;
+        transform: translateX(21vw) rotateX(360deg) rotateY(180deg);
+    }
+}
+</style>

src/components/buttons/ScrollButton.vue

@@ -7,7 +7,10 @@ import {Icon} from '@iconify/vue';
 export default class ScrollButton extends Vue {
     scroll() {
         document.documentElement.style.scrollBehavior = 'smooth';
-        window.scrollTo(0, 0);
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
         scheduledTask(50, () => document.documentElement.style.scrollBehavior = null);
     }
 }