Parallax-scrolling-in-web-design-jquery-techniques
jQueryテクニック
前の章で、JavaScriptライブラリを使用するとWebサイトに良い効果がどのように追加されるかを理解しました。 JavaScriptをjQueryと組み合わせると、驚異的な柔軟性が得られ、視差スクロールをWebサイトに簡単に追加できます。
この章では、視差スクロール効果を追加する3つのjQueryプラグインを見ていきます。 前のJavaScriptの章で参照した方法と同様に、HTMLコードでjQuery参照を使用して、強力なjQuery視差スクロールを作成します。
jQueryプラグインについて注意すべき重要な点は、プラグインが頻繁に更新されないため、視差スクロール用のプラグインの使用を開始する前に調査を行うことです。
Parallax.jsを使用した単純な視差スクロール
Parallax.js jQueryプラグインを使用すると、手間をかけずに視差スクロール効果を作成できます。 jQueryプラグインを検討するには、ブートストラップなどのライブラリをハイエンドで含める必要があります。 この章では、コードにHTML5タグがあることに注意してください。
以下に示すHTMLファイルを見てみましょう-
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>コードの分析
上記のコードスニペットは、2つの画像とサンプルテキストの間にあるページのコードを示しています。
ご覧のとおり、コードは <！DOCTYPE html> で始まります。これは、コードがHTML5ベースであることをブラウザーに知らせる典型的な方法です。
行4から6 *の *<meta> タグは、機械解釈用のコードを示しています。 このコードの影響を確認することはできません。 ここで注意すべき重要なことは、 meta タグを使用すると、Web開発者は表示されているデータを高度に制御できることです。
また、8行目と9行目では、Bootstrapに加えてCSSスタイルシートが含まれています。 特定のフォントフェイスとタイポグラフィでは、Bootstrapは広く使用されているライブラリです。
行10および11 *はjQueryおよびParallax.jsライブラリを処理します。 画像の視差効果を制御するために、Parallax.jsを含めることが重要です。 * line-*の div で data-parallax プロパティを見つけることができます。これは、必要な視差効果のためにparallax.jsライブラリを呼び出すのに十分です。
視差効果は、行21 *および*行40 *のコードで見ることができます。 parallax.jsでこの効果を実現する重要なプロパティは、 *_ data-parallax、data-image-src、data-natural-width、data-natural-height_ です。
CSSファイルでは、提供するプロパティは1つだけです。 それは以下に示すとおりです-
.parallax-container {
height: 500px;
width: 100%;
}上記のHTMLコードでは、CSSファイルの特定の構造を作成しました。 css というフォルダーがあり、 bootstrap.min.css および style.css というCSSファイルがあります。
すべてが文書で完了したら、以下に示すように視差効果を見ることができます-
Parallaxator jQueryプラグインの使用
Parallaxatorプラグインは、最高のjQuery視差スクロール効果を提供し、使いやすいです。 このリンクからParallaxatorプラグイン、そのCSSおよびJSファイルをダウンロードできます-https://github.com/QODIO/parallaxator#example-on-usage[Parallaxator GitHub]。
CSSファイルとJSファイルをダウンロードしたら、以下に示すコードを使用してHTMLコードを作成できます。
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>コードの分析
パララックス効果は、各imgタグで提供されるparallax_childクラスによって提供されます。 parallax_childは、以下で提供されるCSSおよびJSファイルに接続されています。
parallaxatorプラグインが機能するように、fm.parallaxator.jquery.cssとfm.parallaxator.jquery.jsが含まれています。 これらのファイルは、HTMLファイルと同じディレクトリで使用できる必要があります。
CSSのコードは以下のとおりです-
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}上記のコードの結果として、視差効果を見ることができます。
視差スクロール用のStellar.js jQueryプラグイン
Stellar.jsは、視差jQueryプラグインのリストへの追加です。 もはや維持されていませんが、安定したビルドを使用している開発者は、視差スクロール効果を簡単に使用できます。 jQueryの最新バージョンと互換性があり、実装が簡単です。
Stellar.jsプラグインの公式Webサイトから最新のjquery.stellar.jsをダウンロードする必要があります。 ダウンロードしたら、HTMLおよびCSSファイルと同じフォルダーにこのプラグインファイルを作成します。
HTMLコードを見てみましょう。
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>コードの分析
Stellar.jsが機能するように、jQueryプラグインが line 6 で参照された直後にjquery.stellar.jsライブラリを含めました。
Stellar視差の関数は、スクリプトタグで line 8からline 15 まで呼び出されます。 プロパティ data-stellar-background-ratio を使用して、表示される画像のオフセットを設定しています。 これは、*行19,20,21および22 *で行われます。
CSSコードは以下のとおりです-
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}両方のファイルが作成され、stellar.jsプラグインファイルが同じフォルダに含まれると、以下のスクリーンショットに示すように効果を確認できるはずです-
