ページを開く度に要素をランダムに並び替える | NAKAZI LAB.（ナカジラボ）
デモページ JavaScript (function($){ $(function() { var rBox = []; $('.elements').each(function() { rBox.push($(this).html()); }); rBox.sort(function() { return Math.random() - Math.random(); }); $('.elements').empty(); i = 0; $('.elements').each(function() { $(this).append(rBox[i]); i++; }); }); })(jQuery); HTML <div id="container"> <div class="elements">1</div> <div class="elements">2</div> <div class
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"
![[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b654e6fe9828430f6845fd3dd07466d833a3033/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052903-01.png)
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
Fullscreen Slit Slider with CSS3 and jQuery
A bene placito You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity. Ralph Waldo Emerson Regula aurea Until he extends the circle of his compassion to all living things, man will not himself find peace. Albert Schweitzer Dum spiro, spero Thousands of people who say they 'love' animals sit down once or twice a day to en
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
