Mastodonの背景を動かしてみたメモ

  • 1
    いいね
  • 1
    コメント

そんなに難しいことはしてないので、引用とメモレベルだけ
背景動いてると結構おおってなるので、各自インスタンスの彩りに是非どうぞ

やったこと

videoの配置

/public/videos/ 以下に動画ファイルの追加

templateの編集

/views/layouts/application.html.haml の編集

    = video_tag "background-video.mp4", :autoplay => true, :loop => true, :id => "bg"

なんとなく、bodyの下に追加した

CSS修正

/stylesheets/basics.scss の編集

video#bg {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  background: url(polina.jpg) no-repeat;
  background: $color1 image-url('background-photo.jpeg');
  background-size: cover;
}

適当なところに追加(もしかするつbasicsじゃないほうがいいかもしれない)

参考資料

動画を背景に使い、オーバーレイでコンテンツを配置するテクニック(IE8、スマホへの対応方法)

動作サンプル

animedj.club
(実装時点なので、今後動画じゃなくなるかもしれないけどそこは許してください)

railsはじめて触って少しだけしかいじってないけど、hamlってべんりですね