When tackling your question, I typically approach it by stacking divs using the position: absolute property on top of each other. By toggling the active class, the visible element can be identified - ensuring that this class has a higher z-index value than the stacked elements. To set the initially visible element in HTML, simply add the active class to it. Subsequently, utilize JS to toggle the active class for elements. In my JS implementation:
jQuery: https://jquery.com/download/
jQuery Mouse Wheel Plugin: https://github.com/jquery/jquery-mousewheel
HTML:
<div class="container">
<div class="vertically-stacked active"> //first visible banner
<h1>Hello</h1>
</div>
<div class="vertically-stacked"> //visible only if class active is added
<h1>World</h1>
</div>
</div>
You may have an infinite number of vertically-stacked elements.
CSS:
.container //container of vertically stacked elements
{
position: relative //or absolute but not static
}
.vertically-stacked
{
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .25s; //time which takes to switch the active element
-moz-transition: all .25s;
-o-transition: all .25s;
-webkit-transition: all .25s;
}
.vertically-stacked.active
{
opacity: 1;
z-index: 100;
}
JS:
$(document).on('mousewheel', function (e)
{
var $verticallyStacked = $('.vertically-stacked'),
oldActive = $verticallyStacked.index($('.vertically-stacked.active')),
newActive;
$verticallyStacked.eq(oldActive).removeClass('active');
if (e.deltaY < 0) //scroll down
{
newActive = oldActive + 1;
}
else //scroll up
{
newActive = oldActive - 1;
}
$verticallyStacked.eq(newActive).addClass('active');
});