ページの一部を一定期間非表示にする方法

VSL 販売ページを作成中で、ビデオだけを数分間表示したいですか?購入ボタンやページ要素をしばらく非表示にしたいですか?この記事では、簡単な解決策を紹介します。

おそらく正しい用語を表現していないために、インターネット上でこれほど単純なものを見つけるのがどれほど難しいかは信じられないほどです.非常に単純なことを実現するためのプラグインや巨大なコードに出くわすことがあります。

ここで必要なのは、CSS 要素を非表示にして、一定期間後にのみ表示することです。これは、4 行未満の単純な Javascript で簡単に作成できます。

要素を数分間非表示にする方法は?

最初に理解する必要があるのは、どの要素を非表示にするかです。ビデオだけを残してページのほぼ全体を隠したい場合は、HTML で DIV を作成し、選択した CSS クラスを配置して、ページの下部で閉じます。

.classname {display:none;}

WordPress ブロック エディターを使用している場合は、各ブロックの詳細設定に移動して CSS クラスを設定することで、要素を簡単に非表示にすることもできます。

CSS クラスを選択して非表示にする要素に追加したら、ヘッダーに Javascript を追加する必要があります。これはすべて、使用しているテーマまたはプラグインによって異なります。

ヘッダーに次のコードを追加します。

<script>setTimeout(function() {
  $('.classname').show()
}, 400000);
</script>

ClassName には、非表示にするクラスの名前を入力します。数値 400000 で、要素が表示されるまでの待機時間を決定します。ミリ秒程度です。

1000 ごとに合計 1 秒あります。したがって、コードで見つかった 400000 は約 6 分に相当します。この情報を使用して、希望する時間を計算できます。

要素またはページの半分を一定期間非表示にするのがいかに簡単かがわかりますか?シンプルなコードで、VSL や販売ページなど、注目したいものを作成するのに最適です。