I am attempting to replicate a similar effect as shown in this example:
The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections.
I have searched for examples and studied the documentation of the plugin but have not found any information on achieving this specific feature.
Currently, all I can do is add the same background image to all slides, but during transition between slides, the change of background images is noticeable.
I attempted to create a new div with an ID placed above the slides, however, this method did not yield the desired result.
DEMO https://jsfiddle.net/55euzL32/2/
HTML
<div id="fullpage">
<div id="bg"></div>
<section id="section1" class="section">
<div class="container">
<div class="col-md-12 text-center">
<h1>Bootstrap 3 + fullpage.js<br>
<small>A working example of the pairing.</small>
</h1>
<p>Scroll down to move from section to section. The vertical pagination will adjust accordingly. This is powered by <a href="https://alvarotrigo.com/fullPage/">fullpage.js</a> and is pretty impressive.</p>
</div>
</div>
</section>
<section id="section2" class="section">
<div class="container">
<div class="col-md-12 text-center">
<p>Section 2</p>
</div>
</div>
</section>
<section id="section3" class="section">
<div class="container">
<div class="col-md-12 text-center">
<p>Section 3</p>
</div>
</div>
</section>
</div>
CSS
#bg {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url('../img/bg/bg.jpg') no-repeat 50% 50%;
background-size: cover;
z-index: -3;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
JS
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
animateAnchor: true,
parallax: true,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
lazyLoading: true
});
});