次は、文字がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法をします。
文字がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="fuwa fuwa-s-mozi1">スクロールふわっとする文字（下から上に移動）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法」の
文字がふわっと出てくることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*スクロールふわっとする文字（下から上に移動）*/
.fuwa-s-mozi1{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi1">スクロールふわっとする文字（下から上に移動）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「opacity」の数字が小さくなるほど、文字が透明になります。
「transform」の、「translateY(50px)」は、文字がふわっと出てくる位置を設定するCSSコードです。
「translateY(50px)」は、縦方向に50pxのところから、ふわっと出てくるという意味です。
「transition」の、「2s」は、ふわっと出てくる時間を設定するCSSコードです。
「2s」は、「2秒」という意味です。
HTMLのところに、「fuwa」と「fuwa-s-mozi1」の２つのCSSを設定しています。
「fuwa」のCSSは、「jquery」で設定しています。
スクロールふわっとする文字記入例
スクロールふわっとする文字（下から上に移動）
CSS
/*スクロールふわっとする文字（下から上に移動）*/
.fuwa-s-mozi1{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi1">スクロールふわっとする文字（下から上に移動）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（下から上に移動）
スクロールふわっとする文字（太字）
CSS
/*スクロールふわっとする文字（太字）*/
.fuwa-s-mozi2{
display: inline-block; /*位置*/
font-weight: bold; /*太字*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi2"スクロールふわっとする文字（太字）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（太字）
スクロールふわっとする文字（色付き）
CSS
/*スクロールふわっとする文字（色付き）*/
.fuwa-s-mozi3{
display: inline-block; /*位置*/
color: red; /*文字の色*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi3">スクロールふわっとする文字（色付き）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（色付き）
スクロールふわっとする文字（リンク付き）
CSS
/*スクロールふわっとする文字（リンク付き）*/
.fuwa-s-mozi4{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">スクロールふわっとする文字（リンク付き）</a></span>
記事をプレビュー表示したとき
スクロールふわっとする文字（大きい文字）
CSS
/*スクロールふわっとする文字（大きい文字）*/
.fuwa-s-mozi5{
display: inline-block; /*位置*/
font-size: 1.5em; /*文字の大きさ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi5">スクロールふわっとする文字（大きい文字）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（大きい文字）
スクロールふわっとする文字（下線付き）
CSS
/*スクロールふわっとする文字（下線付き）*/
.fuwa-s-mozi6{
display: inline-block; /*位置*/
text-decoration: underline; /*下線*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi6">スクロールふわっとする文字（下線付き）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（下線付き）
スクロールふわっとする文字（マーカー付き）
CSS
/*スクロールふわっとする文字（マーカー付き）*/
.fuwa-s-mozi7{
display: inline-block; /*位置*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi7">スクロールふわっとする文字（マーカー付き）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（マーカー付き）
スクロールふわっとする文字（上から下に移動）
CSS
/*スクロールふわっとする文字（上から下に移動）*/
.fuwa-s-mozi8{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateY(-50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi8">スクロールふわっとする文字（上から下に移動）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（上から下に移動）
スクロールふわっとする文字（右から左に移動）
CSS
/*スクロールふわっとする文字（右から左に移動）*/
.fuwa-s-mozi9{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateX(50px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi9">スクロールふわっとする文字（右から左に移動）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（右から左に移動）
スクロールふわっとする文字（左から右に移動）
CSS
/*スクロールふわっとする文字（左から右に移動）*/
.fuwa-s-mozi10{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateX(-50px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi10">スクロールふわっとする文字（左から右に移動）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（左から右に移動）
スクロールふわっとする文字（その場でふわっとする）
CSS
/*スクロールふわっとする文字（その場でふわっとする）*/
.fuwa-s-mozi11{
display: inline-block; /*位置*/
opacity : 0; /*透明度*/
transform: translateX(0px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<span class="fuwa fuwa-s-mozi11">スクロールふわっとする文字（その場でふわっとする）</span>
記事をプレビュー表示したとき
スクロールふわっとする文字（その場でふわっとする）