My goal is to craft a webpage reminiscent of this, utilizing a video background that seamlessly transitions as the user scrolls to narrate a story.
Currently, I've managed to get the video to play flawlessly. However, the <div> elements are only displayed one after another stacked below the video. I envision the text smoothly scrolling up from the bottom when the user clicks anywhere on the page until reaching the same position as the previous text, but my implementation of the .animate() function seems flawed.
While this task seems straightforward, my initial attempt is lacking.
fiddle: http://jsfiddle.net/f06w76bv/
<!DOCTYPE html>
<html>
<head>
<style>
.textConatiner{
position: absolute;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
left:10%;
}
video.bgvid{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(TurbineStill.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="TurbineStill.png" class="bgvid">
<source src="Turbine.mp4" type="video/mp4">
</video>
<section>
<div class="textConatiner" id="one" style="top:50%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
<section>
<div class="textConatiner" id="two" style="top:150%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).click(function () {
var myDiv = $("#two");
var scrollto = myDiv.offset().top + (myDiv.height() / 2);
myDiv.animate({ scrollTop: scrollTo }, 1000);
});
});
</script>
</html>
EDIT
By adding the position to the div container I'm able to get the original div positions exactly where I want them when the page loads. However, I still cannot get the animate method to move the second div into the page from below.