Search code examples
javascriptjqueryjquery-waypoints

Waypoints JavaScript(Jquery)

I am developing a webpage and I wanted to know how to go about making animations based on where the page currently is.

What I mean is that : for example, the Markup below

<body>
    <div id = "header">
        <p> header content goes here</p>
    </div>


    <div id = "content">

        <div id = "first">
            <p>when I sroll into this region I want the background to darken up(and information appears) and an arrow to appear at the bottom showing prompting to scroll down</p>
        </div>

        <div id = "second">
            <p>when I sroll into this region I want the navbar to to change appearace and display info relative to that div only </p>
        </div>

        <div id = "third">
            <p>when I scroll into this region I want a another effect to occur</p>
        </div>

    </div>


    <div id = "footer">
        <p>footer content goes here</p>
    </div>
</body>

if the web page loads and I scroll into each of the three divs in the then i want to have a defined effect in action. How do I do I go about that in JavaScript(Jquery)? or if anyone knows of any good sources where i can learn this technique i will love to know

Thank you all

Solution

  • I had a similar issue recently. I found the free and open-source divPeek library to be excellent.

    https://github.com/davidhalford/DivPeek

    No need to reinvent the wheel, especially if it has already been invented! :)