まめわざでは、読み込み時のフェードイン効果や画像のスライド表示など、幾つかのアクション（アニメーション）を以前から用意しています。
今回、新たに3種類のアクションを追加しました。
動きのあるホームページが簡単に作れます。
画面をスクロールした際に、コンテンツをスライドや回転させることで、コンテンツの登場を彩るアクションです。
スマホでは快適な動作を優先させるために、アクションは読み込み時のみ実行され、スクロールに応じては実行されません。
あらゆるブロックの「装飾」で設定が可能です。
装飾ウィンドウの「アクション」タブを押して、アクションを選択するだけです。
ブロックのグループの装飾では、編集タブ内に選択欄があります。
装飾ウィンドウのアクションタブ本アクションには、以前のブログ記事「スクロールに応じてテキストを動作（アニメーション）させるなるべく軽い方法」を利用しています。
ページを移動した際に、すべてのホームページでフェードインのアクションが実行されていましたが、このアクションを選択できるようになりました。
アクションは最大で2秒とストレスにならない短時間で実行されます。
訪問者の年齢や性別によっては離脱率を上げる結果にも繋がりかねないため、想定する訪問者層に応じてアクションを選択することをオススメします。
スマホでは快適な動作を優先させるために、アクションは読み込み時のみ実行され、スクロールに応じては実行されません。
デザインの編集ページで、「もっとデザイン」タブにある「ページ移動時のアクション」で選択します。
このアクションはデザイン毎に設定が可能なので、複数のデザインがある場合は、それぞれデザインに合ったアクションを設定できます。
本アクションはすべてCSSのanimationで実装しています。
animationはbody:before/body:afterに設置しています。
keyframes内でtransformやwidth/heightを変化させることで動きを表現しています。
複数のバーはlinear-gradientで表現しており、この場合はbackground-sizeやbackground-positionで動きを表現しています。
まめわざの画像ブロックは、自動で拡大の可否を判定し、拡大できる場合はクリックが可能になります。
拡大が可能な画像にマウスを当てた（マウスオーバーした）際、画像が少し大きくなったり、微動するアクションです。
スマホではマウスオーバーの概念がないため、アクションは実行されません。
装飾メニューで設定する「画像の縦横比・形」が「元のサイズ」かそれ以外かによってアクションが変わります。
以下に「元のサイズ」と「丸」のサンプルを用意しました。
設定は不要で、すべての拡大可能な画像が対象です。
次の2つのケースでは画像が拡大対象外となるため、アクションは実行されません。
本アクションはCSSのtransitionで実装しています。
次のようなシンプルなコードです。
@media only screen and (min-width: 768px) {
img {
-webkit-transition: .3s;
transition: .3s;
}
img:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
}
background-imageで画像を設定しているspan.imgに対して、
@media only screen and (min-width: 768px) {
span.img {
-webkit-transition: .3s;
transition: .3s;
}
span.img:hover {
background-position: left top !important;
}
}
メディアクエリにより、PC向けに定義しています。