スライドショーみたいに1ページずつスクロールするウェブサイトをつくる
スライドショーみたいに1ページずつスクロールするウェブサイトをつくりたく、いろいろ調べた結果、One Page ScrollというjQueryのプラグインを使うことにした。 いまならfullPage.jsだろ？というツッコミを受けそうだけど、そこまで多機能でなくて良いし、なにより軽量でシンプルなほうが良いという人にオススメだ。 One Page ScrollとfullPage.js One Page Scrollは、iPhone5sのようなウェブサイトをつくるために開発されたjQueryプラグインだ。iPhone5sという時点で時代を感じる。 そしてより多機能に、より使いやすくしたのがfullPage.js。 ただ、「スライドショーみたいなウェブサイトがつくりたい」という目的を果たすためだけなら、OnePageScrollで十分だろう。 jquery.fullPage.min.jsが29.
実装簡単！スマホにも対応のセクションスクロールができるスクリプト【Scrollify.js】
section要素やdiv要素が垂直に配置された縦長ページをスクロールしたときに、各セクションを画面のトップ位置にスナップさせるjQueryのプラグイン「Scrollify.js」のオプションなど細かく解説します。 パソコンのホイール操作はもちろん、スマートフォンやタブレットなどのタッチ操作にも対応していて、とても便利です。 また、セクションがウィンドウの表示領域に収まらなくても、セクション内でスクロールができるというのも、魅力の1つです。
jQuery Scrollify - Power steering for your scroll wheel
Basic Setup Scrollify requires jQuery 1.7+. <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : ".example-classname", }); }); </script> </head> <body> <div class="example-classname"></div> <div class="example-classname"></div> </body> </html> Configuration $.scrollify({ section : "section", sectionName : "section-name", interstitialSection : "", easing: "easeOutExpo", sc
［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!
一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。 Perfect Scrollbarについて Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html ダウンロードはこちら perfect-scrollbar 実装方法 準備するもの jQuery Perfec
![［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c702dfee202d14913544bec5c1116498b0ef96d/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fp%2Fparadox_tm%2F20160517%2F20160517154350.png)
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
CakePHPで無限スクロール - Qiita
function index(){ // ページング処理 $this->set('products',$this->paginate('Product')); } <?php echo $this->Html->script('jquery.infinitescroll.min', array('inline' => false)); ?> <?php echo $this->Html->script('products_index', array('inline' => false)); ?> <div id="products"> <?php // 表示内容 foreach($products as $product){ echo '<div class="product">'; echo '<h3>'.$post['Product']['title'].'</h3>'; echo '
簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
