[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch -GitHub pageSwitchのデモ pageSwitchの使い方 pageSwitchのデモ pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。 下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
![[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch](https://cdn-ak-scissors.b.st-hatena.com/image/square/fec6bf67d7730443566e7451a2e74cd7133ab866/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012501.png)
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu
![[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2](https://cdn-ak-scissors.b.st-hatena.com/image/square/df5d3a30b733e55f7a58d3fb89e38ff656272054/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031901-00.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
