ボタンをホバーするとスペーシーでかっこいいマウスオーバーエフェクト
CANVASで作られたエフェクト。マウスオーバーすることで、ボタンにキラキラしたエフェクトが与えられる。ウェブサイトのアクセントにグッド！
CSSで作られた、かわいいデザインのボタン 10種
CSSでオシャレでかわいいボタンのデザイン。CSSだけで作られており画像は使われていない。ボタンにはそれぞれ背景の色があるのでその色を参考にしたデザインのウェブサイトにするといい感じに出来る
jQuery で一定以上スクロールしたらついてくるナビゲーションを実装する
jQueryを使ってシンプルにスティック・フローティング等を実装するのに使えるコード。主にスクロールすると途中からついてくるナビゲーションの実装に使えるものです。jQueryでちょっとだけのコードで実装できてお手軽に使えます。
CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション
背景パターンがシームレスパターンのときに、CSSのアニメーションを使って無限スクロールをさせるテクニック。背景画像がシームレスであることと、背景画像はrepeatして表示されることを上手く使った方法
PHPで現在のディレクトリ、上のディレクトリへと対象のファイルを探し出すコード
PHPでサイトフォーマットをテンプレート化するときに。できるだけシンプルに手軽に利用できるように、どのファイルでもfunctions.phpを相対パスや絶対パスを意識せずにどの階層からでも読み込めるようにする工夫
jQueryでシンプルなタブ表示を作る
jQueryを使って、基本的なシンプルなタブ表示を実装するコードです。CSSのチェックボックスを使って実装するよりもシンプルなHTMLの構造を保つことが出来コードが見やすいというメリットもあります。
3Dに回転するスライドとSVGアニメーションがユニークなギャラリー
マルチスライドのユニークなウェブデザイン。またSVGのアニメーションが良い
IE8でjQueryでoffset().top()を使うとエラーが出てしまう場合
jQueryを使った時に、IE8で offset().top() でエラーが出てしまう時の対処。offse()で値を取得するときには実在するするものが無いとエラーが出てしまうといったものがある。モダンブラウザではこれらのエラーは出ない
IE8用にbackground-size を設定できるようにするプラグイン 「jquery.backgroundSize.js」
Internet Explorer 8 でもCSSのBackground-size を使えるようにするプラグイン。「jquery.backgroundSize.js」の紹介と使い方
番号付きのページネーションのボタンのレスポンシブなアイディア
レスポンシブなサイトの時に使える、レスポンシブなページネーションのアイディア。多段階に見せ方を変えつつ最適な表示にする
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード
絵本をHTMLとCSSとjQueryで作ったものです。ページのめくれ方や、そのあとのちょっとした動作が素晴らしいリアリティあるクオリティの高いものです。こういったものを作るときにはぜひ参考にしたいコードです。
canvasを使った、ブロックが降ってくるアニメーション効果と影効果
CANVASを使った効果。ブロックが降ってくるアニメーションとマウスの位置によってロングシャドウが動く効果。ヘッダー等の背景に使えば魅力的なサイトを作れそうな効果です
ぷにっと感がたまらない ローディングに使えるCSSアニメーション
ぷにっと、ピョンピョン跳ねる感じが和む、CSSで作られたアニメーション。ローディングなどの待ち時間の表示に使えば和める
スクロールに合わせて、ヘッダー画像がぼやける効果を与えるスクリプト
jQueryを使って、スクロールに合わせて ヘッダー画像がぼやけるスクリプトを作ってみました。どこかでこのようなテクニックを見かけて、作ってみようと思っていましたので今回作ってみました。よかったら使ってみてください
マウスオーバーでラインが動くようなアニメーションのボタンを実装出来るコード
マウスオーバー時のアニメーションをグレードアップする、ラインが動くアニメーションを実装出来るコード。CSSのアニメーションだけで出来ているので使い勝手の良いコードです。
ドラッグで回転する3Dなギャラリーのアイディア
3Dに回転する、ギャラリー表示が導入出来るコード、ライブラリーを使用せずjavascriptで出来ています。
ペーパー的な立体感がある、CSSで作れるtext-shadowを使ったタイポグラフィ
CSSを使ったタイポグラフィ。画像を使わずに、CSSだけで立体的な文字を表現する方法です、ポイントはtext-shadowに複数の値を設定することでより立体的な質感を出すことが出来ます
jQuery でclick要素の初回クリックを判定する方法の覚書
jQueryを使った、click要素が初回クリックなのかどうかを判定する方法の覚書。これを利用することで、無駄な読み込みを減らしたり、WEBサイトをより快適に使うために利用できる
PHP foreach for while を途中の回数で抜ける、終了させる方法
PHP foreach を使った場合に、完走せずに 途中で抜けだして処理を終了させたいときに行う方法、そのほか forやwhile分でも利用できる
jQueryのアニメーションを拡張していろいろな動作を簡単に実装するプラグイン jQuery Easing Plugin
jQueryではデフォルトでは2つしかないアニメーションを拡張するjQueryプラグイン。これを利用することで多くの表現を実現することが出来る
