HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-7.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p class="rollAnime">テキストが回転します</p>body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-7.js"></script>
CSSの書き方
.rollAnime.roll span {
transition-property: opacity,transform;
transform: rotateY(360deg);
transition: all .8s cubic-bezier(.77,0,.175,1);
transition-timing-function: cubic-bezier(.77,0,.175,1);
display: inline-block;
}
JSの書き方
// rollAnimeにrollというクラス名を付ける定義
function RollAnimeControl() {
$('.rollAnime').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
var childs = $(this).children(); //rollAnimeの子要素を取得
if (scroll >= elemPos - windowHeight) {
$(childs).each(function (i) { //子要素を1つ1つ処理をおこなう
if (i < 10) { //10未満の場合
$(this).css("transition-delay","."+i+"s"); //子要素にcsstransition-delayを追加
} else { //10以上の場合
var n = i / 10; //ミリ秒指定なので10で割る
$(this).css("transition-delay",n+"s"); //子要素にcsstransition-delayを追加
}
});
$(this).addClass("roll"); //rollというアニメーションクラスを付与
} else {
$(childs).each(function () { //子要素を1つ1つ処理をおこなう
$(this).css("transition-delay","0s");//子要素にcsstransition-delayの秒を0とする
});
$(this).removeClass("roll");//rollというアニメーションクラスを除去
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
//spanタグを追加する
var element = $(".rollAnime");
element.each(function () {
var text = $(this).text();
var textbox = [];
text.split('').forEach(function (t, i) {
if (t !== " ") {
if (i < 10) {
textbox += '<span style="transition-delay:.' + i + 's;">' + t + '</span>';
} else {
var n = i / 10;
textbox += '<span style="transition-delay:' + n + 's;">' + t + '</span>';
}
} else {
textbox += t;
}
});
$(this).html(textbox);
});
RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
body内のテキストを表示させたい場所にHTMLを記載します。
<p class="js_typing">TEXT animation</p>body 終了タグ直前に jQuery、shuffle-text.jsと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/shuffle-text@0.3.0/build/shuffle-text.min.js"></script>
<!--自作のJS-->
<script src="js/8-6.js"></script>
JSの書き方
var arr = [ ]
//初期値の設定
function TypingInit() {
$('.js_typing').each(function (i) { //js_typingクラスを全て処理をおこなう
arr[i] = new ShuffleText(this);//動作させるテキストを配列に格納
});
}
//スクロールした際のアニメーションの設定
function TypingAnime() {
$(".js_typing").each(function (i) {
var elemPos = $(this).offset().top - 50;//要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
if(!$(this).hasClass("endAnime")){//endAnimeのクラスがあるかチェック
arr[i].start();//配列で登録テキストのアニメーションをおこなう
arr[i].duration = 800;//テキストが最終変化するまでの時間※規定値600
$(this).addClass("endAnime");//１度アニメーションした場合はendAnimeクラスを追加
}
}else{
$(this).removeClass("endAnime"); //範囲外にスクロールした場合はendAnimeのクラスを削除
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
TypingAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
TypingInit(); //初期設定
TypingAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-5.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p>
<span class="slide-in downAnime">
<span class="slide-in_inner downAnimeInner">下から上へテキストが流れます。下から上へテキストが流れます。</span>
</span>
</p>body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-5.js"></script>
CSSの書き方
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
/* 上下のアニメーション*/
.downAnime{
opacity: 0;/* 事前に透過0 にして消しておく*/
}
.slideAnimeDownUp {
animation-name:slideTextY100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY100 {
from {
transform: translateY(100%);/* 要素を上の枠外に移動*/
opacity: 0;
}
to {
transform: translateY(0);/* 要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeUpDown {
animation-name:slideTextY-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY-100 {
from {
transform: translateY(-100%);/* 要素を下の枠外に移動*/
opacity: 0;
}
to {
transform: translateY(0);/* 要素を元の位置に移動*/
opacity: 1;
}
}
JSの書き方
function slideAnime(){
//====下に動くアニメーションここから===
$('.downAnime').each(function(){
var elemPos = $(this).offset().top-50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
// 下から上へ表示するクラスを付与
// テキスト要素を挟む親要素（下）とテキスト要素を元位置でアニメーションをおこなう
$(this).addClass("slideAnimeDownUp");
// 要素を下枠外に移動しCSS アニメーションで下から元の位置に移動
$(this).children(".downAnimeInner").addClass("slideAnimeUpDown");
// 子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
}else{
// 下から上へ表示するクラスを取り除く
$(this).removeClass("slideAnimeDownUp");
$(this).children(".downAnimeInner").removeClass("slideAnimeUpDown");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-2.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p>
<span class="slide-in upAnime">
<span class="slide-in_inner upAnimeInner">上から下へテキストが流れます。上から下へテキストが流れます。</span>
</span>
</p>body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-4.js"></script>
CSSの書き方
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
/* 上下のアニメーション*/
.upAnime{
opacity: 0;/* 事前に透過0 にして消しておく*/
}
.slideAnimeDownUp {
animation-name:slideTextY100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY100 {
from {
transform: translateY(100%);/* 要素を上の枠外に移動*/
opacity: 0;
}
to {
transform: translateY(0);/* 要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeUpDown {
animation-name:slideTextY-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY-100 {
from {
transform: translateY(-100%);/* 要素を下の枠外に移動*/
opacity: 0;
}
to {
transform: translateY(0);/* 要素を元の位置に移動*/
opacity: 1;
}
}
JSの書き方
function slideAnime(){
//====上に動くアニメーションここから===
$('.upAnime').each(function(){
var elemPos = $(this).offset().top-50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
// 上から下へ表示するクラスを付与
// テキスト要素を挟む親要素（上）とテキスト要素を元位置でアニメーションをおこなう
$(this).addClass("slideAnimeUpDown");
// 要素を上枠外に移動しCSS アニメーションで上から元の位置に移動
$(this).children(".upAnimeInner").addClass("slideAnimeDownUp");
// 子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
} else {
// 上から下へ表示するクラスを取り除く
$(this).removeClass("slideAnimeUpDown");
$(this).children(".upAnimeInner").removeClass("slideAnimeDownUp");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-3.css">body内のテキストを表示させたい場所にHTMLを記載します。
<p>
<span class="slide-in rightAnime">
<span class="slide-in_inner rightAnimeInner">右から左へテキストが流れます。右から左へテキストが流れます。</span>
</span>
</p>body 終了タグ直前にjQueryと、動きを制御する自作のJSの2つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-3.js"></script>
CSSの書き方
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
/*左右のアニメーション*/
.rightAnime{
opacity: 0;/*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
animation-name:slideTextX100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);/*要素を右の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
JSの書き方
function slideAnime(){
//====右に動くアニメーションここから===
$('.rightAnime').each(function(){
var elemPos = $(this).offset().top-50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
// 右から左へ表示するクラスを付与
// テキスト要素を挟む親要素（右側）とテキスト要素を元位置でアニメーションをおこなう
$(this).addClass("slideAnimeRightLeft ");
// 要素を右枠外に移動しCSS アニメーションで右から元の位置に移動
$(this).children(".rightAnimeInner").addClass("slideAnimeLeftRight");
// 子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
} else {
// 右から左へ表示するクラスを取り除く
$(this).removeClass("slideAnimeRightLeft ");
$(this).children(".rightAnimeInner").removeClass("slideAnimeLeftRight");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述