開発コストを削減「ラボ開発」って?
開発コストを削減「ラボ開発」って?
2015.10.22

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中(2)アニメーション編

佐藤タカアキ

4. AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう

856
https://liginc.co.jp/web/js/other-js/168016

PSDデータをダウンロードする

5. ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう

858
https://liginc.co.jp/web/wp/other-wp/167920

PSDデータをダウンロードする

6. プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方

818
https://liginc.co.jp/web/js/jquery/162419

PSDデータをダウンロードする

7. 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

766
https://liginc.co.jp/web/js/jquery/158379

PSDデータをダウンロードする

8. スマホも対応!物理演算エンジン「Matter.js」を使ってみた

741
https://liginc.co.jp/web/js/other-js/155192

PSDデータをダウンロードする

9. 超簡単jQuery!toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法

732
https://liginc.co.jp/web/js/jquery/34048

PSDデータをダウンロードする

10. これは便利!Animate.cssをSassで使う方法

457
https://liginc.co.jp/web/html-css/css/131559

PSDデータをダウンロードする

11. スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法

152
https://liginc.co.jp/web/html-css/html/92474

PSDデータをダウンロードする

さいごに

アニメーションをテーマに作成したアイキャッチ編、いかがでしたか。PSDデータを見て、一つひとつのレイヤーがどう使われているのかを検証してみるのは、わりと面白いですよ。

今後も別のテーマで今までに作ったアイキャッチ画像を紹介&配布していきたいと思いますので、ぜひお楽しみに!(まとめばっかり書いてると編集部に怒られるのでガッツリ文章記事も書こう)

それではまた。

  • 1
  • 2