アニメーション一覧

CSSはスタイルシート・responsive.cssの一番下にコピペ。
JSはfooter.phpの</body>の一行上にコピペ。

下から上にフェードイン

PC フォントサイズ24px,SP フォントサイズ20px

FADE IN UP

HTML

<h2 class="fade_up">FADE IN UP</h2>

スタイルシート (style.css)

.home .fade_up, .page .fade_up, .archive .fade_up, .single .fade_up, .fade_up {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity: 0;
    position: relative;
    top: 40px;
    -webkit-transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
    transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
.fade_up.fade_in {
    opacity: 1;
    top: 0;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .fade_up, .page .fade_up, .archive .fade_up, .single .fade_up, .fade_up {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// フェードインアニメーション
    $(window).on('scroll',function () {
        const wHeight = $(window).height();
        const scrollAmount = $(window).scrollTop();
		
	// フェードインアニメーションup
        $('.fade_up').each(function () {
            const targetPosition = $(this).offset().top;
            if(scrollAmount > targetPosition - wHeight + 60) {
                $(this).addClass("fade_in");
            }
        });
    }).trigger('scoll');
// END フェードインアニメーション
});
</script>

上から下にフェードイン

PC フォントサイズ24px,SP フォントサイズ20px

FADE IN DOWN

HTML

<h2 class="fade_down">FADE IN DOWN</h2>

スタイルシート (style.css)

.home .fade_down, .page .fade_down, .archive .fade_down, .single .fade_down, .fade_down {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity: 0;
    position: relative;
    top: -40px;
    -webkit-transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
    transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
.fade_down.fade_in {
    opacity: 1;
    top: 0;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .fade_down, .page .fade_down, .archive .fade_down, .single .fade_down, .fade_down {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// フェードインアニメーション
    $(window).on('scroll',function () {
        const wHeight = $(window).height();
        const scrollAmount = $(window).scrollTop();
		
	// フェードインアニメーションdown
		$('.fade_down').each(function () {
            const targetPosition = $(this).offset().top;
            if(scrollAmount > targetPosition - wHeight + 60) {
                $(this).addClass("fade_in");
            }
        });
    }).trigger('scoll');
// END フェードインアニメーション
});
</script>

右から左にフェードイン

PC フォントサイズ24px,SP フォントサイズ20px

FADE IN LEFT

HTML

<h2 class="fade_left">FADE IN LEFT</h2>

スタイルシート (style.css)

.home .fade_left, .page .fade_left, .archive .fade_left, .single .fade_left, .fade_left {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity: 0;
    position: relative;
    left: 40px;
    -webkit-transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
    transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
.fade_left.fade_in {
    opacity: 1;
    left: 0;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .fade_left, .page .fade_left, .archive .fade_left, .single .fade_left, .fade_left {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// フェードインアニメーション
    $(window).on('scroll',function () {
        const wHeight = $(window).height();
        const scrollAmount = $(window).scrollTop();
		
	// フェードインアニメーションleft
		$('.fade_left').each(function () {
            const targetPosition = $(this).offset().top;
            if(scrollAmount > targetPosition - wHeight + 60) {
                $(this).addClass("fade_in");
            }
        });
    }).trigger('scoll');
// END フェードインアニメーション
});
</script>

左から右にフェードイン

PC フォントサイズ24px,SP フォントサイズ20px

FADE IN RIGHT

HTML

<h2 class="fade_right">FADE IN RIGHT</h2>

スタイルシート (style.css)

.home .fade_right, .page .fade_right, .archive .fade_right, .single .fade_right, .fade_right {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity: 0;
    position: relative;
    left: -40px;
    -webkit-transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
    transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
.fade_right.fade_in {
    opacity: 1;
    left: 0;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .fade_right, .page .fade_right, .archive .fade_right, .single .fade_right, .fade_right {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// フェードインアニメーション
    $(window).on('scroll',function () {
        const wHeight = $(window).height();
        const scrollAmount = $(window).scrollTop();
		
	// フェードインアニメーションright
		$('.fade_right').each(function () {
            const targetPosition = $(this).offset().top;
            if(scrollAmount > targetPosition - wHeight + 60) {
                $(this).addClass("fade_in");
            }
        });
    }).trigger('scoll');
// END フェードインアニメーション
});
</script>

1文字ずつのアニメーション

PC フォントサイズ24px,SP フォントサイズ20px

あけまして
おめでとうございます

HTML

<h2 class="eachTextAnime_right">あけまして
おめでとうございます</h2>

スタイルシート (style.css)

.home .eachTextAnime_right, .page .eachTextAnime_right, .archive .eachTextAnime_right, .single .eachTextAnime_right, .eachTextAnime_right {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity: 0;
}
.eachTextAnime_right.appeartext { opacity: 1; }
.eachTextAnime_right span { opacity: 0; position: relative; }
.eachTextAnime_right.appeartext span{ animation:text_anime_on1 .5s ease-out forwards; }
@keyframes text_anime_on1 {
	0% { opacity:0; left: 15px; }
	100% { opacity:1; left: 0; }
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .eachTextAnime_right, .page .eachTextAnime_right, .archive .eachTextAnime_right, .single .eachTextAnime_right, .eachTextAnime_right {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// テキストが右から1文字ずつ出現
function EachTextAnimeControl() {
  $('.eachTextAnime_right').each(function () {
    var elemPos = $(this).offset().top + 60;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("appeartext");
    }
  });
}
$(window).scroll(function () {
  EachTextAnimeControl();
});
$(window).on('load', function () {
  var element = $(".eachTextAnime_right");
  element.each(function () {
    var text = $(this).text();
    var textbox = "";
    text.split('').forEach(function (t, i) {
      if (t !== "\n") {
        if (i < 10) {
          textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
        } else {
          var n = i / 10;
          textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
        }
      } else {
        textbox += '<br>';
      }
    });
    $(this).html(textbox);
  });
  EachTextAnimeControl();
});
// END
});
</script>

今年もよろしく
お願いいたします。

HTML

<h2 class="eachTextAnime_up">今年もよろしく
お願いいたします。</h2>

スタイルシート (style.css)

.home .eachTextAnime_up, .page .eachTextAnime_up, .archive .eachTextAnime_up, .single .eachTextAnime_up, .eachTextAnime_up {
    font-size: 24px;
    clear: both;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
    opacity:0;
}
.eachTextAnime_up.appeartext { opacity: 1; }
.eachTextAnime_up span { opacity: 0; position: relative; }
.eachTextAnime_up.appeartext span{ animation:text_anime_on2 .5s ease-out forwards; }
@keyframes text_anime_on2 {
	0% { opacity:0; top: 15px; }
	100% { opacity:1; top: 0; }
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .eachTextAnime_up, .page .eachTextAnime_up, .archive .eachTextAnime_up, .single .eachTextAnime_up, .eachTextAnime_up {
    font-size: 20px;
}
}

javascript(JS)

<script>
jQuery(function ($) {
function EachTextAnimeControl2() {
  $('.eachTextAnime_up').each(function () {
    var elemPos2 = $(this).offset().top + 60;
    var scroll2 = $(window).scrollTop();
    var windowHeight2 = $(window).height();
    if (scroll2 >= elemPos2 - windowHeight2) {
      $(this).addClass("appeartext");
	}
  });
}
$(window).scroll(function () {
  EachTextAnimeControl2();
});
$(window).on('load', function () {
  var element2 = $(".eachTextAnime_up");
  element2.each(function () {
    var text2 = $(this).text();
    var textbox2 = "";
    text2.split('').forEach(function (t, i) {
      if (t !== "\n") {
        if (i < 10) {
          textbox2 += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
        } else {
          var n = i / 10;
          textbox2 += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
        }
      } else {
        textbox2 += '<br>';
      }
    });
    $(this).html(textbox2);
  });
  EachTextAnimeControl2();
});
// END
});
</script>

順番に出てくるアニメーション


  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

HTML

<ul class="ul_4c flex_ul delayScroll">
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
<li class="boxes">
4カラムリスト
SP2カラムリスト</li>
</ul>

スタイルシート (style.css)

.home .flex_ul, .page .flex_ul, .archive .flex_ul, .single .flex_ul, .flex_ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 -10px;
    list-style: none;
}
.flex_ul li.boxes {
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 2;
    list-style: none;
}
.ul_4c li {
    width: 25%;
    margin: 0 0 24px;
}
.boxes { opacity: 0; }
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.ul_4c li {
    width: 50%;
}
}

javascript(JS)

<script>
jQuery(function ($) {
// 順番に現れるbox
	function delayScrollAnime() {
	var time = 0.2;
	var value = time;
	$('.delayScroll').each(function () {
		var parent = this;
		var elemPos3 = $(this).offset().top + 60;
		var scroll3 = $(window).scrollTop();
		var windowHeight3 = $(window).height();
		var childs = $(this).children();
		if (scroll3 >= elemPos3 - windowHeight3 && !$(parent).hasClass("play")) {
			$(childs).each(function () {
				if (!$(this).hasClass("fadeUp")) {
					$(parent).addClass("play");
					$(this).css("animation-delay", value + "s");
					$(this).addClass("fadeUp");
					value = value + time;
					var index = $(childs).index(this);
					if((childs.length-1) == index){
						$(parent).removeClass("play");
					}
				}
			})
		}
	})
}
	$(window).scroll(function (){
		delayScrollAnime();
	});
	$(window).on('load', function(){
		delayScrollAnime();
	});
	// END 順番に現れるbox
});
</script>
TOP