├── .gitignore ├── README.md ├── assets └── js │ ├── script.min.js │ ├── script.min.js.map │ └── src │ └── script.js ├── functions.php └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | config.codekit 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### Envato Tuts+ Tutorial: [How to Integrate SmoothState.js Into a WordPress Theme](http://webdesign.tutsplus.com/tutorials/how-to-integrate-smoothstatejs-into-a-wordpress-theme--cms-26610) 4 | #### Instructor: Thoriq Firdaus 5 | 6 | In our previous tutorial, we used the History Web API within a static site to serve smooth page transitions. In this tutorial we’re going to take things to the next level, by applying what we learned in a WordPress website. There’ll be one crucial difference; we’ll leverage SmoothState.js instead of building our own from scratch. 7 | -------------------------------------------------------------------------------- /assets/js/script.min.js: -------------------------------------------------------------------------------- 1 | !function($){function n(){$("a").each(function(){-1===this.href.indexOf("/wp-admin/")&&-1===this.href.indexOf("/wp-login.php")||$(this).addClass("wp-link")})}$(function(){n();var t={anchors:"a",blacklist:".wp-link",onStart:{duration:280,render:function(n){n.addClass("slide-out")}},onAfter:function(t){n();var o=$(window.location.hash);if(0!==o.length){var i=o.offset().top;$("body, html").animate({scrollTop:i-60},{duration:280})}t.removeClass("slide-out")}};$("#page").smoothState(t)})}(jQuery); 2 | //# sourceMappingURL=./script.min.js.map -------------------------------------------------------------------------------- /assets/js/script.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["src/script.js"],"names":["$","addBlacklistClass","each","this","href","indexOf","addClass","settings","anchors","blacklist","onStart","duration","render","$container","onAfter","$hash","window","location","hash","length","offsetTop","offset","top","animate","scrollTop","removeClass","smoothState","jQuery"],"mappings":"CAAA,SAAYA,GAEX,QAASC,KACRD,EAAG,KAAME,KAAM,WAC2B,KAApCC,KAAKC,KAAKC,QAAQ,eACkB,KAAvCF,KAAKC,KAAKC,QAAQ,kBACnBL,EAAGG,MAAOG,SAAU,aAKvBN,EAAG,WAEFC,GAEA,IAAIM,IACHC,QAAS,IACTC,UAAW,WACXC,SACCC,SAAU,IACVC,OAAQ,SAAWC,GAClBA,EAAWP,SAAU,eAGvBQ,QAAS,SAAUD,GAElBZ,GAEA,IAAIc,GAAQf,EAAGgB,OAAOC,SAASC,KAE/B,IAAsB,IAAjBH,EAAMI,OAAe,CAEzB,GAAIC,GAAYL,EAAMM,SAASC,GAE/BtB,GAAG,cAAeuB,SAChBC,UAAaJ,EAAY,KAEzBT,SAAU,MAIbE,EAAWY,YAAa,cAI1BzB,GAAG,SAAU0B,YAAanB,MAGxBoB","file":"script.min.js"} -------------------------------------------------------------------------------- /assets/js/src/script.js: -------------------------------------------------------------------------------- 1 | ( function( $ ) { 2 | 3 | function addBlacklistClass() { 4 | $( 'a' ).each( function() { 5 | if ( this.href.indexOf('/wp-admin/') !== -1 || 6 | this.href.indexOf('/wp-login.php') !== -1 ) { 7 | $( this ).addClass( 'wp-link' ); 8 | } 9 | }); 10 | } 11 | 12 | $( function() { 13 | 14 | addBlacklistClass(); 15 | 16 | var settings = { 17 | anchors: 'a', 18 | blacklist: '.wp-link', 19 | onStart: { 20 | duration: 280, 21 | render: function ( $container ) { 22 | $container.addClass( 'slide-out' ); 23 | } 24 | }, 25 | onAfter: function( $container ) { 26 | 27 | addBlacklistClass(); 28 | 29 | var $hash = $( window.location.hash ); 30 | 31 | if ( $hash.length !== 0 ) { 32 | 33 | var offsetTop = $hash.offset().top; 34 | 35 | $( 'body, html' ).animate( { 36 | scrollTop: ( offsetTop - 60 ), 37 | }, { 38 | duration: 280 39 | } ); 40 | } 41 | 42 | $container.removeClass( 'slide-out' ); 43 | } 44 | }; 45 | 46 | $( '#page' ).smoothState( settings ); 47 | } ); 48 | 49 | })( jQuery ); -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 |