WEBサイト制作の勉強

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

jQuery animateメソッドを使ったスムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。

$(function() {
  $("#to_top").on('click', function () {
    $('html,body').animate({ scrollTop: 0 }, 'swing');
      return false;
    });
});

複数の場所にスムーススクロールで移動させたい場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
スクロールの位置・速さなどを調整する

もし、スクロールの位置を変えたい場合は、ターゲット要素の位置(offcet)を調整することが変更できます。

以下はターゲット要素より、50px上にスクロールするサンプルです。

var position = target.offset().top;
var position = target.offset().top - 50;

注意しなければいけないのは、古い書き方だとjqueryの1.12.0以上だと動かないので、必ず正しい記述をしましょう。


間違った記述

$('a[href^=#]')


正しい記述

$('a[href^="#"]')


スクロールが300pxに達したらボタンを表示

   $('.scroll-btn').hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('.scroll-btn').fadeIn();
        } else {
            $('.scroll-btn').fadeOut();
        }
    });

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは?
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});
メソッドチェーンを使い、順番に処理を行う
$('#box').animate({'left': '500px'}).animate({'top': '300px'});
速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);
});
イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の2種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},{
    'duration': 600,
    'easing': 'linear'
});
アニメーションの終了後に何かする
$('#box').animate({
    'left': '500px'
},{
    'duration': 600,
    'complete': function(){
        alert('終わりました');
    }
});

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

vestride.github.io


デモページ

http://yachin29.com/school/shuffle/

<div id="wrapper">
	<h1>Shuffle Demo</h1>
	<ul id="btn">
		<li data-group="all" class="active alpha">ALL</li>
		<li data-group="html" class="alpha">HTML</li>
		<li data-group="javascript" class="alpha">JavaScript</li>
		<li data-group="jquery" class="alpha">jQuery</li>
		<li data-group="banner" class="alpha">banner</li>
	</ul>
	<ul id="animationList">
		<li data-groups='["html"]'><span class="html">HTML</span></li>
		<li data-groups='["javascript"]'><span class="javascript">JavaScript</span></li>
		<li data-groups='["jquery"]'><span class="jquery">jQuery</span></li>
		<li data-groups='["banner"]'><span class="banner">banner</span></li>
		<li data-groups='["javascript"]'><span class="javascript">JavaScript</span></li>
		<li data-groups='["html"]'><span class="html">HTML</span></li>
		<li data-groups='["jquery"]'><span class="jquery">jQuery</span></li>
    <li data-groups='["banner"]'><span class="banner">banner</span></li>
		<li data-groups='["javascript"]'><span class="javascript">JavaScript</span></li>
		<li data-groups='["jquery"]'><span class="jquery">jQuery</span></li>
		<li data-groups='["javascript"]'><span class="javascript">JavaScript</span></li>
		<li data-groups='["banner"]'><span class="banner">banner</span></li>
    <li data-groups='["banner"]'><span class="banner">banner</span></li>
		<li data-groups='["html"]'><span class="html">HTML</span></li>
    <li data-groups='["html"]'><span class="html">HTML</span></li>
		<li data-groups='["jquery"]'><span class="jquery">jQuery</span></li>
	</ul>
</div>


jQuery

$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});

レスポンシブロゴ

レスポンシブロゴ(Responsive Logos)とは

f:id:yachin29:20180112130732p:plain

サイト全体のレイアウトをデバイス毎に変えていく、レスポンシブ デザインは近年、非常に多くのサイトに採用され、今ではwebサイトデザインのスタンダードな考え方になっています。
レスポンシブロゴ(Responsive Logos)とは、様々な画面サイズに合わせて数段階に変化するロゴのことです。これまでは、スマートフォンタブレット、デスクトップなど、デバイスごとにロゴを変えるという発想はあまりありませんでしたが、最近ではロゴ自体を簡素化して洗練されたバージョンに時間をかけてリニューアルする企業も増えており、レスポンシブロゴを採用するケースも増えています。


responsivelogos.co.uk



ferret-plus.com

広告を非表示にする

clickイベントとtransform

f:id:yachin29:20160427010604j:plain

 

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

jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CUPはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。

CSS3の「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。

jQueryとCSS3を上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。

 

 

 

以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。
ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。

yachin29.hatenablog.com



今回はhoverでは無く、jQueryのclickイベントを使ってtransformを適用させるようにしてみましょう。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
   
  });
});
</script>
toggleClass(class名)

指定したCSSクラスが要素に無ければ追加し、あれば削除する。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
    $(this).toggleClass("red"); //div.boxにクラス名redが追加される
  });
});
</script>
slideToggle(スピード)

各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。
アニメーション効果は指定したスピードで実行されます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
     $(".menu").slideToggle(200);
  });
});
</script>

求職者支援訓練 webサイト制作科 2018年2月開講クラス募集中

東京池袋のフェリカテクニカルアカデミーでは、只今平成30年2月20日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。(受給資格がありますので、ご確認下さい。)
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL:03-3981-7201

募集期間:1月22日まで

訓練期間:2018年2月20日 ~ 2018年8月19日

訓練時間:15時55分 ~ 20時50分

フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。

ご予約フォームはこちらから

www.felica.info



求職者支援訓練とは?

求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練(求職者支援訓練)を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。

求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。

 


Web制作の現場に行けるインターンシップ制度の導入

フェリカでは、Web制作会社を中心にインターンシップ制度を導入しています。学校に通いながら、空き時間に実際の職場へ行き、現場で求められるスキルや会社の雰囲気を肌で感じる機会を設けています。インターン先で就職というケースも実績として非常に多いです。入校した際には是非チャレンジしてください。

どんな授業を行うの?

クライアントワーク

実際のクライアントワークを通し、サイト制作の企画からローンチ後の検証までを自身で体験し、サイト制作に必要なノウハウを養います。また架空サイトでは無い、実際のサイト制作を通して学んだ事をポートフォリオに記載する事で、就職活動の上でもクライアントワークはアピールにもなります。

過去の受講生の作品

www.felica.info




デザイン

このクラスではwebサイトを「ユーザーが使う製品」と考え、その製品に伴うデザインは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方を元に、経験者であっても未経験者であってもAppleGoogleなど各メーカーのデザイン・ガイドラインを参考にして、制作を進めていきます。

f:id:yachin29:20161121130447j:plain




スマホサイト制作

最近では、Google検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになっています。Googleだけでなく、多くのサイトでPCよりもスマートフォン利用者の方が多い現在、今まで以上にスマホサイトが重要になってきます。
授業ではGoogleが推奨する「レスポンシブデザイン」や「動的な配信」でのサイト制作を学ぶ事が出来ます。
また、モバイルファーストインデックス (MFI)といった、最近の考え方やアルゴリズムも学び、よりスマートフォンに適したUI・UX設計を行っていきます。




アプリ開発

クラウドベースのスマホアプリ開発プラットフォームを使用し、HTML5・CSS3とJavaScriptを用いて、iOSAndroidの両方に対応したハイブリッドアプリの開発を行います。実際にアプリストアに並べる為に必要なワークフローを体感してもらいます。

f:id:yachin29:20180103222000p:plain

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる

f:id:yachin29:20160425030539j:plain
https://jquery.com/



jQueryの特徴

jQueryの使い方

jQueryを使用する際には、まずjQuery本体をダウンロード、もしくはCDN(Content Delivery Network)を使い、HTMLファイルにリンクさせる必要があります。
jQuery本体はバージョンが1系と2系に分類されていて、2系は1系に比べIE8以前のサポートを除いたことでより軽量化を図っています。(※なので2系を使っているWEBサイトはIE8未満ではjQueryは動きません)

本体をダウンロードして使う場合

上記jQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。

古いjQueryのバージョンはこちらからダウンロード出来ます
https://code.jquery.com/jquery/code.jquery.com


また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の2種類のファイルが用意されています。

  • compressed~……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed~……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい

通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。

本体をCDNで使う場合

CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified(改行が除かれた圧縮版)を使用しましょう。


CDNjQueryの公式サイト以外にもGoogleMicrosoftにも用意されています。


developers.google.com


https://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0www.asp.net



記述方法

HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。

jQuery本体をダウンロードしている場合

<head>
 ・・・
<script src="js/jquery-1.11.0.min.js"></script>
</head>

もしくは

<body>
 ・・・
<script src="js/jquery-1.11.0.min.js"></script>
</body>
CDNの場合
<head>
 ・・・
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>
</body>
</html>


CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>');</script>
</script>
</head>
<body>
</body>
</html>
広告を非表示にする