Javascript jQuery WEBデザイン コーディング

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

14773631096_e61b422359_z

4月から新たにデザイナーになる人も多いのではないかと思います。
クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。
そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。
※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。(GPLやMITやCCなど主要ライセンスの内容と意味のまとめ

もくじ

レスポンシブ対応!PCでも、スマホのフリック操作でも使えるスライダー

flexSlider2

slider
flexSlider2

レスポンシブ対応で、スマホでのフリック操作可能、かつ設置も簡単な
flexSlider2」が一番使いやすく、便利だと思います。
サムネイル有無、ナビゲーション有無も選択できます。

参考サイト

追記

effectでfadeを指定するとIE11でfadeしないので困りましたが、下記のサイトの通りにするとなおりました。

サムネイル付きでページングもできるフォトギャラリー

Galleriffic

Galleriffic

Galleriffic

写真の枚数が多いスライドショーの場合に利用しています。
かなり昔からあるプラグインなのですが、自動再生やサムネイルのページングなど、必要な機能が一通りあり便利です。
サムネイルのページングがあるプラグインは少ないので、Gallerifficは重宝しています。

参考サイト

パララックスさせたい

Nikebetterworld Parallax Effect Demo


名称未設定-2

簡単にパララックスさせるなら「Nikebetterworld Parallax Effect Demo」が簡単です。
こちらのデモのように背景画像をパララックスさせることができます。
パララックスは、以前ほどの流行はなくなりましたが、うまく使うとワンポイントになります。

スクロールに合わせて表示させたい

jquery.inview

inview

いくつか試しましたが、シンプルに使うにはこの「jquery.inview」が手軽でした。
jQueryで動きを追加すると、ユーザーの目を引きます。

参考サイト

背景画像を画面サイズにあわせて表示させたい

bgCover

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

ビジュアル重視のサイトなどでよく使われています。
CSSのbackground-sizeをcoverにすると画面のサイズに合わせて表示されます。

body {
  background: url(photo.jpg) center center no-repeat fixed;
  background-size:cover;
}

参考サイト

フルスクリーンでスクロールさせたい

fullPage.js

fullPage

fullPage.js

通常の縦長のサイトと違って、1画面ごとスクロールしますのでヴィジュアル重視のサイトなどに最適です。

参考サイト

スクロールするとヘッダーを固定させたい

headerFix

jQueryでスクロールするとヘッダーを固定させる

定番になった感のあるスクロールを始めると固定するヘッダー。
私が以前に作ったものがあるので、参考にしてもらえればと思います。

参考サイト

ヘッダーが固定されている分、ページ内リンクがずれることがありますので下記のサイトを参考にしてみてください。

順番にアニメーションさせたい

jQuery.Deferredでわかりやすく順番にアニメーションする方法

deferred

jQuery.Deferredでわかりやすく順番にアニメーションする方法

jQueryで、アニメーションを順番に実行させるには、delayやcallbackを使うのが簡単ですが、構造が複雑になり修正が大変だったります。
このサイトで紹介されているDeferredを使えば、順番通りにアメメーションさせたり、順番を入れ替えたりするのが簡単です。
アクセス時にアニメーションを表示させる時などによく使います。Deferredを使い始めて、作業時間がかなり短縮できました。

参考サイト

テキストをアニメーションさせたい

textillate.js

textillate

textillate.js

テキストをアニメーションさせる場合にはこの「textillate.js」が便利です。
多くのアニメーションが可能です。

参考サイト

その他の便利な小技

-Javascript, jQuery, WEBデザイン, コーディング