それっぽいサイトにするためのアニメーションの設定方法

下から出るパターン

➀JAVAを記入

  1. 外観
  2. テーマ編集
  3. header.php

header.phpを開いてこの記述を探す。

<?php wp_head(); ?>

そのすぐ真下に☟をコピー&ペーストし、ファイルを保存

<script type="text/javascript">
jQuery(function($){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 70){
                $(this).addClass('scrollin');
            }
        });
    });
});
</script>

➁cssを記入

  1. 外観
  2. カスタマイズ
  3. 追加CSS

☟を追加CSSにコピー&ペーストし、ファイルを保存する

.fadein {
opacity : 0.1;
transform : translate(0, 50px);
transition : all 500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

➂htmlを記入

☟で写真や文章を囲う。かならず閉じtagの</section>を入れること

<section class="fadein">
ここに文章など

</section>

➃結果

見出し

文章

見出し

文章


巨大なセンスです
富士山がきれい

【文字だけ】横から出るパターン

➀JAVAを記入

  1. 外観
  2. テーマ編集
  3. header.php

header.phpを開いてこの記述を探す。

<?php wp_head(); ?>

そのすぐ真下に☟をコピー&ペーストし、ファイルを保存

<script type="text/javascript">
jQuery(function($){
  $('.fuwa p').addClass('move');
  $(window).scroll(function(){
    $(".fuwa").each(function(){
      var imgPos = $(this).offset().top;    
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/5){
        $(this).find("p").removeClass('move');
      } else {
        $(this).find("p").addClass('move');
      }
    });
  });
});
</script>

➁cssを記入

  1. 外観
  2. カスタマイズ
  3. 追加CSS

☟を追加CSSにコピー&ペーストし、ファイルを保存する

.fuwa p {
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.fuwa p.move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}

.fuwa p {
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.fuwa p.move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}

➂htmlを記入

☟で写真や文章を囲う。<p></p>を必ず入れる。閉じtagの</section>を入れること

<section class="fuwa">
<p>
ここに文章
</p>
</section>

➃結果

見出し

文章

 

巨大なセンスです

富士山がきれい
富士山がきれい
富士山がきれい
富士山がきれい富士山がきれい
富士山がきれい
富士山がきれい

おまけ

☟を追加CSSにコピー&ペーストし、ファイルを保存するとファーストビューがふわっとなる

body {
animation: fadeIn 3s ease 0s 1 normal;
-webkit-animation: fadeIn 4s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

こうなる
https://matsueku-eyelash-fujiyoshida.net/