パララックス/スクロールでアニメーションさせるjQueryプラグインなど
こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。 Nikebetterworld Parallax Effect Demo [配布サイト][DEMO] パララックスのプラグインでも代表的なものの1つ、というイメージです。 スクロールで背景が動く、右にナビゲーションがある…などパララックスに必要な基本的な物が備わっている感じです。 Skrollr [配布サイト][DEMO] こちらも代表的なものの1つというイメージ。 さまざまなアニメーションを表現することができます。 Cool Kitten [配布サイト][DEMO] レスポンシブにも対応
【怖くないJavaScript + jQuery】コンテンツの高さを自動で調整してくれるjs
ウィンドウの高さに対して、コンテンツの内容が少ない場合、footerより下の部分が真っ白になってしまう…しかし邪魔だしfooterをfixedにはしたくない。そんな時ってありますよね。 Sticky footerなど他にも手はありますが、内容が動的の場合使えなかったりするんですよね。 そんな時に便利な、コンテンツの高さを自動調整してくれるjsを作ってみましょう。実はとっても簡単なんです。 コンテンツ部以外（headerとfooterなど）の高さが固定であることが条件です。 今回はページ読み込み時にのみ処理を走らせます。ウィンドウサイズが途中で変更された時は妥協して何もしません。 デモはこちらから ファイルのダウンロードはこちらから
【jQuery】モーダルウィンドウを実装できるプラグインまとめ
こんにちは、工藤です。 モーダルウィンドウについて調べるがあり、いい機会なのでまとめてしまいたいと思います。 モーダルウィンドウとは？ ちなみにモーダルウィンドウとは図で説明するとこんな感じです。 なんとなく見たことがあります・・よね？詳しい事はwikipediaで。 jモーダルウィンドウ プラグイン lightbox2 http://lokeshdhakar.com/projects/lightbox2/ モーダルウィンドウと言ったらコレかなと思います。 完全に初心者だった時も苦戦せずに設置することができました。 シンプルながらエフェクトなども含めてとてもきれいに表示してくれます。 leanModal http://leanmodal.finelysliced.com.au/ テキストのみでただ単にモーダルを使用したい！という時にはこれがおすすめです。 すごくシンプルで軽量なプラグインで
気になるフリーフォントを集めました
こんにちは、工藤です。 ほぼ自分用…な気もしますがライセンスなどの確認用に気になるフリーフォントをあつめました。 前回も紹介しましたが足りなかったり、増えたりしたので…。 参考になったらうれしいです。 フォントを提供してくださっている皆さま、いつもありがとうございます。 フリーフォント（日本語/ゴシック体） Mgen+ (ムゲンプラス) [Mgen+ (ムゲンプラス)] Adobe から新たにリリースされたオープンなフォントである「源ノ角ゴシック」で漢字を補って作成されたフォント。 オープンなライセンスで、商用・非商用問わず、使用用途に制限はなく自由にご使用頂けます。 Noto Fonts [Noto Fonts] GoogleとAdobeが作成、無料で配布されているフォントです。 ライセンスなどのお話で日本語ではほぼ同じようなフォントの「源ノ角ゴシック」も配布されているみたいです。 日本
Webデザインをパーツで参考にできるサイトまとめ
こんにちは、工藤です。 Webデザインの際、パーツで悩んでしまうことがよくあります・・。 今回はパーツ毎にまとめてくださっているサイトをご紹介します。日本語サイトが多めです。 パーツ全般を集めているサイト ブブンデザインアーカイブ http://bubundesignarchive.jp/ Croppy http://croppy.org/ MephoBox http://box.mepholio.com/ メインビジュアル関連 WEBデザインのメインビジュアルまとめ http://mainvisual.net-king.com/ MAIN VISUAL collection http://mvisual-collection.dslrs-journal.info/ 見出し関連 見出しデザイン.com http://midashi-design.com/ Typography For He
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
