パララックスと呼ばれている方法を用いて、少し複雑な表現に挑戦してみましょう。
パッと見、難しそうに感じるかもしれませんが、複数のレイヤーを移動させるというシンプルな原理でできています。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
パララックスによるアニメーションを実装する
完成形はこんな感じです
See the Pen parallax by taichi (@taichi_na) on CodePen.
今までに比べてかなり複雑です。ですので理解できるところまで頑張ってみましょう。
背景のスライドと同時にテキストもスライドします。背景のスライドはそれほど難しくないですが、テキストをスライドさせる仕組みはちょっと厄介です。
背景のイラストはペイントソフトを使ってテキトーに書きました。このように画像をリピートして使いたいときは、両端の高さをそろえると自然に見えます。山の稜線をそろえる、ということです。
では実際に作っていきましょう。
HTML をまずは準備しましょう
See the Pen parallax by taichi (@taichi_na) on CodePen.
まずは、３つの下層があることに注意してください。
<div id="wrapper">
<div id="bg1">
<div id="bg2">
それぞれの background に背景画像として山のイラストを CSS のほうに書いておきます。
そしてそれをスライドさせていきます。とりあえず画像を３つ用意して重ねているというところだけ押さえておきましょう。
そして、 <header> <main> が入ります。
<main> の中に
<div id="slide">
<div id="sections">
<section>～</section>
またこのように入れ子の構造になっているので少し混乱すると思いますが、jQuery を作るときに対応させていくので現時点ではわからなくても問題ありません。たぶん…
CSS で詳細を決めていく
See the Pen parallax by taichi (@taichi_na) on CodePen.
#wrapper, #bg1, #bg2 それぞれに背景画像を設定しています。
そして、遷移時にゆっくりさせたいので、 transition: background 0.3s; を付けています。
テキストのスライド部分に関してです。
#slide {
position: relative;
overflow: hidden;
width: 320px;
height: 370px;
margin: 0 auto;
}
#sections {
position: absolute;
width: 1280px;
height: 100%;
}
section {
float: left;
width: 320px;
}
#sections に横並びに各セクションが入っていて、画面から消えた部分に関しては overflow: hidden; で表示させないようにしています。
#sections の width は1280px に指定されています。これは section（各幅320px） が4つ並んで配置した時の値となります。
うーん、少し難しいので理解できたらついてきてください。
li a.current {
background: #D0DFE6;
}
最後のこちらなんですが、リンクに current というクラスをつけています。
これをクリックされたものに適宜移動させて、背景色を変更するように jQuery で指定します。
よし、ではHTM, CSS はこの辺でやめておきます。
jQuery でクリックされたときにスライドさせる
See the Pen parallax by taichi (@taichi_na) on CodePen.
いよいよ jQuery でページに動きをつけていきます。
アクションのきっかけは、１，２，３，４各数字をクリックしたときに生まれますね。
1. $("a").click(function(){
a をクリックしたときに、｛｝内の関数を実行する、というスクリプト
2. var dis = $(this).html() - 1;
変数 dis を指定しました。
this は a を指しますね。その中身の HTML を取得するので、1, 2, 3, 4 いずれかになりますね。もし1がクリックされたら、-1 されるので変数 dis の値は 0 となります。
3. $("#sections").animate({"left" : dis * -320 + "px"}, 300);
section が４つ入っている #sections を animate で動かします。
左からの値を指定してあげます。１がクリックされたとき、変数 dis の値は 0 となるので(
0 × -320 で 0 )、left の値は０となり、#sections は動きません。
4. $("#wrapper").css("background-position", dis * -20 + "px 100%");
$("#bg1").css("background-position", dis * -150 + "px 100%");
$("#bg2").css("background-position", dis * -700 + "px 100%");
ここでは、#wapper, #bg1, #bg2 それぞれをスライドさせています。
また変数 dis を使い、それぞれ違う数字をかけて移動量を変えています。
5. $(".current").removeClass("current");
$(this).addClass("current");
return false;
});
});
最後に、今付いている current クラスを削除し、クリックされた this(a) に currrent クラスをつけてあげます。
これでクリックされた数字に背景色が移動します。
まとめ：jQuery でパララックス効果を実装してみよう
See the Pen parallax by taichi (@taichi_na) on CodePen.
jQuery の中身を見ると、なんだかアナログに見えて面白いですね。
一つずつ動きをつけていくのは、プラモデルを組み立てていくような感覚に近くて面白いと感じます。
作り方によって、様々な表現が可能ですね。
いろいろ作って遊びながら、jQuery を身に着けていきましょう！
