CODEWITHSUNDEEP
javascriptjqueryhtml
user6002037
user6002037

Reputation:

change content of html on scroll

I am trying to achieve the same effect as this website.

You will notice that the url changes and the content changes when you scroll, however when I inspect the requests being made in the console I cannot see a new AJAX request being made to get the new html content. I cannot figure out how this content is being loaded.

It appears the "page change" is just a javascript scrolling effect, and the javascript also changes the URL. If you notice, go to the about section and refresh that url, and the page isn't found.

Any guidance on how this can be achieved would be greatly appreciated. I have read through the javascript source code on the page, but as it is minified I am still struggling to understand how it all works. Perhaps I should be using html5's history state.

My current project is set up like this:

enter image description here

The index.html file looks like this:

<body>       
    <header>
        <img src="homeLogo.png">
    </header>
    <div id="scene">
        <h3>Home page</h3>
        <div class="bgImage"></div>
    </div>
    <footer>
        Footer 
    </footer>
</body>

the tress/index.html file looks like this:

    <body>       
        <header>
            <img src="homeLogo.png">
        </header>
            <div id="scene">
               <h3>Trees</h3>
                 <div class="bgImage trees"></div>
           </div>
        </div>
        <footer>
            Footer 
        </footer>
    </body>

urban/index.html is the same as tress/index.html apart from the div within the div with id scene.

Based on how the project is set up I am wondering how I can update the content page with the different html files.

Upvotes: 0

Views: 2111

Answers (1)

rupps
rupps

Reputation: 9887

Take a look at the History API, specifically at the function:

   window.history.pushState({ your_data:"whatever"}, "title", newUrl);

https://developer.mozilla.org/en-US/docs/Web/API/History_API

There are excellent third party libraries that can help you easily build a cross-browser solution, although modern browsers follow the standard decently.

The rest of your problem is just dynamically adding content, that may come from an ajax request or not.

Upvotes: 1

Related Questions