3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LIGAdvent Calendar 2018

Day 8

今年はやちがLIGブログで紹介した記事をまとめてみた。

Posted at

どうもですよ、はやちですよ٩( ᐛ )و
今年もですが一年間リグブログで公開された記事たちをご紹介と振り返りをしようとおもいます。

ページがぐにゃっとするSVGモーフィングページを作ってみた

151604375252246400_61-1310x874.jpg
anime.jsを使用してモーフィングページを実装紹介をしました。
150944977956334600_92.jpg
変形する前と変形した後のSVGを用意してぱぱぱぱっとあーら簡単٩( ᐛ )و
654abbfe0a421b538002a49e373d36a0.gif

こちらのようにむにゅっとしたローディングが実装できます( ˘ω˘)

js不要!SVGのFilterで手書きアニメーションさせてみた

151798095111996700_38-1310x874.png
SVGのFilterとcss3のanimationでじゃぎじゃぎしたアニメーションの実装方法をご紹介いたしました。
d96ffc32d658d5584e68c378f5aa323e.gif
Fillterの設定はなかなか奥が深く感じた次第でございます( ་ ⍸ ་ )

FullPage.jsを使いつつPjaxの非同期ページ遷移をする方法

151852043212323100_20-1310x874.jpg
fullPage.jsPjaxの非同期処理のご紹介をいたしました。
ページに入るときの動作も可能!
1b93ee244a647efa99689a3a32c38cc0.gif
戻るときハッシュの数字通りのブロックに戻ってくれる!
25a0303a9bacd8502e5fb89c4a5309f3.gif
ので改めてFullPage.jsしゅごい!と思った次第でございました。

愛着が湧く!HyperTermで作るMYターミナル!

151929544773041500_18-1310x874.png
わちとあるあるな記事ではございますが、自分用のオリジナルのターミナルカスタマイズしてみました( ᐛ )
Before
151514004595117200_79.png

After
151514036484623000_68.png

とても軽量! ドラッグアニメーションに優れたPopmotion.js実装例!

eyecatch_180329_01_jona-1310x874.png
軽量かつドラッグ操作のアニメーションに優れたプラグインをご紹介しました。

ドラッグだけの操作のみに使ってもいいですし。
151852482133864900_52.gif

定位置に戻るようなものも可能ですし。
151852516099910800_71.gif

クリックの操作のアニメーションもぽにょぽにょ
151852379719418800_49.gif

軽量かつ面白い動きでなかなかよいなとおもいました。

ストロークアニメーションをラクラク操作! vivus.jsの使い方

eyecatch_180425_01_jona-1310x874.png
ストローク系のアニメーションについてはcssでの操作でもご紹介させていただきました。
こちらのプラグインはただ再生だけではなく、逆再生、リプレイなどのアニメーションの操作管理に適しているなかなかよきなプラグインであります٩( ᐛ )و
763b07070046685a64603fdc5cbc2ed2.gif

t.jsを使ってタイピング風のアニメーションを再現する

eyecath_180522_05_kusu-1310x874.png
基本的な方法のみだけご紹介しておりますが、コールバックもタイミングによって調整可能なので、いろいろと工夫できる気がいたします( ་ ⍸ ་ )
a934c028407dcaf87332242b10ebc716.gif

Pixi.jsでCanvasをカンタンに触ってみよう! 〜パーティクル編〜

eyecatch_180612_01_jona-1310x874.png
ちゃんと触ってみたいと思っていたcanvasに取り組んだものになります。
簡単と言えどもオブジェクトの配置と計算の意味の理解と慣れが必要だなと思った次第でございます。
e40412742e8e6e2733b7663326be496f.gif
はやちめっちゃふってる(`⊙ω⊙´)カッ!!

「グラデーションのゴーストボタン」をつくるときに最適なスタイルの当て方を考えてみた

12a52d37bee18413d82b9b3de630cd693-1310x874.png
グラデーション枠のゴーストボタンを再現する際にどのような方法が最適なのかを検証をした記事になります。
実装方法のパターンを検証し解説をしております是非ご参考くださいまし( ¨̮ )
btn-3.png

ノンデザインで簡単!CSSフレームワーク「Bulma」でいろんなUIを実装してみた

ec_181002_01_h-1310x874.png
なうなCSSフレームワークBulmaでサイトでよく使いそうなサイトのパーツを実際実装をしてご紹介いたしました。
modal.gif
自分は特にモーダルの作りに感動です!
ウィンドウがモーダルの中身よりも狭い時にスクロールの操作ができる使いやすい仕様になっているのに感動いたしました(`⊙ω⊙´)カッ!!

まとめ

いかがでしたでしょうか、今年の頭の方はSVGが多かったですが、ストロークの方は管理の仕方、そしてfillterでアニメーションがつけられることを知り、全体モーフィングでは実際の案件のアイデアとして提案ができそうだなと思いました。
FullPage.jsと非同期処理、pixi.jsとcanvasでは自分の中では挑戦的なものでありました。
ゴーストボタンのように1モジュールのための再現と汎用性のパターンを考えて知見を深めるのもなかなかよきものかなと思いました、多分こちらは1モジュールのMixin化させて今後にいかせられそうなきがします。

駄文な記事ではございますが、今年のはやちはこんなかんじでございます( ¨̮ )
ではみなさまよいおとしを( ˘ω˘)☞三☞シュッシュッ

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?