次は、画像がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法をします。
画像がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="fuwa fuwa-s-gazou1"> ここに画像を入れる </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像がスクロールするとふわっと出てくるHTMLとCSSとJqueryを使ってする方法」の
画像をスクロールすると画像がふわっとなることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*スクロールふわっとする画像（下から上に移動）*/
.fuwa-s-gazou1{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou1"> ここに画像を入れる </div>
「display」は、画像の位置を指定するためのCSSコードです。
「width」の、「300px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「170px」の数字が大きくなるほど画像の高さが大きくなります。
「opacity」の数字が小さくなるほど、文字が透明になります。
「transform」の、「translateY(50px)」は、文字がふわっと出てくる位置を設定するCSSコードです。
「translateY(50px)」は、縦方向に50pxのところから、ふわっと出てくるという意味です。
「transition」の、「2s」は、ふわっと出てくる時間を設定するCSSコードです。
「2s」は、「2秒」という意味です。
HTMLのところに、「fuwa」と「fuwa-s-gazou1」の２つのCSSを設定しています。
「fuwa」のCSSは、「jquery」で設定しています。
「ここに画像を入れる」の文字を消して、画像を入れてください。スクロールふわっとする画像記入例
スクロールふわっとする画像（下から上に移動）
CSS
/*スクロールふわっとする画像（下から上に移動）*/
.fuwa-s-gazou1{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou1"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（枠線付き）
CSS
/*スクロールふわっとする画像（枠線付き）*/
.fuwa-s-gazou2{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
border: solid 2px black; /*枠線*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou2"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（枠付き）
CSS
/*スクロールふわっとする画像（枠付き）*/
.fuwa-s-gazou3-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding-top: 25px; /* 枠の余白*/
width: 400px; /*枠の横幅*/
height: 300px; /*枠の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
.fuwa-s-gazou3{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
}
HTML
<div class="fuwa fuwa-s-gazou3-waku"> <div class="fuwa fuwa-s-gazou3"> ここに画像を入れる </div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（文字と枠付き）
CSS
/*スクロールふわっとする画像（文字と枠付き）*/
.fuwa-s-gazou4-mozi {
font-size: 1.5em; /* 文字の大きさ*/
text-align: center; /*文字の位置*/
font-weight: bold; /*太さ*/
}
.fuwa-s-gazou4-bunsho {
font-size: 1.2em; /* 文字の大きさ*/
text-align: left; /*文字の位置*/
padding-top: 20px; /*文字の上側の余白*/
}
.fuwa-s-gazou4-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding: 20px; /*枠内の上側の余白*/
width: 400px; /*枠の横幅*/
height: auto; /*枠の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
.fuwa-s-gazou4{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
}
HTML
<div class="fuwa fuwa-s-gazou4-waku"> <div class="fuwa fuwa-s-gazou4-mozi">ここに文字を入れる</div> <div class="fuwa fuwa-s-gazou4"> ここに画像を入れる </div> <div class="fuwa fuwa-s-gazou4-bunsho">ここに文章を入れる</div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
ここに文字を入れる
ここに文章を入れる
スクロールふわっとする画像（リンク付き）
CSS
/*スクロールふわっとする画像（リンク付き）*/
.fuwa-s-gazou5{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou5"> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ここに画像を入れる</a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（ふわっと時間長い）
CSS
/*スクロールふわっとする画像（ふわっと時間長い）*/
.fuwa-s-gazou6{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 5s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou6"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（影付き）
CSS
/*スクロールふわっとする画像（影付き）*/
.fuwa-s-gazou7{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.29); /*影*/
opacity : 0; /*透明度*/
transform: translateY(50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou7"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（上から下に移動）
CSS
/*スクロールふわっとする画像（上から下に移動）*/
.fuwa-s-gazou8{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateY(-50px); /*縦方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou8"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（右から左に移動）
CSS
/*スクロールふわっとする画像（右から左に移動）*/
.fuwa-s-gazou9{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateX(50px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou9"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（左から右に移動）
CSS
/*スクロールふわっとする画像（左から右に移動）*/
.fuwa-s-gazou10{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateX(-50px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou10"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
スクロールふわっとする画像（その場でふわっとする）
CSS
/*スクロールふわっとする画像（その場でふわっとする）*/
.fuwa-s-gazou11{
display: block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
opacity : 0; /*透明度*/
transform: translateX(0px); /*横方向に移動*/
transition: 2s; /*ふわっとする時間*/
}
HTML
<div class="fuwa fuwa-s-gazou11"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき