アニメーションテキスト

CSS

/****************************************
アニメーション　スクロール
/***************************************/

.animation001 {}

.animation002 {}

.animation003 {}

.animation-feadin1 {
-webkit-animation-name: animation1;
animation-name: animation1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes animation1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
}

@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

↑この赤の箇所は必要！

html

<!–スクロール　アニメ–>
<script type=”text/javascript” src=”n-js/scroll-text-anime.js”></script>

javascript

$(function() {

//function(e) のカッコ内のeは使われていないが一応そのまま残しておく。警告あるが大丈夫。eを取っても動くが一応オリジナルのままにしておく

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation001’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation001’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation001’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation002’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation002’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation002’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation003’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation003’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation003’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation004’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation004’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation004’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation005’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation005’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation005’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation006’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation006’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation006’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation007’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation007’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation007’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation008’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation008’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation008’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation009’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation009’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation009’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation010’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation010’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation010’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation011’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation011’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation011’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation012’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation012’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation012’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation013’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation013’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation013’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation014’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation014’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation014’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation015’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation015’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation015’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation016’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation016’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation016’).classList.remove(‘animation-feadin1’)
}
},
})

$(window).on({
scroll: function(e) {
var startY = document.querySelector(‘.animation017’).getBoundingClientRect().top, //表示させたい対象
windowHeight = window.innerHeight, // ブラウザの高さ
offset = (windowHeight / 3) * 3 //オフセット画面の2/3
// 表示
if (startY < offset) {
document.querySelector(‘.animation017’).classList.add(‘animation-feadin1’)
// ブラウザの外になったら消す
} else if (startY > windowHeight) {
document.querySelector(‘.animation017’).classList.remove(‘animation-feadin1’)
}
},
})

});

カテゴリー: アニメーションテキスト

テキストアニメーション　スクロール　俺が普段使うやつ。　これ使えば良い！

CSS

html

javascript