WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

jQueryプラグイン

フィルタリングとモーダルウィンドウを導入

フィルタリングとモーダルウィンドウの2つを導入する事でこういったUIを作る事が可能です。 chiyo-katsumasa.com fancyapps.comwww.kunkalabs.com <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MixItUpとFancyBoxを合体</title> </meta></meta></head></html>

ページネーションの導入が簡単に出来る「paginathing.js」

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com BootStrap CDN v…

Bxsliderの実装

bxslider.com 必要なファイル jquery.bxslider.css jquery本体(CDN) jquery.bxslider.js <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bxsliderの実装</title> <style> html,body,h1,ul,li{ margin: 0; padding: 0; } ul{ list-sty…</meta></meta></head></html>

スクロールに合わせてアニメーションが付けられるjqueryプラグイン「AOS」

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。michalsnik.github.io AOSの特徴 「Fade」「Flip」…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

フィルタリング機能とモーダルウィンドウを使ったギャラリー

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com フィルタリング…

スクロールアニメーション「SCROLL TRIGGER」の実装

ページのスクロールと連動して文字や画像に様々なエフェクトで要素が表示されていくスクロールアニメーション、Javascriptプラグイン「SCROLL TRIGGER」 jQuery不要で動くので動作も軽く、比較的簡単に設定できます。 ScrollTrigger - Scroll based animatio…

jQueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io デモページ http://yachin29.com/school/shuffle/ jQuery $(function() { $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active…

jQueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

jQueryでのcookieの指定

jQueryでのcookieのコントロールにはプラグインを使用するのが便利です。 github.com <script> $(function(){ if($.cookie("access")){ $('.box').css({display:'none'}); } else { $('.box').delay(2000).fadeOut(2000); }; $(window).load(function(){ $.cookie("a</script>…

clickイベントとtransform

最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメー…

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応) Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処…

フィルター機能とソート機能がついた「MixItUp」

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。 mixitup.kunkalabs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…

画像を遅延読み込みさせるjQueryプラグイン「Lazy Load」

Lazy Loadとは画像のレイジーローディング(遅延読み込み)を実装する為のjQueryプラグインです。前回やった無限スクロールと同様に画像を遅延読み込みさせる事で転送量の節約、ページの表示速度の向上に繋がります。 一見メリットだらけに思えますが、こうい…

youtubeの動画を背景にするjQueryプラグイン「videobackground」

HTML5が普及し、videoタグで動画をHTMLに入れる事が容易になり、最近は動画を使ったwebサイトも珍しくありません。feel.kiyomizudera.or.jp sliceof.heartland.jp storq.com 今回はYoutubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」…

フィルター機能とソート機能がついた「MixItUp」

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。 mixitup.kunkalabs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

高機能なLightBox系プラグイン「FancyBox」

jQueryプラグイン「fancyBox」は画像だけで無く、YouTubeやGoogleMapなどにも対応しているLightBox系のプラグインです。 最新のfancyBoxv 2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているためライセンスの取り扱いに注意が必要です。…

高機能なLightBox系プラグイン「FancyBox」

jQueryプラグイン「fancyBox」は画像だけで無く、YouTubeやGoogleMapなどにも対応しているLightBox系のプラグインです。 最新のfancyBoxv 2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているためライセンスの取り扱いに注意が必要です。…

既存のデータにjQueryプラグインを導入する

bxslider.com lokeshdhakar.com index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

既存のデータにjQueryプラグインを導入する

bxslider.com lokeshdhakar.com index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

jQueryプラグイン

jQueryプラグインとは、jQueryと一緒に利用するJavaScriptライブラリーのことです。jQuery自体、JavaScriptに比べると簡単な記述で利用できますが、jQueryプラグインは必要なjQueryがすべて既にパッケージングされている為、より手軽にWebサイトにさまざまな…

無限スクロール「Infinite Scroll」のカスタマイズ

github.com オプション機能の追加 <script> $(function(){ $('#contents').infinitescroll({ navSelector: ".navigation", nextSelector: ".navigation a", itemSelector: ".article", dataType: "html", animate: true, extraScrollPx: 200, //次のコンテンツを読み…

ポートフォリオなどに使えるframework.js

今回の「framework.js」は画像などをカテゴライズして表示してくれるjQueryです。ポートフォリオなどに非常に向いています。 Creating a “Filterable” Portfolio with jQuery - Envato Tuts+ Code Tutorial 作りは簡単で、まずはメニュー部分のulにIDでfillt…

ポートフォリオなどに使えるframework.js

今回の「framework.js」は画像などをカテゴライズして表示してくれるjQueryです。ポートフォリオなどに非常に向いています。 Creating a “Filterable” Portfolio with jQuery - Envato Tuts+ Code Tutorial 作りは簡単で、まずはメニュー部分のulにIDでfillt…

要素をグリッド状に配置してくれる「jQuery Masonry」

グリッドに沿って各要素をレンガ状にレイアウト出来る「Masonry」、ウィンドウサイズが変わった際のアニメーションなども含まれていて、初心者の方でも比較的簡単に導入でき、カスタマイズも容易に出来るのでぜひ使ってみましょう。 http://masonry.desandro…

CSS3アニメーション・transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

シングルページでナビゲーションをカレント表示するjQuery

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>カレントjQuery</title> <link href="style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div id="container"> <…</div></body></html>