Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,686 views

Published on

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

Published in: Technology
  • Be the first to comment

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. ありがとうございました。

×