Currently, I am in the process of enhancing the transition from my intro page to my home page. You can view the current setup at . I have implemented smoothstate.js for this purpose, but I am facing issues with achieving a seamless transition between pages. My suspicion is that the use of images as background may be causing the problem, as it deviates from the typical demos. To validate this assumption, I am seeking assistance here. Could Bootstrap be playing a role in this?
I have shared the code snippet below. Additionally, I experimented with reveal.js, although its functionality differs slightly from what I'm aiming for – incorporating smooth transitions.
Your guidance and support are highly valued.
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});.intro {
background: url(img/headerbg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100vh;
}
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
.inner {
padding: 30px;
}
.cover {
padding: 0 20px;
} <div id="main" class="m-scene">
<div class="scene_element scene_element--fadeinright">
<div class="intro">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<a class="center-block" href="newhome.html" data-transition="fade"><img class="img-responsive" src="img/Bang_logo.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>