テキストの動き | イセンチュートリアルサイト

カテゴリーページ

ほのかに光りながら出現

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-17.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p class="glowAnime">テキストがほのかに光りながら出現します</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-17.js"></script>

CSSの書き方


.glowAnime span{
	opacity: 0;
}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{
	animation:glow_anime_on 1s ease-out forwards;
}

@keyframes glow_anime_on{
	0% {
		opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;
	}
	50% {
		opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff;
	}
	100% {
		opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;
	}
}

JSの書き方

// glowAnimeにglowというクラス名を付ける定義
function GlowAnimeControl() {
	$('.glowAnime').each(function () {
		var elemPos = $(this).offset().top - 50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight) {
			$(this).addClass("glow");

		} else {
			$(this).removeClass("glow");
		}
	});
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	GlowAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	//spanタグを追加する
	var element = $(".glowAnime");
	element.each(function () {
		var text = $(this).text();
		var textbox = "";
		text.split('').forEach(function (t, i) {
			if (t !== " ") {
				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 += t;
			}
		});
		$(this).html(textbox);
	});

	GlowAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

投稿日：2022年08月03日

滑らかに出現

カテゴリー：テキストの動き

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-16.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p><span class="smoothText"><span class="smoothTextTrigger">テキストが滑らかに出現</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-16.js"></script>

CSSの書き方

span.smoothText {
	overflow: hidden;
	display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}

span.smoothTextTrigger.smoothTextAppear{
	transform: translate3d(0,0,0) skewY(0);
}

JSの書き方

// smoothTriggerにsmoothTextAppearというクラス名を付ける定義
function SmoothTextAnime() {
	$('.smoothTextTrigger').each(function(){ //smoothTextTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('smoothTextAppear');// 画面内に入ったらsmoothTextAppearというクラス名を追記
		} else {
			$(this).removeClass('smoothTextAppear');// 画面外に出たらsmoothTextAppearというクラス名を外す
		}
	});	
}



// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	SmoothTextAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	SmoothTextAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

投稿日：2022年08月03日

背景色が伸びて出現（下から上）

カテゴリー：テキストの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-15.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p><span class="bgextend bgDUextendTrigger"><span class="bgappearTrigger">背景色が伸びて出現（下から上）</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-15.js"></script>

CSSの書き方

/*全共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
	from {
		opacity:0;
	}
	to {
		opacity:1;  
	}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*下から上*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgDUextendTrigger{
	opacity: 0;
}

JSの書き方

// 動きのきっかけの起点となるアニメーションの名前を定義
function BgFadeAnime(){
	// 背景色が伸びて出現（下から上）
	$('.bgDUextendTrigger').each(function(){ //bgDUextendTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgDUextend');// 画面内に入ったらbgDUextendというクラス名を追記
		} else {
			$(this).removeClass('bgDUextend');// 画面外に出たらbgDUextendというクラス名を外す
		}
	});
	// 文字列を囲う子要素
	$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
		} else {
			$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
		}
	});		
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

投稿日：2022年08月03日

背景色が伸びて出現（上から下）

カテゴリー：テキストの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-14.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p><span class="bgextend bgUDextendTrigger"><span class="bgappearTrigger">背景色が伸びて出現（上から下）</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-14.js"></script>

CSSの書き方

/*全共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
	from {
		opacity:0;
	}
	to {
		opacity:1;  
	}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*上から下*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger{
	opacity: 0;
}

JSの書き方

// 動きのきっかけの起点となるアニメーションの名前を定義
function BgFadeAnime(){
	// 背景色が伸びて出現（上から下）
	$('.bgUDextendTrigger').each(function(){ //bgUDextendTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgUDextend');// 画面内に入ったらbgUDextendというクラス名を追記
		} else {
			$(this).removeClass('bgUDextend');// 画面外に出たらbgUDextendというクラス名を外す
		}
	});	
	// 文字列を囲う子要素
	$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
		} else {
			$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
		}
	});		
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

投稿日：2022年08月03日

背景色が伸びて出現（右から左）

カテゴリー：テキストの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-13.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p><span class="bgextend bgRLextendTrigger"><span class="bgappearTrigger">背景色が伸びて出現（右から左）</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-13.js"></script>

CSSの書き方

/*全共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
	from {
		opacity:0;
	}
	to {
		opacity:1;  
	}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*右から左*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgRLextendTrigger{
	opacity: 0;
}

JSの書き方

// 動きのきっかけの起点となるアニメーションの名前を定義
function BgFadeAnime(){
	// 背景色が伸びて出現（右から左）
	$('.bgRLextendTrigger').each(function(){ //bgRLextendTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgRLextend');// 画面内に入ったらbgRLextendというクラス名を追記
		} else {
			$(this).removeClass('bgRLextend');// 画面外に出たらbgRLextendというクラス名を外す
		}
	});
	// 文字列を囲う子要素
	$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
		} else {
			$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
		}
	});		
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
	BgFadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

投稿日：2022年08月03日

JS

カテゴリーページ

ほのかに光りながら出現

滑らかに出現

背景色が伸びて出現（下から上）

背景色が伸びて出現（上から下）

背景色が伸びて出現（右から左）

アーカイブ