HPのアニメーション設定方法
かなり人気が高いというそれっぽいアニメーションの設定方法まとめ。必要に応じて活用してください。
下から出るパターン（現在は必要なし）
➀JAVAを記入
第1ステップ、JAVAというものをheader.phpにコピペしていきます。
- 外観
- テーマ編集
- 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を記入
第２ステップはCSSに追記します。
CSSはカスタマイズの【追記CSS】から変更できるので覚えておくと便利です。
- 外観
- カスタマイズ
- 追加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>
➃結果
見出し
見出しだけ<section><h2>見出し<h2></section>このように囲うと見出しだけふわっと出るようになります。
<section>写真</section>
こうすると写真だけふわっと出したりすることも可能です。
ふわっとさせたい範囲は好きに設定してください
見だし＋文章＋写真など</section>で閉じる場所を調整すれば範囲は好きに設定できます。
嗚呼、富士山がきれいダナー
【文字だけ】横から出るパターン（お問い合わせのみ）
➀JAVAを記入
手順は基本的に同じです。
- 外観
- テーマ編集
- 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を記入
- 外観
- カスタマイズ
- 追加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://salon-beauty.net/
Follow me!
