0

I'm trying to create something similar this web page, where a video is used as the background and as the user scrolls up and down the text/background video change appropriately so as to tell a story.

Right now getting the video to play is about the only thing working. The video will load, and play, as intended. However the <div> elements are simply stacked below the video one by one. When the user clicks anywhere on the page, I'd like the text to scroll up, from the bottom, and finish scrolling once they reach the same position on the page as the previous text... however I don't think I'm using the .animate() function properly.

This seems like it'd be relatively easy to do, so here's my admittedly weak first attempt.

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.

NealR
  • 8,689
  • 51
  • 142
  • 274
  • What's the reason for the downvote/vote to close? – NealR Mar 23 '15 at 03:03
  • If I had to guess as to why you're getting downvoted, I would posit that it's because the question is very broad, you're using jQuery 1.11, and your attempt doesn't really show any effort nor knowledge of CSS positioning or transitions. Start with `position:absolute` or `position:fixed` in your CSS and see if you can get someplace from there. If not, update your post with your latest attempts; someone might be more likely to help if they have more of an idea of what you've tried and what you want, especially if you're using up-to-date code libraries. No guarantees, of course, but it's a start. – IronFlare Mar 23 '15 at 03:31
  • thanks for the comment. I'm able to get the original positioning how I want it. However, I have yet to be able to get the `.animate` method to move anything at this point. Updated the post. – NealR Mar 23 '15 at 03:38

1 Answers1

1

Your question isn't exactly new, it's just a bunch of questions in one really.

First of all - for your positioning, you'll be able to use plain CSS like you would with any DOM element. Tutorial on that are at W3Schools for example.

Scrolling to an Element using JQuery is answered in this stackoverflow-Question.

And another stackoverflow-question about moving a video by scrolling can be found here.

Community
  • 1
  • 1
Kevin Grabher
  • 369
  • 4
  • 17