こんにちは、ウェブラボクリエイターズメモです。 最近個人的にパララックスなどWebサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな? と思い探してみたところ見つけたのでその紹介をしたいと思います。 →まずは作成したDEMOをご覧下さい スクロールすると背景が少しずつ動いていく良く見るパララックスですね。 これがとても簡単に実装できてしまうんです! まずは下記の公式サイトからプラグインをダウンロードしてきましょう。 →Parallax.js公式 ダウンロードしたファイルのparallax.min.jsだけあれば大丈夫です。 ではまずはHTMLから解説していきます。 まずはjQuery本体と一緒にプラグインを読み込ませます。 ■HTML スクリプト部分 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0
パララックスを使うメリット・デメリット パララックスを使用する際のメリット・デメリットについて紹介します。 パララックスのメリット・デメリットは表裏一体なところがあります。**上手く使えばメリットとなり、誤った使い方をするとデメリットとなってしまします。**使用箇所は慎重に選定した方が良いです。 メリット 見せたいものをピンポイントで見せられる デザインの幅が広がる ストーリー性を持たせることができる これらのメリットを紹介します。 💡 見せたいものをピンポイントで見せられる 動きやスピードを操作することで、他要素との差別化が可能となり、ユーザーに見せたいものをピンポイントで見せやすくなります。 💡 デザインの幅が広がる パララックスは、デザイン性の高いサイトに取り入れられることが多いです。パララックスを使用することで、デザインの幅を広げるとともに、インパクトを与えることができます。
こんにちはアートディレクターの奥田です。 最近は娘の成長を見るのがとても楽しみで、寝返りしたと思えば次の日にはずりばいの練習をしていたりと日々成長していく姿に感動しております。 さて、Webサイトに高級感を与える慣性スクロールとパララックスエフェクトのVanilla.jsのプラグインを作ってみました。 サイト制作にぜひ役立ててみてください。 Table of contentsインストール使い方オプション補足さいごにインストールnpmで簡単にインストール可能です。 npm install luxy.js --saveまたは、ページにスクリプトを含めることで使用できます。 <script src="path/to/luxy.js" charset="utf-8"></script>プロジェクトにluxy.jsを含めて以下のように初期化してください。 <script charset="utf-8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く