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

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

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’)
}
},
})





});

 

 

 

bgSwitcher の中に縦横中央でテキストアニメーションを複数行入れる方法

work/riaruta/index.html

 

https://www.granfairs.com/blog/staff/centering-by-css

html

<!–テキストアニメーション–>
<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”js/jquery.transit.js”></script>
<script type=”text/javascript” src=”js/jquery.textFx.js”></script>
<script type=”text/javascript” src=”js/animeText.js”></script>

↑のJSはheader内だと何かとコンフリクトおこすので、bodyの該当要素の直前に入れた。

<!–キービジュアル–>
<div class=”container-fluid px-0 bg-slider” >
<div class=”outer”>
<div class=”inner-text1″>介護分野に自信があります。</div>
<div class=”inner-text2″>私たちは、慢性的な人材不足を解決するため複数カ国から人材受入を行う</div>
<div class=”inner-text2″>介護分野に特化した支援機関です。</div>
</div>
</div>

 

ＣＳＳ

.bg-slider {
width: 99.1vw;
height: 95vh;
background-position:center center;
background-size: cover;
/*display: flex;*/　コメントアウト
align-items:center;
justify-content: center;

position: relative;
}

 

.outer {
/*display: flex;*/
/* position: relative;*/
width:100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
align-items: center;
justify-content: center;
}

.inner-text1 {
width:100%;
text-align: center;
font-size:400%;
font-family: “Sawarabi Mincho”;
margin-bottom: 20px;
text-shadow: 1px 2px 8px #ffffff;
}

.inner-text2 {
text-align: center;
font-size:180%;
font-family: “Sawarabi Mincho”;
margin-bottom: 20px;
text-shadow: 1px 2px 8px #ffffff;
}

 

 

アニメーション用外部のＪＳ

$(function() {
$(‘.test1’).textFx({
type: ‘fadeIn’,
iChar: 40,
iAnim: ‘3500’
});
});

$(function() {
$(‘.inner-text2’).textFx({
type: ‘slideIn’,
iChar: 20,
iAnim: ‘1000’,
direction: ‘top’
});
});

$(function() {
$(‘.inner-text1’).textFx({
type: ‘rotate’,
iChar: 80,
iAnim: ‘4000’
});
});