文字がスクロールするとふわっと出てくるJqueryコードを追加する方法

次は、文字がスクロールするとふわっと出てくるJqueryコードを追加する方法をします。

文字がスクロールするとふわっと出てくるJqueryコードを追加する方法

ワードプレスの管理画面を開きます。

左側の「Cocoon設定」を押します。

上側の「アクセス解析・認証」を押します。

少し下へ移動します。

ヘッド用コードの中にJqueryコードを貼り付けます。

下記のJqueryコードをコピーして、ヘッド用コードの中に貼り付けます。

<!-- ふわっとするjquery -->
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<!-- ふわっとするjquery -->
<script>
$(function(){
function fianim(){
$('.fuwa').each(function(){
var target = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > target - windowHeight){
$(this).css('opacity','1'); //ふわっとして止まったときの透明度
$(this).css('transform','translateY(0)'); //ふわっとして止まる位置
$(this).css('transform','translateX(0)'); //ふわっとして止まる位置
}
});
}
fianim();
$(window).scroll(function (){
fianim();
});
});
</script>

貼り付けました。

一番下の「変更をまとめて保存」を押します。