An example of how to implement cool page transitions with jQuery.smoothState.js.
Last active
August 29, 2015 14:04
-
-
Save miguel-perez/6116d003c3e6fc3939de to your computer and use it in GitHub Desktop.
An example of page transitions with jQuery.smoothState.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" defer="defer"></script> | |
| <script src="jquery.smoothState.js" defer="defer"></script> | |
| <script src="functions.js" defer="defer"></script> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> | |
| <!-- Always force latest IE rendering engine or request Chrome Frame --> | |
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | |
| <!-- Use title if it's in the page YAML frontmatter --> | |
| <title> | |
| About - jQuery.smoothState.js | |
| </title> | |
| <link href="normalize.css" rel="stylesheet" type="text/css" /> | |
| <link href="all.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body class="getting-started" id="main"> | |
| <div class="m-detail-layout"> | |
| <div class="m-aside"> | |
| <h3 class="aside_title"> | |
| <a href="index.html" class="m-button"> | |
| <span class="txt">← jQuery.smoothState.js</span> | |
| </a> | |
| </h3> | |
| </div> | |
| <div class="m-right-panel m-page"> | |
| <div class="right-panel_top"> | |
| <div class="m-header"> | |
| <div class="m-breadcrumb" itemprop="breadcrumb"> | |
| <a class="breadcrumb_link" href="index.html">Home</a> → | |
| <h1 class="m-type-display-1"> | |
| Alternate Page | |
| </h1> | |
| </div> | |
| <p class="m-type-sub-heading-1">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p> | |
| </div> | |
| </div> | |
| <div class="m-segment"> | |
| <h2 class="m-type-heading-1">Pellentesque</h2> | |
| <div class="segment_content"> | |
| <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> | |
| <ul> | |
| <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> | |
| <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> | |
| <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> | |
| <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="m-segment"> | |
| <h2 class="m-type-heading-1">Quisque a lectus</h2> | |
| <div class="segment_content"> | |
| <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> | |
| <h3>Header Level 3</h3> | |
| <ol> | |
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | |
| <li>Aliquam tincidunt mauris eu risus.</li> | |
| </ol> | |
| <blockquote> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> | |
| </blockquote> | |
| <h3>Header Level 3</h3> | |
| <ul> | |
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | |
| <li>Aliquam tincidunt mauris eu risus.</li> | |
| </ul> | |
| <pre><code> | |
| #header h1 a { | |
| display: block; | |
| width: 300px; | |
| height: 80px; | |
| } | |
| </code></pre> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #009688; | |
| font-family: 'Roboto', sans-serif; | |
| color: #eceff1; | |
| line-height: 1.5; } | |
| a { | |
| color: #3f51b5; | |
| text-decoration: none; | |
| transition: color 0.15s ease-in; } | |
| a:hover { | |
| color: #1a237e; } | |
| a:active, a:focus { | |
| color: #009688; } | |
| a:visited { | |
| color: #673ab7; } | |
| code { | |
| font-weight: bold; } | |
| .m-type-display-1 { | |
| font-size: 4em; | |
| font-weight: 300; | |
| margin: 16px 0; } | |
| .m-type-sub-heading-1 { | |
| font-size: 1.13em; | |
| font-weight: 400; | |
| margin: 16px 0; } | |
| .m-type-heading-1 { | |
| font-size: 1.5em; | |
| font-weight: 400; | |
| margin: 16px 0; } | |
| .m-header { | |
| position: relative; | |
| padding: 8.5em 8.5em 4.25em; | |
| max-width: 40em; } | |
| .m-header .header_actions { | |
| margin: 1.25em 0 0; } | |
| .m-header .header_link { | |
| margin-right: 1.25em; } | |
| .m-button { | |
| display: inline-block; | |
| padding: 0.5em; | |
| border: 1px solid #eceff1; | |
| overflow: hidden; | |
| transition: background-color 0.15s ease-in; } | |
| .m-button .txt { | |
| color: #eceff1; | |
| transition: color 0.15s ease-in; } | |
| .m-button:hover { | |
| background-color: #eceff1; } | |
| .m-button:hover .ico { | |
| fill: #009688; } | |
| .m-button:hover .txt { | |
| color: #009688; } | |
| .m-page { | |
| background-color: #eceff1; | |
| color: #263238; } | |
| .m-segment { | |
| padding: 2.25em 8.5em; | |
| border-bottom: 1px solid #cfd8dc; } | |
| .m-segment .segment_content { | |
| max-width: 40em; } | |
| .m-segment .segment_description { | |
| margin: 16px 0; } | |
| .m-aside-segment { | |
| display: none; | |
| padding: 2.25em; | |
| border-bottom: 1px solid #f8bbd0; } | |
| .m-aside-segment .segment_description { | |
| margin: 16px 0; } | |
| .m-landing-layout .m-type-sub-heading-1 { | |
| color: #b2dfdb; } | |
| .m-detail-layout { | |
| padding-left: 20%; } | |
| .m-detail-layout .m-aside { | |
| position: absolute; | |
| left: 0; | |
| width: 20%; } | |
| .m-detail-layout .m-aside .aside_title { | |
| margin: 16px; | |
| font-weight: normal; | |
| position: fixed; } | |
| .m-detail-layout .m-aside .m-button { | |
| display: block; } | |
| .m-right-panel .m-header, | |
| .m-right-panel .m-segment .segment_content { | |
| max-width: 43em; } | |
| .m-right-panel .right-panel_top { | |
| border-bottom: 1px solid #cfd8dc; } | |
| .m-breadcrumb .breadcrumb_link { | |
| position: relative; | |
| top: -2px; | |
| font-size: 0.75em; } | |
| .m-breadcrumb .m-type-display-1 { | |
| margin-top: 0; } | |
| @-webkit-keyframes fadeIn { | |
| 0% { | |
| opacity: 0; } | |
| 100% { | |
| opacity: 1; } } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; } | |
| 100% { | |
| opacity: 1; } } | |
| @-webkit-keyframes fadeInLate { | |
| 0% { | |
| opacity: 0; } | |
| 85% { | |
| opacity: 0; } | |
| 100% { | |
| opacity: 1; } } | |
| @keyframes fadeInLate { | |
| 0% { | |
| opacity: 0; } | |
| 80% { | |
| opacity: 0; } | |
| 100% { | |
| opacity: 1; } } | |
| @-webkit-keyframes moveToTop { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(100%); } | |
| 80% { | |
| -webkit-transform: translateY(10%); } | |
| 85% { | |
| -webkit-transform: translateY(5%); } | |
| 90% { | |
| -webkit-transform: translateY(4%); } | |
| 95% { | |
| -webkit-transform: translateY(1%); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0%); } } | |
| @keyframes moveToTop { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(100%); } | |
| 80% { | |
| transform: translateY(10%); } | |
| 85% { | |
| transform: translateY(5%); } | |
| 90% { | |
| transform: translateY(4%); } | |
| 95% { | |
| transform: translateY(1%); } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0%); } } | |
| @-webkit-keyframes moveToLeft { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(100%); } | |
| 80% { | |
| -webkit-transform: translateX(10%); } | |
| 85% { | |
| -webkit-transform: translateX(5%); } | |
| 90% { | |
| -webkit-transform: translateX(4%); } | |
| 95% { | |
| -webkit-transform: translateX(1%); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0%); } } | |
| @keyframes moveToLeft { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(100%); } | |
| 80% { | |
| transform: translateX(10%); } | |
| 85% { | |
| transform: translateX(5%); } | |
| 90% { | |
| transform: translateX(4%); } | |
| 95% { | |
| transform: translateX(1%); } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0%); } } | |
| .m-landing-layout .m-header { | |
| -webkit-animation: fadeIn 0.4s ease-in; | |
| animation: fadeIn 0.4s ease-in; } | |
| .m-landing-layout .m-page { | |
| -webkit-animation: moveToTop 0.4s ease-in; | |
| animation: moveToTop 0.4s ease-in; } | |
| .is-unloading .m-landing-layout .m-header { | |
| -webkit-animation: fadeIn 0.4s ease-in; | |
| -webkit-animation-direction: reverse; | |
| animation: fadeIn 0.4s ease-in; | |
| animation-direction: reverse; } | |
| .is-unloading .m-landing-layout .m-page { | |
| -webkit-animation: moveToTop 0.4s ease-in; | |
| -webkit-animation-direction: reverse; | |
| animation: moveToTop 0.4s ease-in; | |
| animation-direction: reverse; } | |
| .m-detail-layout .m-right-panel { | |
| -webkit-animation: moveToLeft 0.4s ease-in; | |
| animation: moveToLeft 0.4s ease-in; } | |
| .m-detail-layout .m-aside { | |
| -webkit-animation: fadeInLate 0.4s ease-in; | |
| animation: fadeInLate 0.4s ease-in; } | |
| .is-unloading .m-detail-layout .m-right-panel { | |
| -webkit-animation: moveToLeft 0.4s ease-in; | |
| -webkit-animation-direction: reverse; | |
| animation: moveToLeft 0.4s ease-in; | |
| animation-direction: reverse; } | |
| .is-unloading .m-detail-layout .m-aside { | |
| -webkit-animation: fadeInLate 0.4s ease-in; | |
| -webkit-animation-direction: reverse; | |
| animation: fadeInLate 0.4s ease-in; | |
| animation-direction: reverse; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function ($) { | |
| 'use strict'; | |
| var $main = $('#main'), | |
| $body = $('body'); | |
| $main.smoothState({ | |
| renderFrame: [ | |
| function ($content, $container) { | |
| $container.addClass('is-unloading'); | |
| return $container.html(); | |
| }, | |
| function ($content, $container) { | |
| $container.removeClass('is-unloading'); | |
| return $('<div/>').append($content).html(); | |
| } | |
| ], | |
| frameDelay: 400, | |
| prefetch: true, | |
| onBefore: function () { | |
| $body.animate({ | |
| scrollTop: 0 | |
| }); | |
| } | |
| }); | |
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" defer="defer"></script> | |
| <script src="jquery.smoothState.js" defer="defer"></script> | |
| <script src="functions.js" defer="defer"></script> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> | |
| <!-- Always force latest IE rendering engine or request Chrome Frame --> | |
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | |
| <!-- Use title if it's in the page YAML frontmatter --> | |
| <title> | |
| Home - jQuery.smoothState.js | |
| </title> | |
| <link href="normalize.css" rel="stylesheet" type="text/css" /> | |
| <link href="all.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body class="index" id="main"> | |
| <div class="m-landing-layout"> | |
| <div class="m-header"> | |
| <h1 class="m-type-display-1">jquery.smoothState.js</h1> | |
| <p class="m-type-sub-heading-1">We've accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.</p> | |
| <p class="header_actions"> | |
| <a class="header_link m-button" href="https://github.com/miguel-perez/jquery.smoothState.js"> | |
| <span class="txt">See project on Github</span> | |
| </a> | |
| <a class="header_link m-button" href="https://github.com/miguel-perez/jquery.smoothState.js"> | |
| <span class="txt">Mention on Twitter</span> | |
| </a> | |
| </p> | |
| </div> | |
| <div class="m-page"> | |
| <div class="m-segment"> | |
| <div class="segment_content"> | |
| <h2 class="m-type-heading-1"><a href="about.html">Alternate Page</a></h2> | |
| <p class="description">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p> | |
| </div> | |
| </div> | |
| <div class="m-segment"> | |
| <div class="segment_content"> | |
| <h2 class="m-type-heading-1"><a href="about.html">Alternate Page</a></h2> | |
| <p class="segment_description">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p> | |
| </div> | |
| </div> | |
| <div class="m-segment"> | |
| <div class="segment_content"> | |
| <h2 class="m-type-heading-1"><a href="about.html">Alternate Page</a></h2> | |
| <p class="segment_description">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, Miguel, I have a question (not directly related to the above cool page transition).
I'm trying to integrate the plugin into Wordpress template, everything works fine, and I love it.
However I have a problem with flex slider plugin, I have some slider on home page, which uses some scrolling images in an unordered list(
). On initial page load the slider appears just fine and everything works. However on second and consequence loads everything as content appears well, except the slider, which is gone (the source HTML code shows that it is actually there, but not rendered by some reason). There is no gap in content on place of the slider, but it is missing completely (tested on couple of browsers - Chrome, Firefox and Opera).
This leads me to the conclusion that the issue may be some sort of initialization problem with the slider, or maybe I have to pass some parameters to the smoothState plugin to tell that I want slider to be re-initialized on page load...?
I use plugin as plain, with no additional options passed (as in basic example).
Can you help me with that?
Thanks in advance :)