傷物語ティザーサイトのアニメーションをPixi.jsで再現

学びカテゴリーの変更を依頼記事元:

memo.brdr.jp

3 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fmemo.brdr.jp%2Fpost%2F131144378491%2F%25E5%2582%25B7%25E7%2589%25A9%25E8%25AA%259E%25E3%2583%2586%25E3%2582%25A3%25E3%2582%25B6%25E3%2583%25BC%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E3%2581%25AE%25E3%2582%25A2%25E3%2583%258B%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2582%2592pixijs%25E3%2581%25A7%25E5%2586%258D%25E7%258F%25BE" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://memo.brdr.jp/post/131144378491/%E5%82%B7%E7%89%A9%E8%AA%9E%E3%83%86%E3%82%A3%E3%82%B6%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92pixijs%E3%81%A7%E5%86%8D%E7%8F%BE">傷物語ティザーサイトのアニメーションをPixi.jsで再現</a><a href="https://b.hatena.ne.jp/entry/s/memo.brdr.jp/post/131144378491/%E5%82%B7%E7%89%A9%E8%AA%9E%E3%83%86%E3%82%A3%E3%82%B6%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92pixijs%E3%81%A7%E5%86%8D%E7%8F%BE">はてなブックマーク - 傷物語ティザーサイトのアニメーションをPixi.jsで再現</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

傷物語ティザーサイトのアニメーションをPixi.jsで再現

傷物語公式サイト今はもう差し替わってしまったけど、傷物語のティザーサイトのアニメーションが世界観... 傷物語公式サイト今はもう差し替わってしまったけど、傷物語のティザーサイトのアニメーションが世界観と合っていてカッコ良かった。ソース見ると、JSでdivを追加しまくってランダムな位置に置く、みたいな処理をしていた。それが良いか悪いかは別として、似たようなのをWebGLでできそうだなーと思ったので、JSの練習を兼ねて再現。Pixi.js使った。 See the Pen Kizumonogatari Teaser Animation by PIXI.js by Ryo Nakae (@ryonakae) on CodePen. 中央のカウントダウンタイマーは作ってない。あとリサイズ処理とかも…。アニメーションはTweenMaxを使った。EasingとかTimelineの機能も入っているので、これ読みこむだけでよくて楽。流れ30個くらいのランダムな大きさの赤い円(以下blood)をランダム