jQuery plugin Pile your sections one over another and access them scrolling or by URL!
pagePiling.js plugin | Create a stack of scrolling pages
jQuery plugin Pile your sections one over another and access them scrolling or by URL!
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
fullPage.js jQuery Plugin for fullscreen scrolling websites - Alvaro Trigo's Blog
Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript. I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier. (Not that I was not looking for a jQuery carousel) In an attempt to create something to make things easier for other people trying
[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/dylay.js"></script> Step 2: HTML 各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。 <ul id="dylay"> <li style="width:
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
Simple Tabs w/ CSS & jQuery - Easy Tab Tutorial with CSS and jQuery - jQuery Tutorials - Tabbed Navigation Tutorial
I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner. For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tu
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
idTabs
Psst, here's beta copy of idTabs 3.0. Email me if you have questions. Version 2.2 Here's what's new. Changed option 'return' to 'change' Removes confusion with javascript's return Added ability to dynamically add idTabs The most requested feature Added 'selected' class option More freedom rules! Added ability to change defaults Now you can select no tab to be shown at start Bind idTabs to differen
Dynamic Drive DHTML Scripts- Animated Collapsible DIV
July 3rd 09': Updated to v2.4, which supports a new set of "rel" and data-image" attributes you can insert into arbitrary links to quickly create link or image link togglers. Description: This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. It's a popular effect on many social networking/ comment sites. Three distinguishing
jQuery plugin - Easy Image or Content Slider | Css Globe
This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. It turned out to be a lot easier than I thought so I went ahead and created this one. Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to
Coda Slider Effect | jQuery for Designers - Tutorials and screencasts
Posted on 3rd June 2008 — Although Panic didn’t really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it. Earlier: Help make jQuery for Designers better Next: Image Fade Revisited How to Solve the Problem Recreating this effect is simple to do if you know what plugins
[JS]複数のパネルをダイナミックにスクロールさせるスクリプト -jParallax
jParallaxは、複数のパネルをパララックスで奥行きを表現し、マウスの動きに合わせてダイナミックにスクロールさせるスクリプトです。 jParallax 複数のイラストを重ねただけでも面白いですが、下記のデモのように写真画像を使用したものや、単に大きい画像のビューアーとしても面白いものとなっています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Victor Coulon : Mon blog High Tech
Robbin & Co. - Chicago Web Development