CODEWITHSUNDEEP
javascriptcssuser-interfacetransitionfadein
echoes-in-eternity
echoes-in-eternity

Reputation: 3

Image page transition

Does anyone have any idea how to have an image transition to another page without re-loading. There is a good example of this on http://nahelmoussi.com/ .

When you click on a case study image, the image gets bigger and stays on the page.

I know you could use CSS Transitions for the animation but what I'm confused about is how you load a whole new page (different page for SEO) and make it so the image never looks like it's reloading?

Upvotes: 0

Views: 1171

Answers (1)

Fred Gandt
Fred Gandt

Reputation: 4312

history.pushState()

The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

And AJAX

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

After animating the image, we can update the browser's history by appending a new location, and use AJAX to fetch the new content.

Manipulating the history allows that the user can navigate back and forth in the same way they would if they had navigated to a new location the traditional way.

We can use AJAX to fetch new data, and optionally change parts or all of the page content to show this new data.

The effect of the combined methods is that after clicking the image:

  • The image expands.
  • The rest of the content is either hidden or overwritten.
  • New data is fetched.
  • The new data is displayed.
  • The history is updated.
  • It appears to the user that they have navigated to a new location (and their browser history will show that they did), but that the image they originally clicked remained on their screen at all times.

An unrefined and basic demo:

Although not fully functional, this will demonstrate the fundamentals of the process if served by a localhost. The scope of the question is too wide for a narrow demo, and a wide enough demo to show the full functionality would require building an entire demonstration website.

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
    <script async>
      ( function( W, D ) {
        var handlePopstate = function( evt ) {
            // handle history navigation through evt.state
            console.log( evt.state );
          },
          getNewContentAndUpdateHistory = function( d, p ) {
            // create and call ajax for new content using destination URL
            console.log( d );
            // update the browser's history and the history.state
            history.pushState( { ps: p }, "", d );
            // handle history navigation through history.state
            console.log( history.state );
          },
          init = function() {
            D.addEventListener( "click", function( evt ) {
              var trg = evt.target;
              if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
                var dest = trg.getAttribute( "data-href" ),
                  page = /(\d+)/.exec( dest )[ 1 ];
                trg.classList.add( "bg", "_" + page );
                // load, parse and display new content and update the browser's history
                getNewContentAndUpdateHistory( dest, page );
              }
            }, false );
          };
        if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
          init();
        } else {
          W.addEventListener( "DOMContentLoaded", init, false );
        }
        W.addEventListener( "popstate", handlePopstate, false );
      } ( window, document ) );
    </script>
    <style>
      html {
        font-size: 10px;
      }
      body {
        font-family: sans-serif;
        font-size: 1.6rem;
        margin: 0;
        padding: 0;
      }
      img {
        position: relative;
        display: block;
        width: 400px;
        height: 200px;
        cursor: pointer;
        transition: width 1s, height 1s;
      }
      .bg {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        cursor: default;
      }
      ._2 {
        z-index: 2;
      }
      ._3 {
        z-index: 3;
      }
      ._4 {
        z-index: 4;
      }
    </style>
  </head>
  <body>
    <h1>Foo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
  </body>
</html>

Upvotes: 2

Related Questions