Does anyone know how to edit the below code to make the transition between horizontal slides more like a blur rather than a fade? Im trying to make it feel like you are leaving a "room" and entering another "room" when you scroll between horizontal slides, so a blur effect or anything similar would work better than fadeIn. See this codepen.
var SCROLLING_SPEED = 200;
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors:['section1'],
// fullPage.js settings for fading-in slides insead 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
});
}); /* Style for our header texts
* --------------------------------------- */
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
margin:0;
padding:0;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}
/* Backgrounds will cover all the section
* --------------------------------------- */
.section{
background-size: cover;
}
.slide{
background-size: cover;
}
/*Adding background 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;
}
/* 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>