テキストアニメーション/text-anime-test/index11.html
css/common3.css
※自社のトップページでも動いているが
keyframesの名前とanimation-nameの名前はトップページ用として別の名前をつけた。
CSS
.bg-slider {
width: 99.1vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items:flex-end;*/
justify-content: center;
position: relative;
}
アニメーションの位置
背景要素をrelativeにして アニメーションの位置はabsoluteにしてtopやleftの%で位置を設定
/****************************************
アニメーション スクロール
/***************************************/
.text01 {
position: absolute;
top: 5%;
left:20%;
animation-name:animation1;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.text02 {
position: absolute;
top: 5%;
right:20%;
animation-name:animation2;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.text03 {
position: absolute;
top: 5%;
animation-name:animation3;
animation-duration: 25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
１枚５秒の背景画像を5枚= 5 x 5 = 25秒
25秒が100％として 5枚で割ると 100÷5＝20% が1枚の長さのＭＡＸパーセンテージ
１枚目、３枚目、5枚目にアニメーションをつけるために 20%づつ加算。
opacityで非表示から表示部分をプラスでパーセント別途追加。
各アニメーションは25秒の中で何パーセントで表示され、非表示させるかで調整。
ループさせる。
でも%は実際にタイミングがちょっと違うので見ながら微調整した。
@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
5% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
26% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation2 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
41% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
45% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
66% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation3 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
81% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
85% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
101% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
102% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
スマホなどの調整として
/*****TOP スマホ縦****/
@media (max-width: 479px){
.bg-slider {
width: 100%;
height: 60vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items: flex-end; */
justify-content: space-evenly;
}
.text01 img{
height: 150px;
width: auto;
}
.text02 img{
height: 150px;
width: auto;
}
.text03 img{
height: 150px;
width: auto;
}
}
html
<script src=”js/jquery-1.11.3.min.js”></script>
<script src=”js/jquery.bgswitcher.js”></script>
<script>
jQuery(function($) {
$(‘.bg-slider’).bgSwitcher({
images: [‘image/top/main1.jpg’,’image/top/main2.jpg’,’image/top/main4.jpg’,’image/top/main5.jpg’,’image/top/main6.jpg’], // 切り替える背景画像を指定
interval: 5000, // 背景画像を切り替える間隔を指定 3000=3秒
loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する false=しない
effect: “fade”, // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 500, // エフェクトの時間を指定します。
easing: “swing” // エフェクトのイージングをlinear,swingから指定
});
});
</script>
<div class=”container-fluid px-0 bg-slider ” >
<div class=”text01“><img src=”image/item5.png” class=”img-fluid” alt=””/></div>
<div class=”text02“><img src=”image/item6.png” class=”img-fluid” alt=””/></div>
<div class=”text03“><img src=”image/item7.png” class=”img-fluid” alt=””/></div>
</div>