タグ

ブックマーク / neganin.com (3)

  • jquery不要!CSS3アニメーションで入力フォームに動きをいれてみた | Neganin(ネガニン)

    CSS3アニメーションを採用できる案件が増えてきたので、最近はjqueryを使用することが少なくなってきました。今回は入力フォームにjQueryを使わずにアニメーションを取り入れてみたいと思います。 フォームにデフォルトで付いているCSSのリセットも含めながら説明させて下さい。まずは、デモをご覧ください。 2. HTML 予めアニメーションさせたい「input」「textarea」「ラジオボタン」にclassを付けていきます。 <form> <div> <p><span class="ate1">必須</span>名前:</p> <p><input type="text" name="name" class="input_text" placeholder="名前"></p> </div> <div> <p><span class="ate1">必須</span>E-mail:</p> <

    jquery不要!CSS3アニメーションで入力フォームに動きをいれてみた | Neganin(ネガニン)
  • jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)

    「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax

    jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
  • デジタル一眼レフカメラで背景をぼかした写真の3つの撮り方 | Neganin(ネガニン)

    デジタル一眼レフカメラの購入を考えている方の多くが、背景をぼかした写真を撮影したいと考えているようです。 ただ、せっかく購入したカメラで思うように背景をぼかすことができずに結局手軽なコンパクトデジタルカメラやスマートフォンで撮影している方が多いように感じます。 お問い合わせの1番多い内容なので簡単に背景をぼかす為の3つのコツをご紹介します。 3つだけで驚くほど写真が変わるので、ぜひ実践してみてくださいね。 今回は「Nikon(ニコン) D5300」を使ってやってみたいと思います。 年の瀬に事務作業をしながらの記事なので、作例が事務所内の写真で申し訳ないです。 1. 絞り優先モードを使う 撮影モードは「オート」ではなく「絞り優先モード」を使います。 実は「絞り優先モード」は、プロも含め多くの写真愛好家たちが使っているモードです。コツを掴めばカメラに全然詳しくなくても素敵な写真が撮れるんです。

    デジタル一眼レフカメラで背景をぼかした写真の3つの撮り方 | Neganin(ネガニン)
  • 1