【jQuery】上にピタッと張り付くメニュー「Clingify」

2016/04/21 サイト制作, 技術系 投稿者:竹内

最近ちょっと流行りの、スクロールしていくと画面上部にグローバルメニューが張り付いて消えることなく追従してくれるやつ。(表現が難しい)

LIGさんのサイトが採用していますね。

これを簡単に実現することが出来るらしいプラグインがあるとのことで試してみました。

追従式グローバルメニュー「Clingify」とは

clingify01

追従式と言うらしいです。
メニューに限らずヘッダー要素なども手軽に固定できるjQueryのプラグインです。

早速実装してみましょう

clingify03

ファイルのダウンロード

まずは、ファイルをダウンロードします。
画面右側の方の[Download ZIP]のボタンからダウンロードします。

DLサイト→ https://github.com/theroux/clingify
こちら公式サイト→ Clingify

Clingifyサイトのデモページを参考に必要なファイルをアップロード

今回は『clingify.css』と『jquery.clingify.js』を使うようです。
こちらをサーバーへアップロードします。

HTML・CSS・JSの設定

以前記事にしましたWebフォントのデモページを流用します。
Clingifyサイトのデモページや公式サイトは英語ですが、変更箇所がわかりやすく記載されています。
clingify02

HTML index.html

アップロードした2つのファイルとjQueryファイルの読み込み、JSの指定を記述します。
アップロードした2つのファイルの編集は必要ありません。

CSS

CSSはグローバルメニューの装飾とスクロール用に高さ設定、スクロールがわかりやすいように背景画像を付けました。これらはデモ用の設定なので無くでも大丈夫です。

かっこ悪いのでそれっぽく装飾し直します

clingify04

CSSの装飾で各メニューの色を統一しborderで仕切り線を、またnavに対する背景色をボタンと同じ色にすることで帯っぽくしてみたいと思います。

CSS

本来であれば各ボタンの色の統一はまとめてすっきりさせることが出来るのですが、あえて元のCSSの色を変更する形にしています。

まとめ

思ったより簡単でした。
既存のWebサイトにも容易に組み込む事が出来ます。

Clingify公式サイトではもっと複雑なオプションによって見せ方を変えているようです。
英語なので理解を深めるには時間がかかりますが、もうちょっと工夫して張り付く前と後で違った表示が出来るようになればと思います。

近々スマホ対応の折りたたみメニューとも組み合わせてみたいと思いました。
それではまた。

カレンダー

    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    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
【jQuery】パララックスデザインの作り方

2016/04/19 サイト制作, 技術系 投稿者:竹内

parallax01

何年か前からちょいちょい見かける「パララックスデザイン」のWebサイト、存在は知っていたのと、WordPressの海外製のテンプレート等で導入されたりしています。
どういった形で実装するのか興味がありましたので、これを機にチャレンジしてみたいと思います。

パララックスデザインとは

ブラウザーのスクロールにあわせて手前のコンテンツと背景を異なるスピードで動作させて奥行き感を出したり、スクロールすることで画面外からフェードインしたりフェードアウトしたりとWebサイトを華やかな演出で表現することが出来ます。

パララックスデザインのメリット・デメリット

当然メリット・デメリットを理解した上でお客様へ提案しなければいけませんので、私が考えるメリット・デメリットについて記述しておこうと思います。

パララックスデザインのメリット

  • 動きのあるWebサイトの演出
  • 1ページで複数のコンテンツを構成するのに有効(ランディングページなど)

パララックスデザインのデメリット

  • 縦長のWebサイトになりがち
  • 多くの画像や複数コンテンツを1ページに納めるためデータが重くなる

見せ方が華やかになる分、やはりデータが重くなり表示に時間がかかってしまうのではないかと思います。
そこはロードするタイミングの調整など別の部分で工夫をした方が良いかもしれません。
縦長のWebサイトになってしまう部分についても「ファーストビュー」が重要と言われる昨今、下の方まで見たくなるような演出を心がけないとですね。
通常のWebサイトのようにグローバルメニューを設置してページ内リンクでスクロールの演出を使うような工夫が良いでしょうか。

パララックスデザインに挑戦

恥ずかしながら手法が全くわかりませんので、偉大なる先人方の知恵を借りようと思います。
今回は「WEB DESIGN MAGAZINE」様の記事に沿って勉強させて頂きます。

参考サイト → パララックスサイトの基本的な作り方 1/2!

パララックスとは「視差効果」ということなのですね、なるほど勉強になります。

スクロールした値を取得

parallax02

参考サイトに習ってHTMLとCSSとJSを設置していきます。
スクロールした値を使ってボックスの移動を行うようで、その数値を取得する必要があるそうです。

HTML

CSS

JS

ボックスを別々に動かす

parallax03

各ボックスへ異なる数値を足してスクロールスピードを変えます。その数値に必要なのが上での「取得した数値」のようです。

HTML

CSS

JS

応用で上方向に移動するブロックを混ぜてみました

思ったより簡単だった(まとめ)

もっとゴテゴテしたscriptを複雑に使うのかなーと思っていたのですが、意外と簡単でした。

参考にさせて頂いたところのまんまのデモページが動いただけですが、「スクロール数値を取得してそれをどうにかすると出来る。」と言う基本がわかっていれば、縦方向だけでなく横方向、背景画像も挑戦して行けそうな気がします。
凝った演出をしようとするとそれ相応に手間が掛かりそうですが、「パララックスプラグイン」なるものもあるようなので工数を抑えて導入することも検討してみます。

工夫次第では「こんなWebサイト」も作れるようです。
背景の遅いスクロールの画像をぼやけさせる写真や動画のような演出がとても素晴らしいです。

また、既存のWebサイトの背景のスクロールを調整するだけでもちょっと違った演出が出来そうです。
今まで作ってきたWebサイトにも実装してみようかなと思いました。

「思ったより簡単だった」事を教えてくれ、わかりやすい手ほどきを公開してくださっている「WEB DESIGN MAGAZINE」様に御礼を申し上げるとともに、今回はこの辺にしたいと思います。
ありがとう御座いました。

カレンダー

    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    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
CGI版PHP設定の落とし穴

2016/04/05 技術系 投稿者:千本木

サーバで稼働しているモジュール版PHPとは別バージョンのPHPを動作させる必要がある場合に、CGI版PHPを利用することが良くあります。

弊社スタッフの一人が例によってCGI版PHPをインストールしていたのですが、CGI版として動作させるPHPのconfigureが悪いのか、パスの設定が悪いのかうまく動作しないことがありましたので紹介いたします。

弊社スタッフの設定内容

弊社スタッフが行った作業は以下の通りです。

  • 設定したいPHPのソースファイルを持ってきてCGI版PHPが使用できるように「–enable-cgi」オプションを付けてインストールした。
  • Apache設定で特定ディレクトリに対してScriptAliasを設定し、CGI版PHPの実行ファイルを持ってきた。
  • CGI版でPHPを動作させたいディレクトリで、.htaccessを使用しAddHandlerで.phpをマッピングした。

ところが実際に他のサーバで動作実績もあったにも関わらず、CGI版PHPが動作しない事態となりました。

ちなみに設置した.htaccessは以下の通りです。

上手くいった設定方法

AddHandlerではなく、SetHandlerで.htaccessに設定したところ、動作しました。

原因

なぜAddHandlerはダメでSetHandlerは動作したのでしょうか。

結論から言うと、AddHandlerよりもSetHandlerの方が優先されるため、.htaccessで.phpに対しAddHandler設定を行っても無視されてしまったことになります。

察しの良い方はすぐお分かりかと思いますが、RPMでインストールしたPHP5.6が生成するApache設定ファイルに以下の記述がありました。

今回インストールしたPHP5.6では、PHPのハンドラをマップする際にAddHandlerではなくSetHandlerを使っていました。

AddHandlerとSetHandlerの違い

では、AddHandlerとSetHandlerはどのように違うのでしょうか。

Apache公式ページによるとAddHandlerとSetHandlerは以下のように説明されています。

両方ともハンドルをマップする際に使用されますが、AddHandlerは拡張子に対してマップさせるのに対して、SetHandlerは特定のファイルに対してマップさせる違いがあります。また、SetHandlerはデフォルトのハンドラをオーバーライド(上書き)するという特徴があります。

まとめ

理由が分かってしまえばなんてことない設定ですが、設定に慣れていれば慣れているほど見落としやすいところかもしれません。

もしCGI版PHPがうまく動作しない方がいらっしゃれば、お試しください。

カレンダー

    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(エニューム)