パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
ドット絵でパララックス効果 - MANA-DOT
トップページ でトップ絵に採用してみましたが、ドット絵で パララックス効果 をやってみました。 パララックス効果とはなんぞや パララックス(parallax)とは日本語では視差のことで、大雑把に言うと視点が変わることによる物の見え方の違いのことです。 パララックス効果というと、近年おしゃれなWebデザインとして多方面で利用されている、スクロールやマウスの移動などで画像をずらし、その時にずらし方を画像ごとに変えてやることで遠距離感を出す手法を指すようです。 Google検索すると、おしゃれなサイトが沢山出てきます。 今回は、このサイトのトップ絵としてパララックス効果を利用した画像を採用してみました。 デモ こんな感じで、マウスを動かすと視点を変えたかのような動きをします。 レシピ 画像の用意 今回は以下の様な画像を用意しました。 女の子ははじめからトップページ用ということで、僕の嗜好を詰め込
加速度センサーでパララックス効果 - MANA-DOT
以前 から、このサイトのトップ絵をパララックス効果でマウスでグリグリ動くようにしていますが、 この記事で紹介されているパララックスライブラリが、スマホの場合加速度センサで傾きを使ってアニメーションさせるというもので、面白そうだったのでやってみました。 デモ スマホで見てください。手元のAndroidで動作確認しました。 手元のAndroidだと、アニメしてくれますが、ちょっとカクカクしています。 コード 以前のコードに手を加え、UAがスマートフォンの場合は加速度センサの値でアニメするようにします。 $(function() { var baseX = $('#parallaxImage').offset().left + 200; var baseY = $('#parallaxImage').offset().top + 150; var layers = $('#parallaxIma
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
