Pen with Bootstrap CDN Links
A Pen by Miguel Ángel Pérez on CodePen.
Pen with Bootstrap CDN Links
A Pen by Miguel Ángel Pérez on CodePen.
// IIFE for protection | |
;(function(win, doc, $){ | |
var | |
newStyles = [ | |
'<style>', | |
'.home .navbar-inverse .navbar-nav > li a:hover {', | |
'background-color: #f56226;', | |
'transition: background-color ease-in-out 0.5s;', | |
'}', |
<p>Hello world</p> |
/** | |
* Replace jQuery's $.fn.ready() function with a mod exec | |
* | |
* Sites that make heavy use of the $(document).ready function | |
* are generally incompatable with asynchrounous content. The | |
* the $.fn.ready function only runs once. This script replaces | |
* the ready function with a module execution controller that | |
* let's us register functions and execute all of the functions | |
* as we need them. This is useful after HTML gets injected on the | |
* page and we want to rebind functionally to the new content. |
var | |
/** | |
* Fires a custom event when all animations are complete | |
* @param {object} $element - jQuery object that should trigger event | |
* | |
*/ | |
triggerAllAnimationEndEvent = function ($element) { | |
var animationCount = 0, | |
animationstart = "animationstart webkitAnimationStart oanimationstart MSAnimationStart", |
// Contents of functions.js | |
;(function($) { | |
'use strict'; | |
var $body = $('html, body'), | |
content = $('#main').smoothState({ | |
// Runs when a link has been activated | |
onStart: function(url, $container) { | |
// toggleAnimationClass() is a public method | |
// for restarting css animations with a class | |
content.toggleAnimationClass('is-exiting'); |
// DISQUS | |
var MP = MP || {}; | |
MP.comments = { | |
init: function(){ | |
"use strict"; | |
var disqus_shortname = 'miguelperez'; | |
(function() { | |
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; | |
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; |
An example of how to implement cool page transitions with jQuery.smoothState.js.
A typical implementation of jQuery.smoothState.js using a simple fade effect for page transitoins.