Is there a way to adjust the code below to create a blur effect rather than a fade when transitioning between horizontal slides? I want the movement from one slide to another to feel like moving from one "room" to another, so a blur or similar effect would be more suitable than fadeIn. Please refer to this codepen for reference.
var SCROLLING_SPEED = 200;
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors:['section1'],
// fullPage.js settings for fading-in slides instead of scrolling them.
// Disable or nullify scrolling of slides
// Hide the slides container before the next slide loads
onSlideLeave: function(anchorLink, index, slideIndex, direction) {
$.fn.fullpage.setScrollingSpeed(0);
$('.fp-section').find('.fp-slidesContainer').hide();
},
// Display the slides container by fading it in after the next slide has been loaded.
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
$('.fp-section').find('.fp-slidesContainer').fadeIn(800);
$.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED);
}
});
});
$(document).ready(function(){
$(".button1").click(function() {
$.fn.fullpage.moveTo('section1', 1);
$('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
});
$(".button2").click(function() {
$.fn.fullpage.moveTo('section1', 2);
$('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
});
$(".button3").click(function() {
$.fn.fullpage.moveTo('section1', 3);
$('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
});
}); /* Header text styling
* --------------------------------------- */
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
margin:0;
padding:0;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}
/* Background styles for sections and slides
* --------------------------------------- */
.section{
background-size: cover;
}
.slide{
background-size: cover;
}
/*Adding background images for the slides
* --------------------------------------- */
#slide1{
background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg2.jpg);
padding: 6% 0 0 0;
}
#slide2, #slide3, #slide4{
background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg5.jpg);
padding: 6% 0 0 0;
}
/* Styling for the bottom menu
* --------------------------------------- */
#infoMenu li a {
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="fullpage">
<div class="section" id="section1">
<div class="slide" id="slide1">
<h1>Index</h1>
<button class="button1">
Slide 1
</button>
<button class="button2">
Slide 2
</button>
<button class="button3">
Slide 3
</button>
</div>
<div class="slide" id="slide2"><h1>First Slide</h1></div>
<div class="slide" id="slide3"><h1>Second Slide</h1></div>
<div class="slide" id="slide4"><h1>Third Slide</h1></div>
</div>
</div>