ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
slickのカレントクラスを利用した実装サンプル - NxWorld
手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して.slick-currentというclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。 そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを幾つかご紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 中央のスライド以外を透過させる slickで用意されているcenterModeを利用している想定で、中央のスライドは通常の見栄えで表示させ、それ以外（このサンプルの場合は左右のスライド）のものは少し透過されるというものです。 まず、HTMLとjQueryはそれぞれ下記のように
jQuery：画像や要素をランダム出力する方法の備忘録 - NxWorld
jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。 ただ、jQueryと言っても乱数を作るのに必要なわけではなく全体的にJavaScriptだけでできる感はありますが、やっぱり何かと楽に実装できるのでここではjQueryを使っていきます。 画像をランダム表示する img要素のsrcを書き換えることで画像をランダム表示させる方法です。 HTMLとjQueryはそれぞれ下記のように記述し、スクリプトの記述にあるvar imagesのところでランダムで表示させたい画像のパスを記述します。 あとは、.attr()を使ってランダムで選ばれたものを指定した要素のsrcを書き換えるよう記述してあげれば、ページを表示する度にランダムで選ばれた画像が表示されるようになります。
グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20
スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。
ちょっとしたワンポイントに便利なタグ・バッジ・ステッカー素材 40 - NxWorld
リボン素材に引き続き、同じくデザイン制作で何かと重宝するタグ・バッジ・ステッカー素材をまとめてみました。 わかりやすい例だと、ECサイトで値段の部分をタグ素材で少しアレンジしていたり、セール情報をバッジやステッカーを使って目立たせたりなど、さり気ないものから目立つものまで幅広く使われているのを見かけます。 タグ素材が10種、バッジ素材が20種、ステッカー素材が10種の全40種類あります。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
