クライアント用に構築しているWebサイトでjquery視差を使用する必要があります。私は主にバックエンド開発者なので、フロントエンドやjqueryなどについて詳しく学んでいます。http://wwwなどの例に出くわしました。 nikebetterworld.com/とチュートリアルですが、著作権の問題が心配なので、初心者が視差効果を作成するための信頼できる簡単なチュートリアルを見つけた人はいないでしょうか。ありがとう
6 に答える
いくつかのチュートリアル、このスレッドで以前に言及されたものについては申し訳ありません:
- http://www.webdesignshock.com/one-page-website/
- http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
- http://www.richardshepherd.com/smashing/parallax/background.html
- http://www.franckmaurin.com/the-parallax-effects-with-jquery/
- http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
- http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
視差でうまく機能する可能性のあるいくつかの、おそらく便利なプラグイン:
- 表示時にコンテンツを読み込む:https ://github.com/protonet/jquery.inview
- ウェイポイント:http://imakewebthings.com/jquery-waypoints/
- 横方向のスクロール上のスライドコンテンツ:http ://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
- jQuery遅延アニメーション: http: //james.padolsey.com/javascript/jquery-delay-plugin/
- scrollTo:http ://demos.flesler.com/jquery/scrollTo/
- スクロールパス: http://joelb.me/scrollpath/
私は特に、ビューにスクロールするときにCSS3アニメーションをトリガーするためのinviewプラグインが好きです。
そして、インスピレーションとコードスヌーピングのためのより多くの視差ウェブサイトのいくつかの素敵な例:
- http://www.mini.jp/event_campaign/big-point/
- http://www.kiinnostus.fi/autokuume/
- http://www.scozzese.com
- https://victoriabeckham.landrover.com/INT
- http://www.ws-interactive.fr/methode/
- http://swag2012.fr/
- http://activaterinks.com/
http://www.awwwards.comは視差ウェブサイトで溢れているようです。
私はパーティーに非常に遅れていますが、恥知らずな自己宣伝のために別のパーティーをそこに投げ込むだけです:)、私は数日前に簡単なチュートリアルをまとめました:
http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/
そこに何か質問があれば、遠慮なく私にメッセージを送ってください。私はあなたが確信が持てないことについてあなたに話すことができます。
簡単なグーグルはこれを明らかにします。
http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
ちょうど昨日作業を終えたところです:)次の使用を検討する必要があります:http://johnpolacek.github.com/scrolldeck.js/ またはhttp://www.jarallax.com/demo/(android で動作)#its a完全に新しいプロジェクトなので、まだ開発中です
簡単にカスタマイズできるスクロールポイントについては、次を使用できます:http : //cssdeck.com/labs/swayiqbq/2(デフォルトのスクロールポイント(scrolldeck.jsのスライドからスライドへ)をオーバーライドする場合に非常に便利です)
コードのみで作業しているのか、グラフィックとコードの両方で作業しているのかわからない場合、最初のシナリオでは、視差効果を実際に使用するために、このことがどのように機能するかについてデザイナーを指導する必要があります。また、1920x1080でも1024x768と同じようにすべてを魅力的に見せることは、場合によっては難しいかもしれません。
これも試してみてください:)本当に使いやすくカスタマイズしてください http://johnpolacek.github.com/scrolldeck.js/
ここで私はさまざまなウェブサイトから最高の視差スクロールチュートリアルのいくつかを集めました、あなたはそこから学ぶことができます。リンクは次のとおり ですhttp://www.andwecode.com/tutorials/parallax-scrolling-tutorials/