メモ:
jqueryは必要だったら追加
js (ヘッダーで外部読み込みしてもいい)
(function ($) {
'use strict';
$(function(){
$(window).scroll(function (){
var animTrigger = $('.anim');
$(animTrigger).each(function(){
var scroll = $(window).scrollTop(),
elemTop = $(this).offset().top,
windowHeight = $(window).height();
if (scroll > elemTop - windowHeight + 200){
$(this).addClass('is-animated');
}
});
});
$(window).trigger('scroll');
});
var $target = $('.js-anim'),
$target2 = $('.js-anim2'),
$target3 = $('.js-anim3');
var anim = function() {
if(($target).hasClass('is-animated')){
$target.removeClass('is-animated');
setTimeout(anim, 1000)
} else {
$target.addClass('is-animated');
setTimeout(anim, 3000)
}
}
anim();
var anim2 = function() {
if(($target2).hasClass('is-animated')){
$target2.removeClass('is-animated');
setTimeout(anim2, 1000)
} else {
$target2.addClass('is-animated');
setTimeout(anim2, 4000)
}
}
anim2();
var anim3 = function() {
if(($target3).hasClass('is-animated')){
$target3.removeClass('is-animated');
setTimeout(anim3, 3000)
} else {
$target3.addClass('is-animated');
setTimeout(anim3, 3000)
}
}
anim3();
})(jQuery);
css
/*--------------------------------------------------
エフェクト
--------------------------------------------------*/
/* 上からフェードイン */
.slide-top {
opacity: 0;
transform: translate(0, -20px);
transition: all 1s ease-out;
}
/* 下からフェードイン */
.slide-bottom {
opacity: 0;
transform: translate(0, 20px);
transition: all 1s ease-out;
}
/* 左からフェードイン */
.slide-left {
opacity: 0;
transform: translate(-20px, 0);
transition: all 1s ease-out;
}
/* 右からフェードイン */
.slide-right {
opacity: 0;
transform: translate(20px, 0);
transition: all 1s ease-out;
}
/*--------------------------------------------------
animetion
--------------------------------------------------*/
.anim { opacity: 0; }
/* フェードイン */
.fadein.is-animated {
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* スライドイン */
.slidein.is-animated {
animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
0% {
transform: translateX(180px);
opacity: 0;
}
100% {
transform: translateX(0);
}
40%,100% {
opacity: 1;
}
}
/* ズームイン */
.zoomin.is-animated {
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ぽよよん */
.poyoyon.is-animated {
animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
20%,100% {
opacity: 1;
}
}
/* ぽよよん2 */
.poyoyon2.is-animated {
animation: poyoyon2 1s ease-in-out 1 forwards;
}
@keyframes poyoyon2 {
0% {
transform: scale(1.0, 1.0) translate(0, 0);
}
15% {
transform: scale(0.98, 0.9) translate(0, 5px);
}
30% {
transform: scale(1.02, 1.0) translate(0, 8px);
}
50% {transform: scale(0.98, 1.05) translate(0, -8px);
}
70% {
transform: scale(1.0, 0.9) translate(0, 5px);
}
100% {
transform: scale(1.0, 1.0) translate(0, 0);
}
0%, 100% {
opacity: 1;
}
}
/* ぽよよん3 */
.poyoyon3 {
animation: poyoyon3 2.5s infinite;
opacity: 1;
}
@keyframes poyoyon3 {
0%, 40% {
transform: skew(0deg, 0deg);
}
5% {
transform: skew(5deg, 5deg);
}
10% {
transform: skew(-4deg, -4deg);
}
15% {
transform: skew(3deg, 3deg);
}
20% {
transform: skew(-2deg, -2deg);
}
25% {
transform: skew(1deg, 1deg);
}
30% {
transform: skew(-0.6deg, -0.6deg);
}
35% {
transform: skew(0.3deg, 0.3deg);
}
}
/* ポップアップ */
.popup.is-animated {
animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes popup {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
}
80%, 100% {
opacity: 1;
}
}
/* どくどく */
.poyopoyo {
animation: poyopoyo 2s ease-out infinite;
opacity: 1;
}
@keyframes poyopoyo {
0%, 40%, 60%, 80% {
transform: scale(1.0);
}
50%, 70% {
transform: scale(0.95);
}
}
/* ななめから出てくる */
.slide-skew.is-animated {
animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slide-skew {
0% {
transform: translate(180px,30px);
opacity: 0;
}
100% {
transform: translate(0,0);
}
20%,100% {
opacity: 1;
}
}
/* きらん */
.kiran {
opacity: 1;
overflow: hidden;
position: relative;
cursor: pointer;
}
.kiran::before {
background-color: #fff;
content: "";
display: block;
position: absolute;
top: -100px;
left: 0;
width: 30px;
height: 100%;
opacity: 0;
transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.kiran:hover::before {
animation: kiran 0.5s linear 1;
}
@keyframes kiran {
0% {
transform: scale(2) rotate(45deg);
opacity: 0;
}
20% {
transform: scale(20) rotate(45deg);
opacity: 0.6;
}
40% {
transform: scale(30) rotate(45deg);
opacity: 0.4;
}
80% {
transform: scale(45) rotate(45deg);
opacity: 0.2;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
/* 背景色が流れてくる */
.bg .bg-wrap {
position: relative;
display: inline-block;
margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: left center;
}
.bg .bg-wrap .inn {
color: #fff;
display: inline-block;
font-size: 36px;
font-weight: bold;
padding: 5px 15px;
position: relative;
z-index: 1;
}
@keyframes bg {
0% {
opacity: 0;
transform: scaleX(0) translateX(-5%);
}
30% {
transform: scaleX(1) translateX(0);
}
100% {
transform: scaleX(1) translateX(0);
}
30%, 100% {
opacity: 1;
}
}
/* 文字がぬるりと現れる */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
display: block;
}
.matrix .bg-wrap {
overflow: hidden;
opacity: 0;
}
.matrix .bg-wrap + .bg-wrap {
margin-top: 10px;
}
.matrix .bg-wrap .inn.large {
font-size: 36px;
font-weight: bold;
}
.matrix .bg-wrap .inn.small {
font-size: 15px;
}
.matrix .bg-wrap .inn {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 100);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.matrix.is-animated .bg-wrap {
opacity: 1;
}
.matrix.is-animated .bg-wrap .inn {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
}
/* 背景色が消えてから表示されるテキスト */
.mask-bg {
color: transparent;
display: inline-block;
font-size: 36px;
font-weight: bold;
overflow: hidden;
position: relative;
transition: color 0ms 450ms;
}
.mask-bg::after {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(0, 100%);
}
.mask-bg.is-animated {
color: #362ae0;
}
.mask-bg.is-animated::after {
animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
0% {
transform: translate(0, 101%)
}
40%, 60% {
transform: translate(0, 0%)
}
100% {
transform: translate(0, -100%)
}
}
/* 線が伸びる */
.line {
display: block;
position: relative;
margin-top: 20px;
}
.line::after {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
content: '';
display: block;
height: 1px;
width: 0;
transform: translateX(-50%);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
position: absolute;
bottom: 0;
left: 50%;
}
.line.is-animated::after {
width: 100%;
}
/* フェードアップ */
.fadeup.is-animated {
animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeup {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ボーダーが緩やかにつく */
.stroke {
background: #f0f0f0;
max-width: 400px;
height: 250px;
position: relative;
}
.stroke .border {
content: "";
position: absolute;
opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
width: calc(100% - 20px);
}
.stroke .border.top {
border-top: 3px solid #362ae0;
right: 0;
top: 0;
}
.stroke .border.bottom {
border-bottom: 3px solid #362ae0;
left: 0;
bottom: 0;
}
.stroke .border.right,
.stroke .border.left {
height: calc(100% - 20px);
}
.stroke .border.right {
border-right: 3px solid #362ae0;
right: 0;
top: 0;
}
.stroke .border.left {
border-left: 3px solid #362ae0;
left: 0;
bottom: 0;
}
.stroke.is-animated .border {
opacity: 1;
}
.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes stroke-width {
0% {
width: 0;
opacity: 1;
}
100% {
width: calc(100% - 20px);
opacity: 1;
}
}
@keyframes stroke-height {
0% {
height: 0;
opacity: 1;
}
100% {
height: calc(100% - 20px);
opacity: 1;
}
}
/* 文字が滑らかに表示される */
.smooth {
clip-path: inset(0 100% 0 0);
display: inline-block;
font-size: 36px;
font-weight: bold;
transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
transition-property: clip-path;
line-height: 1;
height: 40px;
margin-top: 15px;
}
.smooth.is-animated {
clip-path: inset(0);
}
/* ふわふわ */
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 70px;
height: 70px;
margin-top: 15px;
}
@keyframes fuwafuwa {
0% {
transform:translate(0, 0) rotate(-7deg);
}
50% {
transform:translate(0, -7px) rotate(0deg);
}
100% {
transform:translate(0, 0) rotate(7deg);
}
}
/* ゆったりスクロールボタン */
.scroll {
display: inline-block;
padding-top: 70px;
position: relative;
}
.scroll::before {
animation: scroll 3.5s infinite;
border: solid #000;
border-width: 0 0 1px 1px;
content: "";
display: inline-block;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
transform: rotate(-45deg);
width: 20px;
height: 20px;
}
@keyframes scroll {
0% {
transform: rotate(-45deg) translate(0, 0);
}
80% {
transform: rotate(-45deg) translate(-30px, 30px);
}
0%, 80%, 100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
/* くるくる回りながら出現 */
.kurukuru {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
width: 50px;
height: 50px;
opacity: 0;
padding-bottom: 40px;
}
.kurukuru.is-animated {
animation: kurukuru 1.4s ease-out;
opacity: 1;
}
@keyframes kurukuru {
0%{
transform: rotateY(0) translateY(40px);
opacity: 0;
}
100%{
transform: rotateY(360deg) translateY(0);
opacity: 1;
}
}
html
※sectionまるごとフェード表示
<section class="fadeup anim">
<h1>タイトル</h1>
<p>テキスト</p>
</section>
※h1タイトルのみフェード表示
<section>
<h1 class="fadeup anim">タイトル</h1>
<p>テキスト</p>
</section>