Posted at
LIGDay 8

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

どうもですよ、はやちですよ٩( ᐛ )و

今年もですが一年間リグブログで公開された記事たちをご紹介と振り返りをしようとおもいます。


ページがぐにゃっとする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化させて今後にいかせられそうなきがします。

駄文な記事ではございますが、今年のはやちはこんなかんじでございます( ¨̮ )

ではみなさまよいおとしを( ˘ω˘)☞三☞シュッシュッ