HTMLとCSSでパララックス「的」な手法

2017/01/24 技術系 投稿者:竹内

パララックス01

先日、サイト制作の際に「スクロール時に背景を固定してパララックス的な見せ方をしたい、(且つお安く。。)」との要望があり、CSSとHTMLの工夫でいけるかなと挑戦した事がありました。
似たような手法を今後使う事もありそうですので、一度まとめておこうと思い、今回記事にしてみます。

パララックス「的」な手法

パララックス効果とはスクロール時の動いた高さを数値として取得し、座標や移動速度を個別に設定することで奥行き感を出したり、フェードイン・アウトさせたりする手法なのですが、今回のお客様の要望では「スクロール時に背景を固定」ということでしたので、CSSで背景を固定しつつ表現を工夫していきます。
本来のパララックス効果とは違うのですが、今回は「背景を固定」ということもあり、スクロール値を取得せず、固定した背景が切り替わる方法とします。

HTMLとCSS

HTML

CSS

解説

背景の画像を、「header」と「.two」に配置し、それぞれ「background-attachment: fixed;」で固定します。
.one」と「.three」は通常の領域とします。
スクロールをすると「.one」を境に上下の固定された背景画像がパララックス「的」に切り替わって見えるようになっています。
ポイントとして、使用する背景画像は縦スクロールを行っても途切れることがないように余裕をもって縦長に作っておくことです。

パララックス02

まとめ

パララックス効果はなんとなく技術的に複雑なイメージがあり、導入するのに手間がかかりそうなのですが、今回のように特別なスクリプトを用いることなく、それっぽい効果を実装することが出来ました。
本来のパララックス効果とは違うのですが、十分今風な表現になっていると思います。

その他、ページコンテンツをブラウザ幅一杯に広げたり、背景で動画を流したりと、今流行っている手法がいくつかあります。
これらについてもスマホ対応を含め、簡単に実装できる手法を模索して行ければと思います。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)