CSS3とjqueryを使ってクリックされた所を起点に波紋アニメーションさせる

2014年05月24日

-

カテゴリー：: CSS

5月ですね。
今年はセルインメイではないんですかね(滝汗

今回の記事の内容とは違うのですが、先日、お仕事でCSSを使い波紋を描くようなアニメーションをさせる必要があったので、いろいろと応用できるのではないかと思い、メモ程度にコードなどを残したいと思います。

以下CSSです。

#circle {
	-webkit-animation-name: circle;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0s;

	-moz-animation-name: circle;
	-moz-animation-duration: 0.8s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0s;

	animation-name: circle;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-delay: 0s;

	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;

	border: 1px solid #ff0000;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	border-radius: 90px;
	box-shadow: 0 0 5px #333333;
	-moz-box-shadow: 0 0 5px #333333;
	-webkit-box-shadow: 0 0 5px #333333;

	position: absolute;
}

@keyframes circle {
	0% {
		margin: 0;
		width: 0px;
		height: 0px;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
	100% {
		margin: -78px 0 0 -78px;
		width: 156px;
		height: 156px;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}
}

@-webkit-keyframes circle {
	0% {
		margin: 0;
		width: 0px;
		height: 0px;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
	100% {
		margin: -78px 0 0 -78px;
		width: 156px;
		height: 156px;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

#circle {

-webkit-animation-name: circle;

-webkit-animation-duration: 0.8s;

-webkit-animation-iteration-count: 1;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0s;

-moz-animation-name: circle;

-moz-animation-duration: 0.8s;

-moz-animation-iteration-count: 1;

-moz-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;

-moz-animation-delay: 0s;

animation-name: circle;

animation-duration: 0.8s;

animation-iteration-count: 1;

animation-timing-function: ease-in-out;

animation-direction: normal;

animation-delay: 0s;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

border: 1px solid #ff0000;

-webkit-border-radius: 90px;

-moz-border-radius: 90px;

border-radius: 90px;

box-shadow: 0 0 5px #333333;

-moz-box-shadow: 0 0 5px #333333;

-webkit-box-shadow: 0 0 5px #333333;

position: absolute;

}

@keyframes circle {

0% {

margin: 0;

width: 0px;

height: 0px;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

}

100% {

margin: -78px 0 0 -78px;

width: 156px;

height: 156px;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

}

@-webkit-keyframes circle {

0% {

margin: 0;

width: 0px;

height: 0px;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

}

100% {

margin: -78px 0 0 -78px;

width: 156px;

height: 156px;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

}

念のため、ベンダープリフィックス入れてるんで、かなりコード自体は長く感じてしまうかもしれません。

#circleがアニメーションを適用させるためのボックスとなりborder、border-radiusの設定で赤いラインの入った丸を描きます。
box-shadowはおまけです。

opacityが0になっているのは、アニメーション終了時に非表示の状態にするためです。※他の方法もあるとは思います。

animation-******とついているのがアニメーションに関する設定なのですが、circleという名前のアニメーションを適用するように設定し、あとは、アニメーションさせる回数や速度、イージングの設定などを行っています。

@keyframes circleの中がそのアニメーションの内容で縦横0pxの円が0.8sかけて156pxに大きくなりながら、opacityが1から0に変化していきます。

続いてjqueryの記述です。

$(function(){

	$("#wrapper").append("<div id='circle'></div>");
	$("#circle").hide();

	$("#wrapper").click(function(e){

		var px=e.pageX;
		var py=e.pageY;

		$("#circle").hide();

		$("#circle").css("top",py).css("left",px).show();

	});

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(function(){

$("#wrapper").append("<div id='circle'></div>");

$("#circle").hide();

$("#wrapper").click(function(e){

var px=e.pageX;

var py=e.pageY;

$("#circle").hide();

$("#circle").css("top",py).css("left",px).show();

});

})

上記では、#wrapper内がクリックされた時に処理を行っています。

処理の内容はまずはじめに#wrapperの中に波紋アニメーション用の#circleを挿入し、非表示にしています。

そして、#wrapper内がクリックされたら、クリックされた位置を取得し、#circleのtopとleftにその取得した座標を挿入し、表示させる。
主要なブラウザでは、動作の確認ができたのですが、IEだと比較的新しいバージョンでも動作しないようです。

もっとうまい記述方法もあるとは思いますが、アレンジしていただければと思いますｍ(。。)ｍ

サンプルはこちら

商品画像を上下中央寄せにした時のCSSテクニック

2013年08月19日

-

カテゴリー：: CSS

商品一覧ページなどで、商品のサムネイル画像が一定のサイズじゃない場合に、上下左右中央寄せするCSSテクニックのご紹介です。
※縦横のサイズに上限あり。

divで構成している場合、左右の中央寄せは簡易的にできるんですが、上下中央寄せはひと工夫必要になります。
tableで回避するなんてこともできるんですが、相当不細工なHTMLになるため、できればdiv構成にしたいそんな時は以下の手法を使います。

まず、HTML（クラス名は適当です）

<div class="image_wrap"><div class="wrap_middle">
	～　サムネイル画像用のタグ　～
</div></div>

1

2

3

～　サムネイル画像用のタグ　～

</div></div>

続いて、CSS

.image_wrap {
	width: 450px; /* 任意のサイズ */
	height: 450px; /* 任意のサイズ */
	border: 1px solid #000000; /* わかりやすくするためボーダーをつけてます */
	display: table;
}
* html .image_wrap {
	position: relative;
}
*+html .image_wrap {
	position: relative;
}

.image_wrap .wrap_middle {
	display: table-cell;
	vertical-align: middle;
}
* html .image_wrap .wrap_middle {
	position: absolute;
	top: 50%;
}
*+html .image_wrap .wrap_middle {
	position: absolute;
	top: 50%;
}

.image_wrap img {
	margin: 0 auto;
	display: block;
}
* html .image_wrap img {
	position: relative;
	top: -50%;
}
*+html .image_wrap img {
	position: relative;
	top: -50%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

.image_wrap {

width: 450px; /* 任意のサイズ */

height: 450px; /* 任意のサイズ */

border: 1px solid #000000; /* わかりやすくするためボーダーをつけてます */

display: table;

}

* html .image_wrap {

position: relative;

}

*+html .image_wrap {

position: relative;

}

.image_wrap .wrap_middle {

display: table-cell;

vertical-align: middle;

}

* html .image_wrap .wrap_middle {

position: absolute;

top: 50%;

}

*+html .image_wrap .wrap_middle {

position: absolute;

top: 50%;

}

.image_wrap img {

margin: 0 auto;

display: block;

}

* html .image_wrap img {

position: relative;

top: -50%;

}

*+html .image_wrap img {

position: relative;

top: -50%;

}

左右中央寄せであれば、少ないコードの記述で対応できるのですが、上下の中央寄せが加わるとけっこうコードが面倒になるんですよね（汗

cssのキーフレームアニメーションと使ってみる

2013年08月02日

-

カテゴリー：: CSS

まだ、対応ブラウザの事など考えると利用頻度は少ないのですが、CSSによるキーフレームアニメーションを試してみました。

まずHTMLです。

<div class="ball_wrap">
	<img alt="" src="http://sample.joyart.info/sample003/ball.jpg" />
</div>

1

2

3

</div>

上記のball.jpgをキーフレームアニメーションで動かします。
次にアニメーションをさせるimg要素のCSSを記述。

.ball_wrap img {
	-webkit-animation-name: anim;
	animation-name: anim;

	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-webkit-animation-duration: 4s;
	animation-duration: 4s;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

.ball_wrap img {

-webkit-animation-name: anim;

animation-name: anim;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-duration: 4s;

animation-duration: 4s;

}

animation-name: キーフレーム名でキーフレームを設定。
animation-timing-functionでアニメーションの進行速度の割合を設定。※linear、ease-in、ease-out、ease-in-out等
animation-iteration-countでアニメーションさせる回数の設定。ここでは、infiniteを指定し、無制限に行っています。
animation-durationで1回のアニメーションにかかる時間の設定。4s=4秒。

次に、キーフレーム本体のCSSの記述です。

@keyframes anim {
	0% {
		transform: translate(0px, 0px);
	}
	25% {
		transform: translate(290px, 0px);
	}
	50% {
		transform: translate(290px, 170px);
	}
	75% {
		transform: translate(0px, 170px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@-webkit-keyframes anim {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}
	25% {
		-webkit-transform: translate(290px, 0px);
		transform: translate(290px, 0px);
	}
	50% {
		-webkit-transform: translate(290px, 170px);
		transform: translate(290px, 170px);
	}
	75% {
		-webkit-transform: translate(0px, 170px);
		transform: translate(0px, 170px);
	}
	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

@keyframes anim {

0% {

transform: translate(0px, 0px);

}

25% {

transform: translate(290px, 0px);

}

50% {

transform: translate(290px, 170px);

}

75% {

transform: translate(0px, 170px);

}

100% {

transform: translate(0px, 0px);

}

@-webkit-keyframes anim {

0% {

-webkit-transform: translate(0px, 0px);

transform: translate(0px, 0px);

}

25% {

-webkit-transform: translate(290px, 0px);

transform: translate(290px, 0px);

}

50% {

-webkit-transform: translate(290px, 170px);

transform: translate(290px, 170px);

}

75% {

-webkit-transform: translate(0px, 170px);

transform: translate(0px, 170px);

}

100% {

-webkit-transform: translate(0px, 0px);

transform: translate(0px, 0px);

}

@keyframes キーフレーム名 {　アニメーション処理　}のように記述を行います。
上記記述では@-webkit-keyframes キーフレーム名 {　アニメーション処理　}とベンダープリフィックスをつけたキーフレームも記述していますが、iphoneでの動作を念頭に入れた記述を行っています。

アニメーションの内容はtransform: translate(X座標,Y座標)で座標を動かし、決められた枠内の移動を繰り返す内容です。

サンプルはこちら