jQuery

【jQuery】パララックススクロール効果をウェブサイトで実行するプラグインMcParallax

June 5, 2018
mcparallax

McParallaxは、パララックススクロール効果をウェブサイトで実行するためのjQueryプラグインです。

mcparallax

Getting Started

mcparallax.min.jsとjQueryをインクルード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/mcparallax.min.js"></script>

要素を追加

<div class="mcparallax" data-image-src="/path/to/image.jpg"></div>

Example:

<section>
    <div class="mcparallax" data-image-src="/assets/images/image-par-03.jpg" data-speed="2"></div>

    <div class="container container-below-navbar text-white">
        <h1 class="display-3 text-center font-title font-bold pb-2">Text title</h1>
        <h3 class="text-center font-title font-light">Text description</h3>
        <h2 class="display-4 text-center font-title font-bold pb-2">Text subtitle</h2>
    </div>
</section>

.mcparallaxを使用してdata-speedで速度を設定します。このパラメータの値は、2〜10デフォルト値は2です。

MIT