ow

WebVue/src/views/test/gsap.vue

@@ -0,0 +1,103 @@
+<template>
+    <main>
+        <section class="boxes-container" ref="main">
+            <h1>Use the button to toggle a Timeline</h1>
+            <div>
+                <button @click="toggleTimeline">Toggle Timeline</button>
+            </div>
+            <div class="box gradient-green">Box 1</div>
+            <div class="box gradient-green">Box 1-1</div>
+            <div class="box gradient-green">Box 1-2</div>
+            <div class="box gradient-green">Box 2</div>
+            <div class="box gradient-green">Box 3</div>
+            <div class="box gradient-green">Box 4</div>
+        </section>
+    </main>
+    <div class="page" ref="main">
+
+
+        <img src="http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG"
+            style="clip-path: circle(50% at 50% 50%)" />
+
+        <img src="http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG"
+            style=" clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);" />
+
+        <img src="http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG"
+            style="clip-path: polygon(20% 0, 80% 0, 80% 50%, 20% 50%);" />
+
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { bsInfo } from "@/utils/browser";
+import { gsap } from "gsap";
+
+
+const main = ref();
+let tl: any;
+let ctx: any;
+
+function toggleTimeline() {
+    tl.reversed(!tl.reversed());
+}
+
+onMounted(() => {
+    ctx = gsap.context((self) => {
+        const boxes: any = gsap.utils.toArray(".box");
+        tl = gsap
+            .timeline({ repeat: 0, repeatDelay: 1, yoyo: true })
+            .to(boxes[0], { x: 120, rotation: 360, duration: 3 })
+            .to(boxes[1], { x: -120, rotation: -360, duration: 3 }, "<1") //上面后1秒執行
+            .to(boxes[2], { y: -166, scale: 0.5, rotation: 180, duration: 3 }, ">1")
+            .to(boxes[3], { x: 166, scale: 0.5, rotation: 180, duration: 3 }, "<") //同步第一個執行
+            .to(boxes[4], { x: 166, scale: 0.5, rotation: 180, duration: 3 }, "1") //上面開始1秒執行
+            .to(boxes[5], { x: 166, scale: 0.5, rotation: 180, duration: 3 }, "+=1"); //上面結束前1秒執行
+    });
+});
+onUnmounted(() => {
+    ctx.revert(); // <- Easy Cleanup!
+});
+</script>
+<style scoped>
+.page {
+    overflow-x: hidden;
+}
+
+.swiper-item-png {
+    overflow: hidden;
+}
+
+.boxes-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+
+.box {
+    width: 75px;
+    height: 75px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: #0ae448;
+    ;
+    font-weight: 600;
+    color: #7c7c6f;
+    line-height: 1.2;
+    will-change: transform;
+}
+
+.gradient-green {
+    background: #0ae448;
+    /* Replace with the path to your noise texture image */
+    background-blend-mode: color-dodge;
+    /* Blend the noise texture with the gradient */
+}
+</style>

WebVue/src/views/test/wow.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="page">
+        <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
+            <img :src="item.pngurl" mode="widthFix"></img>
+        </section>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { bsInfo } from "@/utils/browser";
+import WOW from "wow.js";
+
+const item = ref({
+    pngurl: "http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG",
+    animateClass: "slideInLeft",
+    iteration: 2,
+    duration: 3000,
+});
+
+onMounted(() => {
+    var wow = new WOW({
+        boxClass: "wow", // animated element css class (default is wow)
+        animateClass: "animated", // animation css class (default is animated)
+        offset: 0, // distance to the element when triggering the animation (default is 0)
+        mobile: true, // trigger animations on mobile devices (default is true)
+        live: true, // act on asynchronously loaded content (default is true)
+        scrollContainer: null, // optional scroll container selector, otherwise use window,
+        resetAnimation: true, // reset animation on end (default is true)
+    });
+    wow.init();
+});
+</script>
+<style scoped>
+.page {
+    overflow-x: hidden;
+}
+
+.swiper-item-png {
+    overflow: hidden;
+}
+</style>