Parallax（パララックス）スクロール効果を実現できるJavaScript「skrollr」
Prinzhorn / skrollr 最近、パララックス効果（視差効果）を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。 今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。 サンプルを作ってみました。 → Parallax（パララックス）効果を実現できる「skrollr」サンプル エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。 作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。 「skrollr」の使用方法 まず、Prinzhorn/skrollrからファイル一式をダウンロードします。 ダウンロードしたこ
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
jParallax - webdev.stephband.info
All who wander are not lost! Why this site This site describes the travel experience of myself and my traveling companion and photographer... Paul (aka: my husband). We tend to avoid the snazzy places... like to stay closer to the people. If you like staying in the big American hotels to rub shoulders with other Americans, you won't like our style of travel. Most of our trips are planned via the
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
web-cocoon.jp - 鳥取県 米子 ホームページ制作 ゲー アプリ 制作 鳥取 方法 リソースおよび情報
web-cocoon.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、web-cocoon.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
マウスにあわせて画像が3D的に追従するサイトを簡単に作れるjQuery jParallaxプラグイン
jParallaxの紹介とデモ jParallaxプラグインは、マウスに合わせて奥行き感のある3Dのような動きを実現できる、パララックス系のプラグインです。簡単なコードだけで、インタラクティブなエフェクトがかけられるので、JavaScriptが得意でない方でも設置できると思います。 とりあえず、どんなものか下のようなデモを作ってみましたので、見てみてください。 デモを見る 仕組み 下のような感じで、画像を重ねマウス量に応じてそれぞれ、スライドさせています。 jParallaxを使えば、画像を重ねたりマウスに応じて画像をスライドといったことをすべてやってくれます。 使い方 基本的な使い方は、とても簡単で、パララックスさせる複数枚の画像をDIVタグで囲み、 そのDIVタグに対して、jparallax() を呼び出すだけです。 <!DOCTYPE html> <html lang="ja"> <
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Default PLESK Page
skrollr - parallax scrolling for the masses
GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).