jQueryを自分で書いて
アニメーションさせよう
2013年9月14日 マークアップ勉強会
自己紹介
越水大輔 コシミズダイスケ
Twitter @ksmzdsk
フリーランスWEBデザイナー
ブログやってます!
キリンブログ http://kirinblog.com
ブログやってます!
キリンブログ http://kirinblog.com
FacebookページでWEB制作に関する情報配信し
ています。
今回の対象者
今回の対象者
● HTML、CSSは書ける。
今回の対象者
● HTML、CSSは書ける。
● 動くWEBサイトを作りたい!
今回の対象者
● HTML、CSSは書ける。
● 動くWEBサイトを作りたい!
● jQueryはプラグインを入れるだけ。。。
今回の対象者
● HTML、CSSは書ける。
● 動くWEBサイトを作りたい!
● jQueryはプラグインを入れるだけ。。。
● 自分でjQueryを書くことに苦手意識がある。
今回の対象者
● HTML、CSSは書ける。
● 動くWEBサイトを作りたい!
● jQueryはプラグインを入れるだけ。。。
● 自分でjQueryを書くことに苦手意識がある。
jQuery初めの一歩的な内容になっております!
jQueryとは?
● JavaScriptライブラリ
jQueryとは?
● JavaScriptライブラリ
● HTML、CSSがわかれば入りやすい
jQueryとは?
● JavaScriptライブラリ
● HTML、CSSがわかれば入りやすい
● 情報量が豊富
jQueryとは?
● JavaScriptライブラリ
● HTML、CSSがわかれば入りやすい
● 情報量が豊富
● 軽量
ブラウザごとの挙動の違いを吸収してくれる
ブラウザごとの挙動の違いを吸収してくれる
var div = document.getElementById(‘div1’);
if(div.addEventListener){
div.addEventListener(‘click’, do...
ブラウザごとの挙動の違いを吸収してくれる
var div = document.getElementById(‘div1’);
if(div.addEventListener){
div.addEventListener(‘click’, do...
ブラウザごとの挙動の違いを吸収してくれる
$(‘#div1’).click(function(){
alert(‘クリックされました’);
});
write less, do more.
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
http://jquery.com/ からダウンロード
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
または直リンクを書く。
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
または直リンクを書く。
<script type="text/javascript" src="http:...
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//処理の内容を書いていく
</scrip...
基本形: Aを選択してBを行う
基本形: Aを選択してBを行う
divにcssでcolor:redの設定をする。
基本形: Aを選択してBを行う
divにcssでcolor:redの設定をする。
$("div")
基本形: Aを選択してBを行う
divにcssでcolor:redの設定をする。
$("div").css();
基本形: Aを選択してBを行う
divにcssでcolor:redの設定をする。
$("div").css("color","red");
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
$("#btn")
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
$("#btn").click();
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
$("#btn").click(処理内容);
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
$("#btn").click(処理内容);
+
function(){
$("div").css...
基本形2: AをBをしたとき、
       Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。
$("#btn").click(処理内容);
+
function(){
$("div").css...
要素を選んで、処理を行う。
要素を選んで、処理を行う。
要素を選ぶ→セレクタ
要素を選んで、処理を行う。
要素を選ぶ→セレクタ
$("#hoge").css("color","red"); //id
要素を選んで、処理を行う。
要素を選ぶ→セレクタ
$("#hoge").css("color","red"); //id
$(".huga").css("color","red"); //class
要素を選んで、処理を行う。
要素を選ぶ→セレクタ
$("#hoge").css("color","red"); //id
$(".huga").css("color","red"); //class
$("a img").css("color"...
要素を選んで、処理を行う。
要素を選ぶ→セレクタ
$("#hoge").css("color","red"); //id
$(".huga").css("color","red"); //class
$("a img").css("color"...
要素を選んで、処理を行う。
処理を行う→メソッド
要素を選んで、処理を行う。
処理を行う→メソッド
$("#hoge").css("color","red");
$("#hoge").addClass("mogu");
$("#hoge").fadeOut();
要素を選んで、処理を行う。
処理を行う→メソッド
$("#hoge").css("color","red").addClass("mogu").fadeOut();
要素を選んで、処理を行う。
処理を行う→メソッド
$("#hoge").css("color","red").addClass("mogu").fadeOut();
同じセレクタに対するメソッドは数珠つなぎにできる。
要素を選んで、処理を行う。
処理を行う→メソッド
$("#hoge").css("color","red").addClass("mogu").fadeOut();
同じセレクタに対するメソッドは数珠つなぎにできる。
メソッドチェイン
セレクタやメソッドはまだまだたくさん
jQuery日本語リファレンス
http://semooh.jp/jquery/
実際に書いて動かしてみる
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//処理の内容を書いていく
</scrip...
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(fun...
はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//処理の内容...
Demo1: テーブルをスタイリングする
奇数番目のtrにoddというクラスをつける
$(function(){
});
Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http://www...
Demo1: テーブルをスタイリングする
奇数番目のtrにoddというクラスをつける
$(function(){
$("tr:odd")
});
Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボック...
Demo1: テーブルをスタイリングする
奇数番目のtrにoddというクラスをつける
$(function(){
$("tr:odd").addClass();
});
Code from 少しのコードで実装可能な20のjQuery小技集 | ...
Demo1: テーブルをスタイリングする
奇数番目のtrにoddというクラスをつける
$(function(){
$("tr:odd").addClass("odd");
});
Code from 少しのコードで実装可能な20のjQuery小...
Demo2: リンクをクリックしたらdivを消す
.deleteをクリックしたら.boxを消す
$(".box .delete")
Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http:...
Demo2: リンクをクリックしたらdivを消す
.deleteをクリックしたら.boxを消す
$(".box .delete").click(function(){
//処理を書く
});
Code from 少しのコードで実装可能な20のj...
Demo2: リンクをクリックしたらdivを消す
.deleteをクリックしたら.boxを消す
$(".box .delete").click(function(){
$(".box")
});
Code from 少しのコードで実装可能な20...
Demo2: リンクをクリックしたらdivを消す
.deleteをクリックしたら.boxを消す
$(".box .delete").click(function(){
$(".box").animate({ opacity: "hide" },...
Demo3: ボタンを押してdivを開閉する
.openをクリックしたら.#slideBoxを開閉する
$(".open")
Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http://w...
Demo3: ボタンを押してdivを開閉する
.openをクリックしたら.#slideBoxを開閉する
$(".open").click(function(){
//処理を書く
});
Code from 少しのコードで実装可能な20のjQue...
Demo3: ボタンを押してdivを開閉する
.openをクリックしたら.#slideBoxを開閉する
$(".open").click(function(){
$("#slideBox")
});
Code from 少しのコードで実装可能な...
Demo3: ボタンを押してdivを開閉する
.openをクリックしたら.#slideBoxを開閉する
$(".open").click(function(){
$("#slideBox").slideToggle("slow");
});
C...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box")
Code from jQueryのanimateを使ったアニメーション|WEB Drawer
http://webdrawer...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click();
Code from jQueryのanimateを使ったアニメーション|WEB Drawer
http://...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click( function(){
//処理を書く
});
Code from jQueryのanimateを使ったアニメー...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click( function(){
$(this)
});
Code from jQueryのanimateを使ったアニメー...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click( function(){
$(this).animate({width: '400px'},{duration: ...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click( function(){
$(this).animate({width: '400px'},{duration: ...
Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box").click( function(){
$(this).animate({width: '400px'},{duration: ...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window)
Code from ドットインストール パララックスサイトを作ろう
http://dotinstall.com/lesson...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
//処理を書く
});
Code from ドットインストール パララックスサイトを作...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
});
Code from...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
$('#box1')
})...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
$('#box1').cs...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
$('#box1').cs...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
$('#box1').cs...
Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window).scroll(function(){
var dy = $(this).scrollTop();
$('#box1').cs...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
Code from ドットインストール パララックスサイトを作ろう
http:...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
Demo6: パララックス効果をつくる2
windowをスクロールしたら各#boxのcssを調整する
var pos1 = $('#box1').offset();
var pos2 = $('#box2').offset();
var pos...
おすすめ書籍
Demo Code from
少しのコードで実装可能な20のjQuery小技集 | Webクリエイ
ターボックス
http://www.webcreatorbox.com/tech/jquery-tips20/
jQueryのanimateを使...
ありがとうございました。
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
Upcoming SlideShare
Loading in …5
×

jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会

1,628 views

Published on

2013年9月14日 福岡マークアップ勉強会vol.5
初心者向けjQueryのお話しをしました。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,628
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会

  1. 1. jQueryを自分で書いて アニメーションさせよう 2013年9月14日 マークアップ勉強会
  2. 2. 自己紹介 越水大輔 コシミズダイスケ Twitter @ksmzdsk フリーランスWEBデザイナー
  3. 3. ブログやってます! キリンブログ http://kirinblog.com
  4. 4. ブログやってます! キリンブログ http://kirinblog.com FacebookページでWEB制作に関する情報配信し ています。
  5. 5. 今回の対象者
  6. 6. 今回の対象者 ● HTML、CSSは書ける。
  7. 7. 今回の対象者 ● HTML、CSSは書ける。 ● 動くWEBサイトを作りたい!
  8. 8. 今回の対象者 ● HTML、CSSは書ける。 ● 動くWEBサイトを作りたい! ● jQueryはプラグインを入れるだけ。。。
  9. 9. 今回の対象者 ● HTML、CSSは書ける。 ● 動くWEBサイトを作りたい! ● jQueryはプラグインを入れるだけ。。。 ● 自分でjQueryを書くことに苦手意識がある。
  10. 10. 今回の対象者 ● HTML、CSSは書ける。 ● 動くWEBサイトを作りたい! ● jQueryはプラグインを入れるだけ。。。 ● 自分でjQueryを書くことに苦手意識がある。 jQuery初めの一歩的な内容になっております!
  11. 11. jQueryとは? ● JavaScriptライブラリ
  12. 12. jQueryとは? ● JavaScriptライブラリ ● HTML、CSSがわかれば入りやすい
  13. 13. jQueryとは? ● JavaScriptライブラリ ● HTML、CSSがわかれば入りやすい ● 情報量が豊富
  14. 14. jQueryとは? ● JavaScriptライブラリ ● HTML、CSSがわかれば入りやすい ● 情報量が豊富 ● 軽量
  15. 15. ブラウザごとの挙動の違いを吸収してくれる
  16. 16. ブラウザごとの挙動の違いを吸収してくれる var div = document.getElementById(‘div1’); if(div.addEventListener){ div.addEventListener(‘click’, doSomething, false); } else if(div.attachEvent){ div.attachEvent(‘onclick’, doSomething); } function doSomething(){ alert(‘クリックされました’); }
  17. 17. ブラウザごとの挙動の違いを吸収してくれる var div = document.getElementById(‘div1’); if(div.addEventListener){ div.addEventListener(‘click’, doSomething, false); } else if(div.attachEvent){ div.attachEvent(‘onclick’, doSomething); } function doSomething(){ alert(‘クリックされました’); }
  18. 18. ブラウザごとの挙動の違いを吸収してくれる $(‘#div1’).click(function(){ alert(‘クリックされました’); });
  19. 19. write less, do more.
  20. 20. はじめにすること <script type="text/javascript" src="js/jquery.js"></script>
  21. 21. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> http://jquery.com/ からダウンロード
  22. 22. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> または直リンクを書く。
  23. 23. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> または直リンクを書く。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1. 8.2/jquery.min.js"></script>
  24. 24. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> //処理の内容を書いていく </script>
  25. 25. 基本形: Aを選択してBを行う
  26. 26. 基本形: Aを選択してBを行う divにcssでcolor:redの設定をする。
  27. 27. 基本形: Aを選択してBを行う divにcssでcolor:redの設定をする。 $("div")
  28. 28. 基本形: Aを選択してBを行う divにcssでcolor:redの設定をする。 $("div").css();
  29. 29. 基本形: Aを選択してBを行う divにcssでcolor:redの設定をする。 $("div").css("color","red");
  30. 30. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。
  31. 31. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。 $("#btn")
  32. 32. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。 $("#btn").click();
  33. 33. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。 $("#btn").click(処理内容);
  34. 34. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。 $("#btn").click(処理内容); + function(){ $("div").css("color","red"); }
  35. 35. 基本形2: AをBをしたとき、        Cを選択してDを行う #btnをクリックしたとき、divにcssでcolor:redの設定をする。 $("#btn").click(処理内容); + function(){ $("div").css("color","red"); } $("#btn").click( function(){ $("div").css("color","red"); } );
  36. 36. 要素を選んで、処理を行う。
  37. 37. 要素を選んで、処理を行う。 要素を選ぶ→セレクタ
  38. 38. 要素を選んで、処理を行う。 要素を選ぶ→セレクタ $("#hoge").css("color","red"); //id
  39. 39. 要素を選んで、処理を行う。 要素を選ぶ→セレクタ $("#hoge").css("color","red"); //id $(".huga").css("color","red"); //class
  40. 40. 要素を選んで、処理を行う。 要素を選ぶ→セレクタ $("#hoge").css("color","red"); //id $(".huga").css("color","red"); //class $("a img").css("color","red"); //要素
  41. 41. 要素を選んで、処理を行う。 要素を選ぶ→セレクタ $("#hoge").css("color","red"); //id $(".huga").css("color","red"); //class $("a img").css("color","red"); //要素 $("div, .huga").css("color","red"); //複数
  42. 42. 要素を選んで、処理を行う。 処理を行う→メソッド
  43. 43. 要素を選んで、処理を行う。 処理を行う→メソッド $("#hoge").css("color","red"); $("#hoge").addClass("mogu"); $("#hoge").fadeOut();
  44. 44. 要素を選んで、処理を行う。 処理を行う→メソッド $("#hoge").css("color","red").addClass("mogu").fadeOut();
  45. 45. 要素を選んで、処理を行う。 処理を行う→メソッド $("#hoge").css("color","red").addClass("mogu").fadeOut(); 同じセレクタに対するメソッドは数珠つなぎにできる。
  46. 46. 要素を選んで、処理を行う。 処理を行う→メソッド $("#hoge").css("color","red").addClass("mogu").fadeOut(); 同じセレクタに対するメソッドは数珠つなぎにできる。 メソッドチェイン
  47. 47. セレクタやメソッドはまだまだたくさん jQuery日本語リファレンス http://semooh.jp/jquery/
  48. 48. 実際に書いて動かしてみる
  49. 49. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> //処理の内容を書いていく </script>
  50. 50. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //処理の内容を書いていく }); </script>
  51. 51. はじめにすること <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //処理の内容を書いていく }); </script>
  52. 52. Demo1: テーブルをスタイリングする 奇数番目のtrにoddというクラスをつける $(function(){ }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  53. 53. Demo1: テーブルをスタイリングする 奇数番目のtrにoddというクラスをつける $(function(){ $("tr:odd") }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  54. 54. Demo1: テーブルをスタイリングする 奇数番目のtrにoddというクラスをつける $(function(){ $("tr:odd").addClass(); }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  55. 55. Demo1: テーブルをスタイリングする 奇数番目のtrにoddというクラスをつける $(function(){ $("tr:odd").addClass("odd"); }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  56. 56. Demo2: リンクをクリックしたらdivを消す .deleteをクリックしたら.boxを消す $(".box .delete") Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  57. 57. Demo2: リンクをクリックしたらdivを消す .deleteをクリックしたら.boxを消す $(".box .delete").click(function(){ //処理を書く }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  58. 58. Demo2: リンクをクリックしたらdivを消す .deleteをクリックしたら.boxを消す $(".box .delete").click(function(){ $(".box") }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  59. 59. Demo2: リンクをクリックしたらdivを消す .deleteをクリックしたら.boxを消す $(".box .delete").click(function(){ $(".box").animate({ opacity: "hide" }, "slow"); }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  60. 60. Demo3: ボタンを押してdivを開閉する .openをクリックしたら.#slideBoxを開閉する $(".open") Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  61. 61. Demo3: ボタンを押してdivを開閉する .openをクリックしたら.#slideBoxを開閉する $(".open").click(function(){ //処理を書く }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  62. 62. Demo3: ボタンを押してdivを開閉する .openをクリックしたら.#slideBoxを開閉する $(".open").click(function(){ $("#slideBox") }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  63. 63. Demo3: ボタンを押してdivを開閉する .openをクリックしたら.#slideBoxを開閉する $(".open").click(function(){ $("#slideBox").slideToggle("slow"); }); Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス http://www.webcreatorbox.com/tech/jquery-tips20/
  64. 64. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box") Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  65. 65. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click(); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  66. 66. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click( function(){ //処理を書く }); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  67. 67. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click( function(){ $(this) }); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  68. 68. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click( function(){ $(this).animate({width: '400px'},{duration: 1500}) }); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  69. 69. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click( function(){ $(this).animate({width: '400px'},{duration: 1500}) .animate({height: '50px'},{duration: 500}) }); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  70. 70. Demo4: 四角形をアニメーションさせる #boxをクリックしたら#boxがアニメーションする $("#box").click( function(){ $(this).animate({width: '400px'},{duration: 1500}) .animate({height: '50px'},{duration: 500}) .animate({width: '50px'},{duration: 500}) }); Code from jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html
  71. 71. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window) Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  72. 72. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ //処理を書く }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  73. 73. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  74. 74. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); $('#box1') }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  75. 75. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); $('#box1').css('top', 10 + dy / 2); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  76. 76. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); $('#box1').css('top', 10 + dy / 2); $('#box2') }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  77. 77. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); $('#box1').css('top', 10 + dy / 2); $('#box2').css('top', 10 + dy / 5); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  78. 78. Demo5: パララックス効果をつくる windowをスクロールしたら各#boxのcssを調整する $(window).scroll(function(){ var dy = $(this).scrollTop(); $('#box1').css('top', 10 + dy / 2); $('#box2').css('top', 10 + dy / 5); $('#box3').css('top', 10 + dy / 7); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  79. 79. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  80. 80. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  81. 81. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window) Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  82. 82. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { //処理を書く }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  83. 83. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  84. 84. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); $('#box1') }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  85. 85. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); $('#box1').css('top', pos1.top + dy / 2); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  86. 86. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); $('#box1').css('top', pos1.top + dy / 2); $('#box1').css('left', pos1.left + dy / 8); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  87. 87. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); $('#box1').css('top', pos1.top + dy / 2); $('#box1').css('left', pos1.left + dy / 8); $('#box1').css('width', 40 + dy * 0.2); }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  88. 88. Demo6: パララックス効果をつくる2 windowをスクロールしたら各#boxのcssを調整する var pos1 = $('#box1').offset(); var pos2 = $('#box2').offset(); var pos3 = $('#box3').offset(); $(window).scroll(function() { var dy = $(this).scrollTop(); $('#box1').css('top', pos1.top + dy / 2); $('#box1').css('left', pos1.left + dy / 8); $('#box1').css('width', 40 + dy * 0.2); ….. }); Code from ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  89. 89. おすすめ書籍
  90. 90. Demo Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイ ターボックス http://www.webcreatorbox.com/tech/jquery-tips20/ jQueryのanimateを使ったアニメーション|WEB Drawer http://webdrawer.net/javascript/jqueryanimate.html ドットインストール パララックスサイトを作ろう http://dotinstall.com/lessons/parallax_html
  91. 91. ありがとうございました。

×