Merge pull request #6 from m3dev/feat/animation

飛ぶトリ落とす勢いでアニメーションを実装しました
m3dev · Jun 21, 2024 · e299258 · e299258
2 parents 759cac9 + 2500706
commit e299258
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 13 deletions.
diff --git a/torisetsu/src/jsMain/kotlin/components/pages/TopPage.kt b/torisetsu/src/jsMain/kotlin/components/pages/TopPage.kt
@@ -76,19 +76,44 @@ fun TopPage(
     Div(
         attrs = { classes(TopPageStyle.overlayBirds) }
     ) {
-        Img(
-            src = "images/tori_left.png",
-            alt = "birds",
-            attrs = { classes(TopPageStyle.leftBirds) }
-        )
-        Img(
-            src = "images/tori_right.png",
-            alt = "birds",
-            attrs = { classes(TopPageStyle.rightBirds) }
-        )
+        Div(attrs = { classes(TopPageStyle.leftBirdsWrapper) }) {
+            Img(
+                src = "images/tori_left_2.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.leftBirds) }
+            )
+            Img(
+                src = "images/tori1.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.leftBird1) }
+            )
+            Img(
+                src = "images/tori3.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.leftBird3) }
+            )
+
+        }
+        Div(attrs = { classes(TopPageStyle.rightBirdsWrapper) }) {
+            Img(
+                src = "images/tori_right_2.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.rightBirds) }
+            )
+            Img(
+                src = "images/tori13.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.rightBird13) }
+            )
+            Img(
+                src = "images/tori15.png",
+                alt = "",
+                attrs = { classes(TopPageStyle.rightBird15) }
+            )
+        }
         Img(
             src = "images/tori_center.png",
-            alt = "birds",
+            alt = "",
             attrs = { classes(TopPageStyle.centerBirds) }
         )
     }

diff --git a/torisetsu/src/jsMain/kotlin/components/pages/TopPageStyle.kt b/torisetsu/src/jsMain/kotlin/components/pages/TopPageStyle.kt
@@ -1,5 +1,6 @@
 package components.pages
 
+import org.jetbrains.compose.web.ExperimentalComposeWebApi
 import org.jetbrains.compose.web.css.*
 import style.GlobalStyle
 import style.forMobile
@@ -92,11 +93,14 @@ object TopPageStyle : StyleSheet(GlobalStyle) {
         maxWidth(2000.px)
     }
 
-    val leftBirds by style {
+    val leftBirdsWrapper by style {
         position(Position.Fixed)
         left(0.px)
         bottom(400.px)
         property("width", "calc((100vw - 700px) / 2)")
+        maxHeight(70.vh)
+        height(100.percent)
+        maxWidth(850.px)
 
         media(mediaMaxWidth(1650.px)) {
             self style {
@@ -119,11 +123,100 @@ object TopPageStyle : StyleSheet(GlobalStyle) {
         }
     }
 
-    val rightBirds by style {
+    @OptIn(ExperimentalComposeWebApi::class)
+    private val rotationKeyframes by keyframes {
+        each(0.percent) { transform { rotate(0.deg) } }
+        each(10.percent) { transform { rotate(360.deg) } }
+        each(100.percent) { transform { rotate(360.deg) } }
+    }
+
+    val leftBirds by style {
+        position(Position.Absolute)
+        bottom(0.px)
+        width(100.percent)
+        property("object-fit", "contain")
+        property("object-position", "right")
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(15.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+    }
+
+    val leftBird1 by style {
+        position(Position.Absolute)
+        bottom(340.px)
+        left(0.px)
+        width(60.percent)
+        maxWidth(1000.px)
+        property("object-fit", "contain")
+        property("object-position", "right")
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(5.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+
+        media(mediaMaxWidth(1000.px)) {
+            self style {
+                bottom(250.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+
+        media(mediaMaxWidth(640.px)) {
+            self style {
+                bottom(150.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+    }
+
+    val leftBird3 by style {
+        position(Position.Absolute)
+        bottom(0.px)
+        right(0.px)
+        width(80.percent)
+        maxWidth(1000.px)
+        property("object-fit", "contain")
+        property("object-position", "right")
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(10.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+    }
+
+    val rightBirdsWrapper by style {
         position(Position.Fixed)
         right(0.px)
         bottom(400.px)
         property("width", "calc((100vw - 700px) / 2)")
+        maxHeight(70.vh)
+        maxWidth(850.px)
 
         media(mediaMaxWidth(1650.px)) {
             self style {
@@ -145,11 +238,105 @@ object TopPageStyle : StyleSheet(GlobalStyle) {
         }
     }
 
+    val rightBirds by style {
+        property("object-fit", "contain")
+        property("object-position", "left")
+        position(Position.Absolute)
+        bottom(0.px)
+        width(100.percent)
+        maxWidth(2000.px)
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(25.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+    }
+
+    val rightBird13 by style {
+        position(Position.Absolute)
+        bottom(70.px)
+        left(0.px)
+        width(65.percent)
+        maxWidth(1000.px)
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(20.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+    }
+
+    val rightBird15 by style {
+        position(Position.Absolute)
+        bottom(320.px)
+        right(25.percent)
+        width(60.percent)
+        maxWidth(1000.px)
+
+
+        media(mediaMaxWidth(1500.px)) {
+            self style {
+                bottom(240.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+
+        animation(rotationKeyframes) {
+            duration(50.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+            delay(30.s)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
+
+        media(mediaMaxWidth(640.px)) {
+            self style {
+                bottom(160.px)
+                maxWidth(500.px)
+                width(50.percent)
+            }
+        }
+    }
+
+    @OptIn(ExperimentalComposeWebApi::class)
+    private val vibrateKeyframes by keyframes {
+        each(0.percent) { transform { translateX(-50.percent) } }
+        each(10.percent) { transform { translateX(-49.percent) } }
+        each(20.percent) { transform { translateX(-51.percent) } }
+        each(30.percent) { transform { translateX(-49.percent) } }
+        each(40.percent) { transform { translateX(-51.percent) } }
+        each(50.percent) { transform { translateX(-49.percent) } }
+        each(60.percent) { transform { translateX(-51.percent) } }
+        each(70.percent) { transform { translateX(-49.percent) } }
+        each(80.percent) { transform { translateX(-51.percent) } }
+        each(90.percent) { transform { translateX(-49.percent) } }
+        each(100.percent) { transform { translateX(-50.percent) } }
+    }
+
     val centerBirds by style {
         position(Position.Fixed)
         bottom(20.px) // footerの高さ分あげる
         width(100.percent)
         minWidth(1500.px)
+        maxWidth(3000.px)
         left(50.percent)
         property("transform", "translateX(-50%)")
         property("object-fit", "cover")
@@ -159,5 +346,16 @@ object TopPageStyle : StyleSheet(GlobalStyle) {
                 minWidth(1000.px)
             }
         }
+
+        animation(vibrateKeyframes) {
+            duration(20.s)
+            timingFunction(AnimationTimingFunction.Linear)
+            iterationCount(null)
+        }
+        media("prefers-reduced-motion") {
+            self style {
+                property("animation-name", "none")
+            }
+        }
     }
 }
diff --git a/torisetsu/src/jsMain/resources/images/tori13.png b/torisetsu/src/jsMain/resources/images/tori13.png
diff --git a/torisetsu/src/jsMain/resources/images/tori14.png b/torisetsu/src/jsMain/resources/images/tori14.png
diff --git a/torisetsu/src/jsMain/resources/images/tori15.png b/torisetsu/src/jsMain/resources/images/tori15.png
diff --git a/torisetsu/src/jsMain/resources/images/tori_left_2.png b/torisetsu/src/jsMain/resources/images/tori_left_2.png
diff --git a/torisetsu/src/jsMain/resources/images/tori_right_2.png b/torisetsu/src/jsMain/resources/images/tori_right_2.png