はてなブックマーク

twitter facebook hatena google pocket ページの読み込みが長いと離脱につながってしまうので、ローディング画像を見せることがあるかと思います。 そのローディング画像をかっこ良く見せられるJavaScriptライブラリPleaseWait | A Loading Page for your SPA by Pathgatherを紹介します。 sponsors 使用方法 PleaseWait | A Loading Page for your SPA by Pathgatherからファイル一式をダウンロード。 body内に下記を記述するだけで完成です。 <link href="please-wait.css" rel="stylesheet"> <script type="text/javascript" src="please-wait.js"></scrip

twitter facebook hatena google pocket アクセス時にタイトルなどを動きをもたらせると目がいき印象的になります。 また本文にも注目をしてくれる可能性が高まります。 jQueryプラグインのjQuery TextFXを使用すると簡単に実現できます。 sponsors 使用方法 jQuery TextFXからファイル一式をダウンロード。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.transit.js"></script> <script type="text/javascript" src="jquery.textFx.js"></scri

twitter facebook hatena google pocket シングルページが増えるにつれ、ローディングの登場機会も増えているように思います。 LoadGo - Your own images as a progress barはロゴなどの画像をローディングのプログレスバーに変えてしまうことができます。 これにより印象的で、ブランドイメージも保てるのではないでしょうか。 sponsors 使用方法 LoadGo - Your own images as a progress barからファイル一式をダウンロードします。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="/test

twitter facebook hatena google pocket デザインした、コーディングした、それをMacやiPhoneのウィンドウにはめ込んで見せたい。 そんなことはサイトを作る立場だと、よくあることでしょう jQueryプラグインのjquery.devicemock.jsを使用すれば簡単に実現できます。 sponsors 使用方法 jquery.devicemock.jsからファイル一式をダウンロード。 <link href="jquery.devicemock.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascrip

twitter facebook hatena google pocket スクロールしていくとフェードやスクロールインしてくるような効果を与えるサイトが多くなっています。 jQueryプラグインのnickavignone/responsive_3dfoldscrollを使用すると3Dで折りたたんだ感じの効果を与えられ、印象的なものとなります。 sponsors 使用方法 nickavignone/responsive_3dfoldscrollからファイルをダウンロードします。 <link href="global.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script ty

twitter facebook hatena google pocket ちょっと古いですが、ウェブアクセシビリティ対応の取組みを支援するために、総務省が開発したアクセシビリティのチェックツール「miChecker」を紹介します。 このツールを利用すると各達成基準ごとの実装方法が示されるので、アクセスビリティの向上に繋げられます。 sponsors 「miChecker」を実際に使ってみる みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) ダウンロードページのページからダウンロードします。 miChecker.exeを実行した状態が下記です。 左の画面に利用ガイドが表示されるので、おおよそわかると思いますが、説明していきます。 まず対象のページURLをアドレスバーに入力します。 ※今回はYahoo（http://www.yahoo.co.jp/）を入れまし

twitter facebook hatena google pocket YouTubeの再生ボタンを押さずにプレビューさせられると興味を持ってもらえるかもしれません。 jQueryプラグインのPreViewTube.jsを利用すると簡単にアニメーション付きでプレビューできます。 sponsors 使用方法 PreViewTube.jsからファイルをダウンロード。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="previewtube.js"></script> <script> $(document).ready(function(){ $('.class名').PreViewTube

twitter facebook hatena google pocket お酒のサイトなどでよく見る年齢認証。 これを簡単にjQueryプラグインで実現できるのがAgeCheck.jsです。 sponsors 使用方法 AgeCheck.jsからファイルをダウンロード。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="/test/js/jquery.agecheck.js"></script> <script> $(document).ready(function(){ $.ageCheck({ "minAge": 20, //年齢設定 "redirectTo":"認証OK時の戻り先",

twitter facebook hatena google pocket クリックするとより多くの情報が表示されるモーダル。 非常に便利で、デザインがシンプルなページが増えてきてより使用されるようにも感じています。 今回紹介するanimatedModal.jsはCSS3の動きの効果を利用して、心地良い動きをさせられるjQueryプラグインです。 sponsors 使用方法 animatedModal.jsからファイル一式をダウンロード。 まずはanimate.cssを読み込みます。 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"> 次に、モーダル部分の記載です。 <a id="id名" href="#animatedModal">クリックしてね

twitter facebook hatena google pocket Google AnalyticsにEmbed APIがあるのをご存知でしょうか。 これはGoogle公式のAPIで、利用すると難しい知識がほとんど不要で、知りたい数値を簡単にグラフ化してもらえちゃいます。 というわけで、このEmbed APIを紹介します。 What Is The Embed API - Overview - Google Analytics -- Google Developers sponsors 下準備 利用するためには、まずAnalytics APIを有効にすることとclient IDの取得が必要です。 Analytics APIの有効化 ・Google Developers Consoleへ。 ・適当なプロジェクトを作成。 ・メニューから「APIと認証」にあるAPIをクリック。 ・Anal

twitter facebook hatena google pocket スマホでよく見る右上の三本線をタップしたらメニューを表示するやつ。 あれをjQueryプラグイン「Scotch Panels ? jQuery Off Canvas Menus and Panels Plugin」を利用することでさくっと実現できます。 sponsors 使用方法 Scotch Panels ? jQuery Off Canvas Menus and Panels Pluginからファイル一式をダウンロード。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="scotchPanels.js"></script>

twitter facebook hatena google pocket スクロールした際になんらかのエフェクトがあると注目を浴びさせることができると思います。 jQueryプラグインのcrossfade.jsを利用すると画像をぼかして、印象的にすることが可能です。 sponsors 使用方法 crossfade.jsからファイルをダウンロード。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="crossfade.jquery.js"></script> <script> $(function(){ $('.crossfade').crossfade(); }); </script> 上記を記述した

twitter facebook hatena google pocket PC、スマホにワンソースで対応するレスポンシブウェブデザインが流行るとともに画像拡大の定番だったLightboxを見かけなくなりました。 理由の一つとして操作性がモバイル端末でよくなかったことでしたが、jQueryプラグインのStripがそれを解消してくれるかもしれません。 これは画面の一部のみを覆い、操作性を向上させることで離脱を下げられることができます。 sponsors 使用方法 Stripからファイル一式をダウンロード。 商用利用は有償となります。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="strip.js"><

twitter facebook hatena google pocket ページが長くなったらページトップというものを設置するサイトが多いですね。 jQueryプラグインのjQuery GoUp!を利用すると、カスタマイズがいろいろできるようになります。 sponsors 使用方法 jQuery GoUp!からファイル一式をダウンロードします。 あとは下記を記述するとさくっと適用可能です。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type='text/javascript' src='jquery.goup.js'></script> <script type="text/javascript"> $(document).ready(functi

twitter facebook hatena google pocket 日時を入力させる際にカレンダーが表示されると直感的でわかりやすいと思います。 RomeはjQueryに依存することなく、2ファイルのみで動作するJavaScriptのカレンダーライブラリです。 sponsors 使用方法 Romeからファイル一式をダウンロード。 まずは入力エリアを記述。 <input id='dt' class='input'> 次にCSSをhead内に。 <link href='rome.css' rel='stylesheet' type='text/css' /> 最後にjsを入力エリアより下に記述すればあっという間に完成です。 <script type='text/javascript' src='rome.js'></script> <script type="text/javascri

twitter facebook hatena google pocket ナビゲーションなどでマウスオーバーした際に効果を与えられるともしかしたらCTRに良い影響があるかもしれません。 chaffleはマウスオーバー時にランダムで文字をぐにゃぐにゃっと表示させられるjQueryプラグインで、簡単に導入ができます。 sponsors 使用方法 chaffleからファイル一式をダウンロード。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type='text/javascript' src='chaffle.js'></script> <script type="text/javascript"> $(document).ready(function()

twitter facebook hatena google pocket 最近点と点をつないで、分子のように見えるメインビジュアルなどを見るケースが増えているような気がします。 jQueryプラグインのParticlegroundを利用すると、簡単に実現でき、おまけにパララックス的な効果もついてきます。 sponsors 使用方法 Particlegroundからファイル一式をダウンロード。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type='text/javascript' src='jquery.particleground.js'></script> <script type="text/javascript"> $(document).r

twitter facebook hatena google pocket 最近ページ遷移でおしゃれに動いているサイト多くなりましたよね。 実現したいなーって人多いんじゃないでしょうか。 jQueryプラグインのAnimsitionならそりゃーもうさくっと実現できますよ！ sponsors 使用方法 Animsitionからファイル一式をダウンロード。 <link rel="stylesheet" href="animsition.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="animsition.js"></script> <script type="text/javascript">