< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
CSSによるスムーズモーションの実現
Hover時
解説
用途・理由・概要
animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。
ここでは、hover時(要素の上にマウスポインタを重ねたとき)に演出を行う方法を記載します。
ここでは、hover時(要素の上にマウスポインタを重ねたとき)に演出を行う方法を記載します。
hover時に適用されるスタイル
hover時(要素の上にマウスポインタを重ねたとき)に、
その要素に適用されるスタイルはCSSで次のように設定できます。
その要素に適用されるスタイルはCSSで次のように設定できます。
.hover02:hover {
background: #0099bb;
}
※ 対象とする id/class に :hover をつける事で、hover時に追加適用するスタイルを設定できます。
ゆっくり変化させる設定
CSS設定が変更されたときの変化を漸次的(だんだんと)にするには、
下記のようにCSS設定に transition を追加します。
下記のようにCSS設定に transition を追加します。
.hover02 {
-webkit-transition: all 2.0s ease;
transition: all 2.0s ease;
}
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>CSSによるスムーズモーションの実現(Hover時)</title>
<style>
.hover02 {
-webkit-transition: all 2.0s ease;
transition: all 2.0s ease;
}
.hover02:hover {
background: #0099bb;
}
</style>
</head>
<body>
<div class="hover02">Hoverすると、背景色がゆっくり変化します。</div>
</body>
</html>
クラスの追加・削除
解説
用途・理由・概要
animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。
ここでは、hover時以外に演出を行う方法を記載します。
ここでは、hover時以外に演出を行う方法を記載します。
クラスの追加・削除
hover時は自動で :hover のスタイルが適用されることで、スタイルが変化しましたが、
任意のタイミングで演出を行う場合は、Javascriptで class を追加・削除することにより
スタイルを変化させます。
クラスの追加は次のようなコードになります。
クラスの削除は次のようなコードになります。
任意のタイミングで演出を行う場合は、Javascriptで class を追加・削除することにより
スタイルを変化させます。
クラスの追加は次のようなコードになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('.block_design').addClass('ready');
</script>
※ block_design クラスを含む要素に ready クラスを追加しています。
クラスの削除は次のようなコードになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('.block_design').removeClass('ready');
</script>
※ block_design クラスを含む要素から ready クラスを削除しています。
ゆっくり変化させる設定
ready クラスの追加・削除によりスタイルを変化させる場合、次のようにスタイルを設定します。
.block_design {
background: #00ffcc;
-webkit-transition: all 2.0s ease;
transition: all 2.0s ease;
}
.block_design.ready {
background: #cccccc;
}
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>CSSによるスムーズモーションの実現(クラスの追加・削除)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.block_design {
background: #00ffcc;
-webkit-transition: all 2.0s ease;
transition: all 2.0s ease;
}
.block_design.ready {
background: #cccccc;
}
</style>
</head>
<body>
<div class="block_design ready">ボタンクリックで背景が変化します。</div><br/>
<button id="button01">変化スイッチ</button>
<script>
$(document).ready(function() {
$('#button01').click(function() {
if ( $('.block_design').hasClass('ready') ) {
$('.block_design').removeClass('ready');
} else {
$('.block_design').addClass('ready');
}
});
});
</script>
</body>
</html>
よく使う例(ボタンhover)
解説
用途・理由・概要
要素をhover(要素上にマウスポインタを重ねたとき)した時、
その要素が押せる事(ボタンである事)を示すため、要素を半透過させます。
その要素が押せる事(ボタンである事)を示すため、要素を半透過させます。
汎用クラス
汎用的に使える(個別にクラスを準備しなくても、共通して同じクラスを使用できる)ように、
次のようなクラスを設定します。
マウスポインタの形を変える設定を追加して、次のようにしても良いかもしれません。
次のようなクラスを設定します。
.hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.hover:hover {
opacity: 0.6;
}
マウスポインタの形を変える設定を追加して、次のようにしても良いかもしれません。
.hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
cursor: pointer;
}
.hover:hover {
opacity: 0.6;
}
※ アンカー(a)を使用せずに、onclick や $(class_name).click 等を利用する場合は、マウスポインタが自動で変化しないため。
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
<title>CSSによるスムーズモーションの実現(よく使う例:ボタンhover)</title>
<style>
.hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.hover:hover {
opacity: 0.6;
}
.button_design {
display: inline-block;
width: 200px;
padding: 20px;
text-align: center;
color: #ffffff;
font-size: 20px;
cursor: pointer;
}
.button_design.type01 { background: #0000ff; }
.button_design.type02 { background: #00ff00; }
.button_design.type03 { background: #ff0000; }
</style>
</head>
<body>
<div class="button_design type01 hover">ボタン1</div>
<div class="button_design type02 hover">ボタン2</div>
<div class="button_design type03 hover">ボタン3</div>
</body>
</html>