マウスを下にスクロールすると、コンテンツがスライド上に上がるParallaxスクロール効果（javascript / jQuery）

Last Updated：2023年07月17日| | 4のコメント

いくつかの WordPress テーマでマウスを下にスクロールすると、コンテンツ領域がスライド上に上がる効果を実装する場合を見たことがあるでしょう。 このような効果をParallaxスクロールと呼びます。 仮に Salientという人気のある WordPress テーマのデモページでフロントページにスライドがフルページで出て、マウスを下にスクロールすると下に隠されていたコンテンツ領域がスライド上に上がります。

マウスを下にスクロールすると、コンテンツがスライド上に上がるParallaxスクロール効果（javascript / jQuery）

マウスを下にスクロール時の内容が上に上がる効果

このような効果が意外に印象的な感じを与えますね。 Salient デモページは、スライドに多くの効果が含まれて行って、多少気を取られますが、よく使用する場合は良い効果を出すことができるようになります。

そして WordPress テーマの中で最も多く販売されている AVADA テーマでも同様の効果を実現することができます（Fusion Sliderで設定可能）。

Avada Demo - WordPress テーマ Avada

エレメンページビルダーを使用しても同様の効果を実現できます。

これらの効果は、jQuery / javascriptを使用して同様に実装することができます。 次は、マウスをスクロールするときに下にあるdiv部分が上にあるdivを覆いながら上る効果を出すスクリプトです。 つまり、上部div部分にスライドを配置し、下div部分にコンテンツを配置すると、 Salientのホームスライダー（Home Slider）テンプレートと同様の効果を出すことができます。

HTML コード：

<div id="slider"></div>
<div id="overflow"></div>

cssコード：

#slider{
width: 100%;
background-color: red;
height: 100%;
position: fixed;
}
#overflow{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

javascript / jQueryのスクリプト：

var ovf, slider;
$(function(){
ovf = this.getElementById("overflow");
slider = this.getElementById("slider");
winResize();
$(window).bind({resize: winResize, scroll: winScroll});
});
function winResize(){
ovf.style.top = slider.offsetHeight + "px";
}

function winScroll(){
var op = 1 - (window.pageYOffset / slider.offsetHeight);
slider.style.opacity = op;
}
// Source: stackoverflow.com

ここで、上記のスクリプトの デモを調べることができます。

メモ：

4のコメント

コメント

  1. こんにちは^^この機能（マウスを下にスクロールすると、コンテンツ領域がスライド上に上がる効果）チェムンに Salientテーマを購入したのよ。
    Salientテーマのデモの中で、この機能があることをすぐに使えば、簡単に使うことがイトゲトが、私が欲しいのデモには、この機能が実装されたページはありませんですよ。 まだテーマだけ購入し、デモインポートする前なのに、デモを購入しなければなら私の効果を実装することができますか？ ないニミョン、ビジュアルコンポーネントれ機能別にあるのか知りたいです。

    応答