備忘録8〜カッコよくテキストや画像を出したい

ちょっとおしゃれなサイトでよく見る、黒い帯が出てなくなるとテキストや画像が出てくるやつあるじゃないですか

実装したくて色々調べてみました。

うーん、動くやつの画面撮るの難しいです・・・

伝わったと信じて、実装に必要な物を紹介します。

Contents

1. プラグイン「Block Reveal Effects」を用意します。
- 1.1. 必要なファイルを読み込む
- 1.2. オプション
2. 複数箇所の設置・・・
- 2.1. 関連

プラグイン「Block Reveal Effects」を用意します。

まずは以下のページの「Download source」から一式ダウンロード可能です。

Block Reveal Effects

必要なファイルを読み込む

この３つが必要です。

<script src="js/anime.min.js"></script>
<script src="js/scrollMonitor.js"></script>
<script src="js/main.js"></script>

WordPressで子テーマのfunction.phpに書き込める場合は、以下のように入れてもいいと思います。

  // inview の読み込み 
function add_scripts() {
 	wp_enqueue_script( 'anime', get_home_url() . '/js/anime.min.js', array( 'jquery' ), '20210211', true );
 	wp_enqueue_script( 'main', get_home_url() . '/js/main.js', array( 'jquery' ), '20210211', true );
 	wp_enqueue_script( 'scrollMonitor', get_home_url() . '/js/scrollMonitor.js', array( 'jquery' ), '20210211', true );
	
}
add_action('wp_print_scripts', 'add_scripts');

?>

HTML

 <div id="kanban" class="block-revealer__element">
　　　<img src="https://www.peop.jp/wp-content/uploads/2021/02/peop_logo-710x169.png">
 </div>

今回は、画像を出したいのでこんな感じにしてます。idが必要なので適当に入れます。（id="kanban"のところです)

CSS　idの方に指定しても大丈夫ですが、複数箇所設置を想定してclassにしてます。

.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

javascriptも必要なので

 $(function() {
  setTimeout(init, 10);
  function init() {  
 var scrollElemToWatch_1 = document.getElementById('kanban',-100),//先程のHTMLで書いたidを指定します。
    watcher_1 = scrollMonitor.create(scrollElemToWatch_1), // 監視領域を#kanbanに設定
    rev1 = new RevealFx(scrollElemToWatch_1, {
      revealSettings : {
        bgcolor: '#000000',//黒い背景が出てきます。色は好きなのものに変更してください
	delay: 500,//動作を遅らせる時間
        duration: 1000,     //エフェクトの速度　これで１秒です
	easing:'easeInOutCirc',
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
        }
      }
    });
	      
    watcher_1.enterViewport(function() { // 監視領域に入ったタイミングでアニメーション実行
      rev1.reveal();
     
      //watcher_1.destroy(); 一度きりならここのコメントと「//」を消してください
    });  
  }