ブックマーク / qiita.com/AsagiriDesign (1)

  • ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する - Qiita

    背景 LP実装のフロントエンドを担当 Ruby on RailsのView内にてフロントエンド組み込み前提 デザインカンプにアニーメーション、インタラクションの仕様は無かったが、昨今全く動かないLPの方が少ないのではと思った デザイナーにインタラクション考えてもらうのも確認フロー大変だし、Railsにプラグイン組み込む検証リスクなど諸々あり、1回あきらめた 諦めてからが試合開始 変更に強いCSSアニメーション主軸にスクロールインタラクション作れればと思った ゴニョゴニョしたら意外と出来た 実装内容 CSSアニメーション実装 .anm_modデフォルト = 下から元来の位置に戻りつつフェードイン。速度ノーマル &.left, &.right 左右から元来の位置に戻りつつフェードイン &.delay, &.fast フェードイン速度遅め、早め 上記2点の設定で、フェードイン方向(3方向)とスピ

    ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する - Qiita
    rui17sei
    rui17sei 2018/08/23
    ごく当たり前の実装方法も釣りタイトルであら不思議
  • 1