example.AnimatedTitle.scala Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of example_sjs1_3 Show documentation

example

The newest version!

package example

import com.raquo.laminar.api.L.*
import animus.*

object AnimatedTitle extends Component:
  val activeVar = Var(true)

  val $time: Signal[Double] =
    EventStream.periodic(1000 / 60).map(_.toDouble).toSignal(0)

  def body: HtmlElement = h1(
    cursor.pointer,
    textAlign.center,
    onMouseOver --> { _ => activeVar.set(false) },
    onMouseOut --> { _ => activeVar.set(true) },
    "ANIMUS".zipWithIndex.map { case (char, idx) =>
      val $top     = $time.map(i => Math.sin((i + idx * 15) / 30.0) * 15.0)
      val $opacity = $time.map(i => (Math.sin((i + idx * 15) / 30.0) / -2) + 1)

      def activate(signal: Signal[Double], default: Double): Signal[Double] =
        activeVar.signal.flatMapSwitch { active =>
          if active then signal
          else Val(default)
        }.spring

      div(
        cursor.pointer,
        display.inlineFlex,
        char.toString,
        position.relative,
        top <-- activate($top, 0).px,
        opacity <-- activate($opacity, 1)
      )
    }
  )