Googleサイト使い方 / パスワード認証 / 掲示板 / アンカーリンク / サイト登録 / ログインフォーム / アナリティクス / SEO / 活用法

画像アニメーション　

画像アニメーション２へ >>　

テンプレートもご参照ください

できるだけ最初のコードからご覧ください

画像はすべてGoogleフォトにアップしたものを使っています。

NO.1

NO.1 コード

<style>

.picture {

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczP1Iy_pmI3ZuapwwNjaWTK96qAX2DPfDNAq6r-QDBzL3hcA3uC4KLKwqTOXJQUxEd_4UnXQcsNMzhYneRjfKncu6NjfOs1uXPy1xtvZjr1IbmrRPuwvlWb0NEwtewFN3gjLgS83nzpgKKxUWIy3Kww46g=w600-h375-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height: 100%;

background-size: 100% 100%;

border-radius: 0px; /* 画像の角の丸み */

animation-name: fadein;

animation-duration: 4s; /* 画像の表示時間 */

animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */

animation-timing-function: linear; /* 下で解説 */

animation-iteration-count: 1; /* 再生回数、infiniteは無制限 */

animation-direction: normal; /* 下で解説 */

}

@keyframes fadein {

from {

opacity: 0; /* 画像の透明度、通常は0から1 */

/* 画像の拡大率、0.8から1.0の設定にしていますが、色々変えてみてください */

transform: scale(0.6); /* 初期画像の縮小率 */

}

to {

opacity: １;

transform: scale(1.0);

}

</style>

色々変えて変化をお楽しみください。

[animation-timing-function]の説明

linear → 開始から終了まで一定に変化

ease → 開始時と終了時が緩やかに変化（初期値）

ease-in → 開始時は緩やかに変化し、終了に近づくと早く変化

ease-out → 開始時は早く変化し、終了時は緩やかに変化

ease-in-out → 開始時と終了時共にかなり緩やかに変化

[animation-direction]の説明

normal → 通常の再生

reverse → 逆方向再生

alternate → 通常・逆方向を交互に再生

NO.2

NO.2 コード

</div>

<style>

.img-box {

position: relative;

max-width: 100%;

height: 100%;

overflow: hidden;

}

.img1, .img2, .img3 {

width: 100%;

height: 100%;

position: absolute;

top: 0;

background: center center no-repeat;

animation-name: fadein;

animation-duration: 9s; /* 画像枚数✕3s（1枚あたりの表示時間） */

animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */

animation-timing-function: linear;

animation-iteration-count: infinite; /* 再生回数、infiniteは無制限 */

z-index: 0;

opacity: 0;

background-size: 100% 100%;

}

.img1 {

background-image: url(https://lh3.googleusercontent.com/pw/AP1GczMeM8NoWCwKDdYofIO646jBa8upNacwyJuI2KjFe5j9rUaN9Us231PxcvktqXfS8BUJDoRwj-LG04XdhVpRUHtaaqakquCEYK2tg7B7cE8bT7n4QnoHjw8InaGFGPWuk7JcNu_zIykektxrG8ie8zYtlg=w600-h375-s-no-gm?authuser=0);

}

.img2 {

background-image: url(https://lh3.googleusercontent.com/pw/AP1GczNcaauqfp-7BN3I-ufQgflBEHvotk9mMzMR8zNVDHoX6XD2oMgwWNLImxnJKm42GHbIsCi1RKWpyJKPCmH5-jXmBDbHnihQPj6_1wbbaNZxYYjTLVFH0LyN9JTf9Vko121Xo7kLwtHjfrYepz-tCHUpGg=w600-h375-s-no-gm?authuser=0);

animation-delay: 6s;　//（画像枚数−１）✕3s

}

.img3 {

background-image: url(https://lh3.googleusercontent.com/pw/AP1GczNjzAKQj7K6TjQLcpqx-xLNkqVaCrLvq1xU3Dvkj3Ftu-DvEGosW0mYor6X6mI0sM6qH63cAoX3rCXEB1CEDoEM5kArqYpHtFo1K18nBW3gerVqS91oL7sRydgjLx5vt9rNUmOuiJW17vyUlRCsl6hcjw=w600-h375-s-no-gm?authuser=0);

animation-delay: 3s;//（画像枚数−２）✕3s

}

@keyframes fadein {

0% {

opacity: 1;

}

50% {

opacity: 1;

}

60% {

opacity: 0;

transform: scale(1.0);

z-index: 10;

}

100% {

opacity: 0;

transform: scale(1.2);

}

</style>

NO.3（ slick slider ）

▼ 両スライダーとも、縦方向のスライド、フェードでのスライドが可能です。

NO.3 コード

滑らかな設定にしています

画像クリックで自動再生が停止、余白クリックで再開

矢印クリック後の自動再生再開は、余白をクリック

スライダーの画像上に文字を入れるコードについては、「テンプレート」の2番目（レストラン）をご覧ください

<style>

.slider {

margin: auto;

display: block;

width: 88%;

max-width: 100%;

height: 100%;

top: 0;

background: center center no-repeat;

background-size: 100% 100%;

}

.slick-prev:before, .slick-next:before {

color: black; /*矢印の色、デフォルトは白*/

opacity: 0.6;/*透明度*/

}

</style>

</div>

$(document).on('ready', function() {

$(".slider").slick({

autoplay: true, //スライダーの自動再生の可否（trueまたはfalse）

autoplaySpeed: 0, //スライダーの自動再生時の待ち時間（ミリ秒）

speed: 5000, //フェードのスピード

arrows: true, //スライドを切り替える矢印（trueまたはfalse）

infinite: true, //スライドのループ（trueまたはfalse）

vertical: false, //縦方向のスライド（trueまたはfalse）

fade: false, //フェードインアウト（vertical: trueとは併用不可）（trueまたはfalse）

slidesToShow: 2, //スライダーの表示数

slidesToScroll: 1, //一度にスライドする数

cssEase: 'linear' //動きの加速度デフォルトはeaseです

});

</script>

NO.4（ bxSlider ）

NO.4 コード

<style>

.slider img {

margin: auto;

display: block;

width: 100%;

max-width: 100%;

height: 60vw; /* 画像の高さ（単位はVW） */

top: 0;

background: center center no-repeat;

background-size: 100% 100%;

}

</style>

</div>

$(document).ready(function(){

$('.slider').bxSlider({

auto: true, //スライダーの自動再生の可否（trueまたはfalse）

infiniteLoop: true, //スライドのループ可否

pause: 5000, //画像の表示時間（ミリ秒）

speed: 2000, //次のスライドに移行するまでの時間（ミリ秒）、長く設定すると「ふわっとなります」

mode: 'horizontal', //’horizontal’, ‘vertical’, ‘fade’ の3種類から選択

});

</script>

NO.5

NO.5 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

animation: uncover 4s cubic-bezier(0.4, 0, 0.2, 1); /* アンカバーする時間 */

animation-iteration-count:1; /* 繰り返し回数 */

}

@keyframes uncover {

0% {

clip-path: circle(0 at 50% 50%);

-webkit-clip-path: circle(0 at 50% 50%);

}

100% {

clip-path: circle(100% at 50% 50%);

-webkit-clip-path: circle(100% at 50% 50%);

}

</style>

▼ アンカバーの方向反転は、コードの中で解説しています。

NO.6

NO.6 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

overflow: hidden;

position: relative;

}

.uncover::before {

animation: uncover 4s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* アンカバーする時間 */

background: #f8fafa; /* カバーの色 */

content: '';

inset: 0;

pointer-events: none;

position: absolute;

z-index: 1;

animation-iteration-count:1; /* 繰り返し回数 */

opacity: 1; /* カバーの透明度 */

}

@keyframes uncover {

100% {

transform: translateX(100%); /* -100にすれば右からアンカバーします */

}

</style>

NO.7

NO.7 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

overflow: hidden;

position: relative;

}

.uncover::before {

animation: uncover 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

background: #f8fafa;

content: '';

inset: 0;

pointer-events: none;

position: absolute;

z-index: 1;

animation-iteration-count:1;

opacity: 0.7;

}

@keyframes uncover {

100% {

transform: translateY(100%); /* -100にすれば下からアンカバーします */

}

</style>

NO.8

NO.8 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

overflow: hidden;

position: relative;

}

.uncover::before,

.uncover::after {

animation: 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

background: #3d8643;

content: '';

pointer-events: none;

position: absolute;

z-index: 1;

animation-iteration-count:1;

opacity: 0.7;

}

.uncover::before {

animation-name: uncover-before;

inset: 0 0 50%;

}

.uncover::after {

animation-name: uncover-after;

inset: 50% 0 0;

}

@keyframes uncover-before {

100% {

transform: translateX(100%);

}

@keyframes uncover-after {

100% {

transform: translateX(-100%);

}

</style>

NO.9

NO.9 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

overflow: hidden;

position: relative;

}

.uncover::before,

.uncover::after {

animation: 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

background: #3d8643;

content: '';

pointer-events: none;

position: absolute;

z-index: 1;

animation-iteration-count:1;

opacity: 1;

}

.uncover::before {

animation-name: uncover-before;

inset: 0 50% 0 0;

}

.uncover::after {

animation-name: uncover-after;

inset: 0 0 0 50%;

}

@keyframes uncover-before {

100% {

transform: translateY(100%);

}

@keyframes uncover-after {

100% {

transform: translateY(-100%);

}

</style>

NO.10

NO.10 コード

<style>

.picture{

background-image:url(https://lh3.googleusercontent.com/pw/AP1GczOroJPr2FJ2uLW9QACQ2tdlboqv40qtnwRmgEZXw4v1nvMCDYsdwM50wScOL7qj5EZx6Z2KoYbeiX4M66cPQwP3S0pvz0Bo3BIwjACu9QDko2RuoNoLmZahB0AR-pKdjnlcGQukms-tGDkytfMtaf8Rjg=w600-h518-s-no-gm?authuser=0);

background-repeat: no-repeat;

max-width: 100%;

height:100%;

background-size: 100% 100%;

border-radius: 6px;

}

.uncover {

overflow: hidden;

position: relative;

}

.uncover::before,

.uncover::after {

position: absolute;

animation: 3.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;

animation-timing-function: ease-in;

background: #160108;

content: '';

pointer-events: none;

animation-iteration-count:infinite;

z-index: 1;

}

.uncover::before {

animation-name: uncover-before;

inset: 0 50% 0 0;

}

.uncover::after {

animation-name: uncover-after;

inset: 0 0 0 50%;

}

@keyframes uncover-before {

100% {

transform: translateX(-100%);

opacity: 0;

}

@keyframes uncover-after {

100% {

transform: translateX(100%);

opacity: 0;

}

</style>

画像アニメーション２へ >>

ページ先頭へ