JS滚动事件插件Headroom特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS滚动事件插件Headroom特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <title>JS滚动事件插件Headroom</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/main.css?v=1">
</head>
<body class="language-javascript">

<header id="header" class="header header--fixed hide-from-print" role="banner">
  <div class="container">
    <nav id="nav" class="nav-wrapper" role="navigation">
      <ul class="nav nav--main">
        <li class="nav__item ">
          <a class="header__link subdued" href="#">
            <span aria-hidden="true" class="icon icon--github"></span>
            <span class="complimentary push--left">GitHub</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="header__link subdued" href="#">
            <span aria-hidden="true" class="icon icon--twitter"></span>
            <span class="complimentary push--left">@WickyNilliams</span>
          </a>
        </li>
      </ul>
    </nav>
    
      <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b>
  
  </div>
</header>

<article>

<header class="feature">
  <div class="container container--wide feature-title">
    <h1 class="feature-title__title headroom-title">Playroom</h1>
    <p class="feature-title__subtitle">An interactive playground where you can tinker with headroom's options</p>
  </div>
</header>

<div class="container block main" role="main">
  <p>
    Tweak the options below and see what effect they have. The example styles are using slightly modified effects from the fantastic animate.css
  </p>
  <p>
     As you change the options they are automatically applied to the page's header. Example code is also generated below as you make changes.
  </p>

  <form class="form">

    <fieldset class="question-set">
      <legend class="question-set__title">
        <h3>Options</h3>
      </legend>
      <div class="grid">
        <div class="grid__item one-half">
          <label class="question-set__label question-set__label--block" for="offset">Offset</label>
          <input class="question-set__input" type="number" name="offset" id="offset" value="205">
        </div>
        <div class="grid__item one-half">
          <label class="question-set__label question-set__label--block" for="tolerance">Tolerance</label>
          <input class="question-set__input" type="number" name="tolerance" id="tolerance" value="5">
        </div>
      </div>
    </fieldset>

    <fieldset class="question-set push--remove-bottom">
      <legend class="question-set__title">
        <h3>Styles</h3>
      </legend>
      <div class="grid">
        <div class="grid__item one-half lap--one-quarter">
          <label class="question-set__label" for="slide">
            <input type="radio" id="slide" value="slide" name="style" checked="checked"> Slide</label>
        </div>
        <div class="grid__item one-half lap--one-quarter">
          <label class="question-set__label" for="swing">
            <input type="radio" id="swing" value="swing" name="style"> Swing</label>
        </div>
        <div class="grid__item one-half lap--one-quarter">
          <label class="question-set__label" for="flip">
            <input type="radio" id="flip" value="flip" name="style"> Flip</label>
        </div>
        <div class="grid__item one-half lap--one-quarter">
          <label class="question-set__label" for="bounce">
            <input type="radio" id="bounce" value="bounce" name="style"> Bounce</label>
        </div>
      </div>
    </fieldset>

  </form>

  <h3>Widget code</h3>
  <p>
      Using plain JS, pass the options as the second argument to the constructor. Be aware that when using headroom in this way, the options aren't automatically merged with the defaults (so you must define every property).
  </p>
  <pre class="language-javascript widget-code"><code></code></pre>

  <h3>Plugin code</h3>
  <p>
      Using the plugin, options are automatically merged with the defaults (deep-merged using $.extend(true, {}, defaultOptions, yourOptions)).
  </p>
  <pre class="language-javascript plugin-code"><code></code></pre>
  
  <h3>Data API code</h3>
  <p>
      If you're using the data-* API, define any property as a data attribute. Options supplied via the data-* API are also deep-merged with defaults. Supply a JSON object to alter the classes used by headroom.js
  </p>
  <pre class="language-javascript data-api-code"><code></code></pre>
</div>
</article>
<script src="js/main.js?v=1"></script>
</body>
</html>

JS代码(main.js):

/** * Prism:Lightweight,robust,elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */
(function(){
	// Private helper varsvar lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
	var _ = self.Prism ={
	util:{
	type:function (o){
	return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
}
,// Deep clone a language definition (e.g. to extend it) clone:function (o){
	var type = _.util.type(o);
	switch (type){
	case 'Object':var clone ={
}
;
	for (var key in o){
	if (o.hasOwnProperty(key)){
	clone[key] = _.util.clone(o[key]);
}
}
return clone;
	case 'Array':return o.slice();
}
return o;
}
}
,languages:{
	extend:function (id,redef){
	var lang = _.util.clone(_.languages[id]);
	for (var key in redef){
	lang[key] = redef[key];
}
return lang;
}
,// Insert a token before another token in a language literal insertBefore:function (inside,before,insert,root){
	root = root || _.languages;
	var grammar = root[inside];
	var ret ={
}
;
	for (var token in grammar){
	if (grammar.hasOwnProperty(token)){
	if (token == before){
	for (var newToken in insert){
	if (insert.hasOwnProperty(newToken)){
	ret[newToken] = insert[newToken];
}
}
}
ret[token] = grammar[token];
}
}
return root[inside] = ret;
}
,// Traverse a language definition with Depth First Search DFS:function(o,callback){
	for (var i in o){
	callback.call(o,i,o[i]);
	if (_.util.type(o) === 'Object'){
	_.languages.DFS(o[i],callback);
}
}
}
}
,highlightAll:function(async,callback){
	var elements = document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code');
	for (var i=0,element;
	element = elements[i++];
	){
	_.highlightElement(element,async === true,callback);
}
}
,highlightElement:function(element,async,callback){
	// Find language var language,grammar,parent = element;
	while (parent && !lang.test(parent.className)){
	parent = parent.parentNode;
}
if (parent){
	language = (parent.className.match(lang) || [,''])[1];
	grammar = _.languages[language];
}
if (!grammar){
	return;
}
// Set language on the element,if not present element.className = element.className.replace(lang,'').replace(/\s+/g,' ') + ' language-' + language;
	// Set language on the parent,for styling parent = element.parentNode;
	if (/pre/i.test(parent.nodeName)){
	parent.className = parent.className.replace(lang,'').replace(/\s+/g,' ') + ' language-' + language;
}
var code = element.textContent;
	if(!code){
	return;
}
code = code.replace(/&/g,'&amp;
	').replace(/</g,'&lt;
	').replace(/\u00a0/g,' ');
	var env ={
	element:element,language:language,grammar:grammar,code:code}
;
	_.hooks.run('before-highlight',env);
	if (async && self.Worker){
	var worker = new Worker(_.filename);
	worker.onmessage = function(evt){
	env.highlightedCode = Token.stringify(JSON.parse(evt.data),language);
	_.hooks.run('before-insert',env);
	env.element.innerHTML = env.highlightedCode;
	callback && callback.call(env.element);
	_.hooks.run('after-highlight',env);
}
;
	worker.postMessage(JSON.stringify({
	language:env.language,code:env.code}
));
}
else{
	env.highlightedCode = _.highlight(env.code,env.grammar,env.language) _.hooks.run('before-insert',env);
	env.element.innerHTML = env.highlightedCode;
	callback && callback.call(element);
	_.hooks.run('after-highlight',env);
}
}
,highlight:function (text,grammar,language){
	return Token.stringify(_.tokenize(text,grammar),language);
}
,tokenize:function(text,grammar,language){
	var Token = _.Token;
	var strarr = [text];
	var rest = grammar.rest;
	if (rest){
	for (var token in rest){
	grammar[token] = rest[token];
}
delete grammar.rest;
}
tokenloop:for (var token in grammar){
	if(!grammar.hasOwnProperty(token) || !grammar[token]){
	continue;
}
var pattern = grammar[token],inside = pattern.inside,lookbehind = !!pattern.lookbehind,lookbehindLength = 0;
	pattern = pattern.pattern || pattern;
	for (var i=0;
	i<strarr.length;
	i++){
	// Don’t cache length as it changes during the loop var str = strarr[i];
	if (strarr.length > text.length){
	// Something went terribly wrong,ABORT,ABORT! break tokenloop;
}
if (str instanceof Token){
	continue;
}
pattern.lastIndex = 0;
	var match = pattern.exec(str);
	if (match){
	if(lookbehind){
	lookbehindLength = match[1].length;
}
var from = match.index - 1 + lookbehindLength,match = match[0].slice(lookbehindLength),len = match.length,to = from + len,before = str.slice(0,from + 1),after = str.slice(to + 1);
	var args = [i,1];
	if (before){
	args.push(before);
}
var wrapped = new Token(token,inside? _.tokenize(match,inside):match);
	args.push(wrapped);
	if (after){
	args.push(after);
}
Array.prototype.splice.apply(strarr,args);
}
}
}
return strarr;
}
,hooks:{
	all:{
}
,add:function (name,callback){
	var hooks = _.hooks.all;
	hooks[name] = hooks[name] || [];
	hooks[name].push(callback);
}
,run:function (name,env){
	var callbacks = _.hooks.all[name];
	if (!callbacks || !callbacks.length){
	return;
}
for (var i=0,callback;
	callback = callbacks[i++];
	){
	callback(env);
}
}
}
}
;
	var Token = _.Token = function(type,content){
	this.type = type;
	this.content = content;
}
;
	Token.stringify = function(o,language,parent){
	if (typeof o == 'string'){
	return o;
}
if (Object.prototype.toString.call(o) == '[object Array]'){
	return o.map(function(element){
	return Token.stringify(element,language,o);
}
).join('');
}
var env ={
	type:o.type,content:Token.stringify(o.content,language,parent),tag:'span',classes:['token',o.type],attributes:{
}
,language:language,parent:parent}
;
	if (env.type == 'comment'){
	env.attributes['spellcheck'] = 'true';
}
_.hooks.run('wrap',env);
	var attributes = '';
	for (var name in env.attributes){
	attributes += name + '="' + (env.attributes[name] || '') + '"';
}
return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
}
;
	if (!self.document){
	// In worker self.addEventListener('message',function(evt){
	var message = JSON.parse(evt.data),lang = message.language,code = message.code;
	self.postMessage(JSON.stringify(_.tokenize(code,_.languages[lang])));
	self.close();
}
,false);
	return;
}
// Get current script and highlightvar script = document.getElementsByTagName('script');
	script = script[script.length - 1];
	if (script){
	_.filename = script.src;
	if (document.addEventListener && !script.hasAttribute('data-manual')){
	document.addEventListener('DOMContentLoaded',_.highlightAll);
}
}
}
)();
	;
	Prism.languages.markup ={
	'comment':/&lt;
	!--[\w\W]*?-->/g,'prolog':/&lt;
	\?.+?\?>/,'doctype':/&lt;
	!DOCTYPE.+?>/,'cdata':/&lt;
	!\[CDATA\[[\w\W]*?]]>/i,'tag':{
	pattern:/&lt;
	\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{
	'tag':{
	pattern:/^&lt;
	\/?[\w:-]+/i,inside:{
	'punctuation':/^&lt;
	\/?/,'namespace':/^[\w-]+?:/}
}
,'attr-value':{
	pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{
	'punctuation':/=|>|"/g}
}
,'punctuation':/\/?>/g,'attr-name':{
	pattern:/[\w:-]+/g,inside:{
	'namespace':/^[\w-]+?:/}
}
}
}
,'entity':/&amp;
	#?[\da-z]{
	1,8}
;
	/gi}
;
	// Plugin to make entity title show the real entity,idea by Roman KomarovPrism.hooks.add('wrap',function(env){
	if (env.type === 'entity'){
	env.attributes['title'] = env.content.replace(/&amp;
	/,'&');
}
}
);
	;
	Prism.languages.css ={
	'comment':/\/\*[\w\W]*?\*\//g,'atrule':{
	pattern:/@[\w-]+?.*?(;
	|(?=\s*{
	))/gi,inside:{
	'punctuation':/[;
	:]/g}
}
,'url':/url\((["']?).*?\1\)/gi,'selector':/[^\{
	\}
\s][^\{
	\}
;
	]*(?=\s*\{
	)/g,'property':/(\b|\B)[\w-]+(?=\s*:)/ig,'string':/("|')(\\?.)*?\1/g,'important':/\B!important\b/gi,'ignore':/&(lt|gt|amp);
	/gi,'punctuation':/[\{
	\}
;
	:]/g}
;
	if (Prism.languages.markup){
	Prism.languages.insertBefore('markup','tag',{
	'style':{
	pattern:/(&lt;
	|<)style[\w\W]*?(>|&gt;
	)[\w\W]*?(&lt;
	|<)\/style(>|&gt;
	)/ig,inside:{
	'tag':{
	pattern:/(&lt;
	|<)style[\w\W]*?(>|&gt;
	)|(&lt;
	|<)\/style(>|&gt;
	)/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.css}
}
}
);
}
;
	Prism.languages.clike ={
	'comment':{
	pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:true}
,'string':/("|')(\\?.)*?\1/g,'class-name':{
	pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:true,inside:{
	punctuation:/(\.|\\)/}
}
,'keyword':/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,'boolean':/\b(true|false)\b/g,'function':{
	pattern:/[a-z0-9_]+\(/ig,inside:{
	punctuation:/\(/}
}
,'number':/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,'operator':/[-+]{
	1,2}
|!|&lt;
	=?|>=?|={
	1,3}
|(&amp;
	){
	1,2}
|\|?\||\?|\*|\/|\~|\^|\%/g,'ignore':/&(lt|gt|amp);
	/gi,'punctuation':/[{
}
[\];
	(),.:]/g}
;
	;
	Prism.languages.javascript = Prism.languages.extend('clike',{
	'keyword':/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,'number':/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}
);
	Prism.languages.insertBefore('javascript','keyword',{
	'regex':{
	pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{
	0,3}
(?=\s*($|[\r\n,.;
}
)]))/g,lookbehind:true}
}
);
	if (Prism.languages.markup){
	Prism.languages.insertBefore('markup','tag',{
	'script':{
	pattern:/(&lt;
	|<)script[\w\W]*?(>|&gt;
	)[\w\W]*?(&lt;
	|<)\/script(>|&gt;
	)/ig,inside:{
	'tag':{
	pattern:/(&lt;
	|<)script[\w\W]*?(>|&gt;
	)|(&lt;
	|<)\/script(>|&gt;
	)/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
}
}
);
}
;
	/*! * headroom.js v0.3.11 - Give your page some headroom. Hide your header until you need it * Copyright (c) 2013 Nick Williams - http://wicky.nillia.ms/headroom.js * License:MIT */
(function(global){
	'use strict';
	window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
	/** * Handles debouncing of events via requestAnimationFrame * @see http://www.html5rocks.com/en/tutorials/speed/animations/ * @param{
	Function}
callback The callback to handle whichever event */
 function Debouncer (callback){
	this.callback = callback;
	this.ticking = false;
}
Debouncer.prototype ={
	constructor:Debouncer,/** * dispatches the event to the supplied callback * @private */
 update:function(){
	this.callback && this.callback();
	this.ticking = false;
}
,/** * ensures events don't get stacked * @private */
 requestTick:function(){
	if(!this.ticking){
	requestAnimationFrame(this.update.bind(this));
	this.ticking = true;
}
}
,/** * Attach this as the event listeners */
 handleEvent:function(){
	this.requestTick();
}
}
;
	/** * UI enhancement for fixed headers. * Hides header when scrolling down * Shows header when scrolling up * @constructor * @param{
	DOMElement}
elem the header element * @param{
	Object}
options options for the widget */
 function Headroom (elem,options){
	options = options || Headroom.options;
	this.lastKnownScrollY = 0;
	this.elem = elem;
	this.debouncer = new Debouncer(this.update.bind(this));
	this.tolerance = options.tolerance;
	this.classes = options.classes;
	this.offset = options.offset;
	this.initialised = false;
}
Headroom.prototype ={
	constructor:Headroom,/** * Initialises the widget */
 init:function(){
	this.elem.classList.add(this.classes.initial);
	// defer event registration to handle browser // potentially restoring previous scroll position setTimeout(this.attachEvent.bind(this),100);
}
,/** * Unattaches events and removes any classes that were added */
 destroy:function(){
	this.initialised = false;
	window.removeEventListener('scroll',this.debouncer,false);
	this.elem.classList.remove(this.classes.unpinned,this.classes.pinned,this.classes.initial);
}
,/** * Attaches the scroll event * @private */
 attachEvent:function(){
	if(!this.initialised){
	this.initialised = true;
	window.addEventListener('scroll',this.debouncer,false);
}
}
,/** * Unpins the header if it's currently pinned */
 unpin:function(){
	this.elem.classList.add(this.classes.unpinned);
	this.elem.classList.remove(this.classes.pinned);
}
,/** * Pins the header if it's currently unpinned */
 pin:function(){
	this.elem.classList.remove(this.classes.unpinned);
	this.elem.classList.add(this.classes.pinned);
}
,/** * Gets the Y scroll position * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY * @return{
	Number}
pixels the page has scrolled along the Y-axis */
 getScrollY:function(){
	return (window.pageYOffset !== undefined) ? window.pageYOffset:(document.documentElement || document.body.parentNode || document.body).scrollTop;
}
,/** * Handles updating the state of the widget */
 update:function(){
	var currentScrollY = this.getScrollY(),toleranceExceeded = Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance;
	if(currentScrollY < 0){
	// Ignore bouncy scrolling in OSX return;
}
if(toleranceExceeded){
	if(currentScrollY > this.lastKnownScrollY && currentScrollY >= this.offset){
	this.unpin();
}
else if(currentScrollY < this.lastKnownScrollY){
	this.pin();
}
}
this.lastKnownScrollY = currentScrollY;
}
}
;
	/** * Default options * @type{
	Object}
*/
 Headroom.options ={
	tolerance:0,offset:0,classes:{
	pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}
}
;
	global.Headroom = Headroom;
}
(this));
	;
	(function(){
	function CodeGenerator (widgetCode,pluginCode,dataApiCode){
	this.pluginCode = pluginCode;
	this.widgetCode = widgetCode;
	this.dataApiCode = dataApiCode;
}
CodeGenerator.prototype ={
	constructor:CodeGenerator,widget:function(options){
	return 'var headroom = new Headroom(elem,' + JSON.stringify(options,null,' ') +');
	\nheadroom.init();
	\n\n' + '// to destroy\n' + 'headroom.destroy();
	';
}
,plugin:function(options){
	return '$("header").headroom(' + JSON.stringify(options,null,' ') + ');
	\n\n' + '// to destroy\n' + '$("#header").headroom("destroy");
	';
}
,dataApi:function(options){
	return '&lt;
	header data-headroom ' + 'data-tolerance="' + options.tolerance + '" ' + 'data-offset="' + options.offset + '" ' + 'data-classes=\'' + JSON.stringify(options.classes) + '\'&gt;
	&lt;
	/header&gt;
	\n\n' + '// to destroy,in your JS:\n' + '$("header").data("headroom").destroy();
	';
}
,generate:function(options){
	this.pluginCode.innerHTML = this.plugin(options);
	Prism.highlightElement(this.pluginCode,false);
	this.widgetCode.innerHTML = this.widget(options);
	Prism.highlightElement(this.widgetCode,false);
	this.dataApiCode.innerHTML = this.dataApi(options);
	Prism.highlightElement(this.dataApiCode,false);
}
}
;
	window.CodeGenerator = CodeGenerator;
}
());
	;
	(function(){
	function HeadroomExample (inputs,styles,codeGenerator){
	this.inputs = inputs;
	this.codeGenerator = codeGenerator;
	this.styles = styles;
}
HeadroomExample.prototype ={
	constructor:HeadroomExample,init:function(){
	if(!this.inputs){
	return;
}
var options = this.getOptions(this.inputs);
	this.headroom = new Headroom(document.querySelector('header'),options);
	this.headroom.init();
	this.codeGenerator.generate(options);
	this.listen();
}
,getOptions:function (){
	var styleOptions = this.inputs.querySelectorAll('[name=style]');
	var style;
	for (var i = styleOptions.length - 1;
	i >= 0;
	i--){
	if(styleOptions[i].checked){
	style = this.styles[styleOptions[i].value];
	break;
}
}
return{
	tolerance:parseInt(this.inputs.querySelector('#tolerance').value,10),offset:parseInt(this.inputs.querySelector('#offset').value,10),classes:style,}
;
}
,updateWidget:function (){
	var options = this.getOptions(this.inputs);
	var headroom = this.headroom;
	headroom.destroy();
	headroom.classes = options.classes;
	headroom.offset = options.offset;
	headroom.tolerance = options.tolerance;
	headroom.init();
	this.codeGenerator.generate(options);
}
,listen:function(){
	for (var i = this.inputs.length - 1;
	i >= 0;
	i--){
	this.inputs[i].addEventListener('change',this.updateWidget.bind(this),false);
}
}
}
;
	window.HeadroomExample = HeadroomExample;
}
());
	;
	(function(){
	var styles ={
	swing:{
	initial:'animated',pinned:'swingInX',unpinned:'swingOutX'}
,slide:{
	initial:'animated',pinned:'slideDown',unpinned:'slideUp'}
,flip:{
	initial:'animated',pinned:'flipInX',unpinned:'flipOutX'}
,bounce:{
	initial:'animated',pinned:'bounceInDown',unpinned:'bounceOutUp'}
}
;
	var inputs = document.querySelector('form');
	var codeGenerator = new CodeGenerator( document.querySelector('.widget-code'),document.querySelector('.plugin-code'),document.querySelector('.data-api-code'));
	var example = new HeadroomExample(inputs,styles,codeGenerator);
	example.init();
}
());

CSS代码(main.css):

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}
.ir:before{content:"";display:block;width:0;height:150%}
.hidden{display:none!important;visibility:hidden}
.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.visually-hidden.focusable:active,.visually-hidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
.invisible{visibility:hidden}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.push{margin:.5em}
.push--left{margin-left:.5em!important}
.push--right{margin-right:.5em!important}
.push--top{margin-top:.5em!important}
.push--bottom{margin-bottom:.5em!important}
.push--remove-left{margin-left:0!important}
.push--remove-right{margin-right:0!important}
.push--remove-top{margin-top:0!important}
.push--remove-bottom{margin-bottom:0!important}
.pad{padding:.5em!important}
.pad--left{padding-left:.5em!important}
.pad--right{padding-right:.5em!important}
.pad--top{padding-top:.5em!important}
.pad--bottom{padding-bottom:.5em!important}
.pad--remove-left{padding-left:0!important}
.pad--remove-right{padding-right:0!important}
.pad--remove-top{padding-top:0!important}
.pad--remove-bottom{padding-bottom:0!important}
body{font-family:Helvetica,Arial,sans-serif;line-height:1.5;background-color:#fff;color:#292f36}
h1,h2,h3,h4,h5,h6{font-family:Helvetica,Arial,sans-serif;font-weight:bold;color:#1e2328;text-rendering:optimizelegibility}
h1,h2,h3,h4,.alpha,.beta,.gamma,.delta{line-height:1.25}
h1,.alpha{font-size:2em}
h2,.beta{font-size:1.5em}
h3,.gamma{font-size:1.25em;font-weight:normal}
h4,.delta{font-size:1.125em}
.tera{font-size:4.5em}
.giga{font-size:3.5em}
.mega{font-size:2.5em}
.micro{font-size:.9em}
.nano{font-size:.8em}
.pico{font-size:.75em}
@media screen and (min-width:40em){body{font-size:104%}
}
@media screen and (min-width:50em){body{font-size:108%}
}
ul,ol{padding-left:1em}
ul{list-style-type:square}
a{text-decoration:none;border-bottom:2px solid rgba(255,107,107,0.5);-webkit-transition:border-color .2s linear;-moz-transition:border-color .2s linear;-o-transition:border-color .2s linear;transition:border-color .2s linear;color:#292f36}
a:hover,a:focus{border-color:#ff6b6b}
a:target,a:focus{outline:0}
code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,0.3);font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
pre[class*="language-"]{border-radius:.3em}
:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#1e2328}
:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}
.token.punctuation{color:#f8f8f2}
.namespace{opacity:.7}
.token.property,.token.tag{color:#ff6b6b}
.token.boolean,.token.number{color:#ae81ff}
.token.selector,.token.attr-name,.token.string{color:#c7f464}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#f8f8f2}
.token.atrule,.token.attr-value{color:#e6db74}
.token.keyword{color:#4ecdc4}
.token.regex,.token.important{color:#fd971f}
.token.important{font-weight:bold}
.token.entity{cursor:help}
img{vertical-align:middle;max-width:100%}
.img-feature{padding:.75em;border:1px solid #ccc;border-radius:.25em}
*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p,ul,ol,pre,fieldset,form,legend{margin-top:0;margin-bottom:16px;margin-bottom:1rem}
body{margin:0}
.container{max-width:41em;margin:0 auto;padding:0 1.5em}
.container--wide{max-width:51em}
.block{margin-bottom:1.5em}
.block--mini{margin-bottom:.5em}
.main{margin-top:1.5em}
.grid{margin-left:-20px;margin-bottom:0;*zoom:1;list-style:none}
.grid:before,.grid:after{content:" ";display:table}
.grid:after{clear:both}
.grid--rev>.grid__item{float:right}
.grid>.grid{margin-left:0}
.grid__item{float:left;padding-left:20px}
.one-whole{width:100%}
.one-half{width:50%}
.one-third{width:33.333%}
.two-thirds{width:66.666%}
.one-quarter{width:25%}
.two-quarters{width:50%}
.three-quarters{width:75%}
.one-fifth{width:20%}
.two-fifths{width:40%}
.three-fifths{width:60%}
.four-fifths{width:80%}
@media screen and (min-width:40em){.lap--one-whole{width:100%}
.lap--one-half{width:50%}
.lap--one-third{width:33.333%}
.lap--two-thirds{width:66.666%}
.lap--one-quarter{width:25%}
.lap--two-quarters{width:50%}
.lap--three-quarters{width:75%}
.lap--one-fifth{width:20%}
.lap--two-fifths{width:40%}
.lap--three-fifths{width:60%}
.lap--four-fifths{width:80%}
}
@media screen and (min-width:50em){.desk--one-whole{width:100%}
.desk--one-half{width:50%}
.desk--one-third{width:33.333%}
.desk--two-thirds{width:66.666%}
.desk--one-quarter{width:25%}
.desk--two-quarters{width:50%}
.desk--three-quarters{width:75%}
.desk--one-fifth{width:20%}
.desk--two-fifths{width:40%}
.desk--three-fifths{width:60%}
.desk--four-fifths{width:80%}
}
pre,code{font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
pre{overflow:auto;padding:1em;margin:1.5em 0}
code{font-size:.9em}
@media screen and (min-width:50em){code{font-size:.8em}
}
:not(pre)>code[class*="language-"]{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}
@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot')}
@font-face{font-family:'icomoon';src:url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');font-weight:normal;font-style:normal}
.icon{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
.icon--twitter:before{content:"\e000"}
.icon--github:before{content:"\e001"}
.icon--download:before{content:"\e002"}
@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
a,a:visited{text-decoration:underline}
a[href]:after{content:" (" attr(href) ")"}
abbr[title]:after{content:" (" attr(title) ")"}
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}
pre,blockquote{border:1px solid #999;page-break-inside:avoid}
thead{display:table-header-group}
tr,img{page-break-inside:avoid}
img{max-width:100%!important}
@page{margin:.5cm}
p,h2,h3{orphans:3;widows:3}
h2,h3{page-break-after:avoid}
.hide-from-print{display:none}
}
.nav{list-style:none;padding:0;margin-bottom:0}
.nav__item{display:inline-block}
@media screen and (min-width:40em){.nav__item{display:inline-block}
}
.nav__item a{display:inline-block;padding:1em;border:0}
.nav__toggle{float:right;display:none;padding:1em 0}
.nav__toggle:after{font-size:.8em;margin-left:.5em}
.nav__toggle:hover:after,.nav__toggle:focus:after{color:#4ecdc4}
.nav__toggle--open:after{content:"\25BC"}
.nav__toggle--close:after{content:"\25B2"}
@media screen and (min-width:40em){.nav__toggle{display:none!important}
}
.nav--main{float:right}
.nav--main .nav__item:hover{background-color:rgba(78,205,196,0.1)}
.nav--main .nav__item--current a{color:#4ecdc4}
.nav-wrapper .nav__toggle--open{display:inline}
.nav-wrapper .nav__toggle--close{display:none}
.nav-wrapper:target .nav__toggle--open{display:none}
.nav-wrapper:target .nav__toggle--close{display:inline}
.nav--collapsible{display:none}
@media screen and (min-width:40em){.nav--collapsible{display:block}
}
.nav-wrapper:target .nav--collapsible{display:block}
.nav--divided .nav__item{border-top:1px solid #3f4953;border-bottom:1px solid #131619}
@media screen and (min-width:40em){.nav--divided .nav__item{border:0}
}
.nav--divided li:first-child .nav__item{border-top:0}
.nav--divided li:last-child .nav__item{border-bottom:0}
.btn{padding:.5em 1em;margin:0 0 1em 0;display:inline-block;border-radius:.25em;text-decoration:none;text-align:center;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;color:#6f6f6f;text-shadow:1px 1px 1px rgba(255,255,255,0.4);border:1px solid rgba(41,47,54,0.2);background-color:#eee;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2)}
.btn:hover,.btn:focus,.btn:visited{border:1px solid rgba(41,47,54,0.2);background-color:#f1ebeb;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2);text-decoration:none}
.btn:focus{border-color:#292f36}
.btn--primary{-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;color:#292f36;text-shadow:1px 1px 1px rgba(255,255,255,0.4);border:1px solid rgba(41,47,54,0.2);background-color:#4ecdc4;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2)}
.btn--primary:hover,.btn--primary:focus,.btn--primary:visited{border:1px solid rgba(41,47,54,0.2);background-color:#3dded3;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2);text-decoration:none}
.btn--primary:focus{border-color:#292f36}
.btn--secondary{-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;color:#fff;text-shadow:1px 1px 1px rgba(255,255,255,0.4);border:1px solid rgba(41,47,54,0.2);background-color:#ff6b6b;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2);text-shadow:1px 1px 1px rgba(41,47,54,0.5)}
.btn--secondary:hover,.btn--secondary:focus,.btn--secondary:visited{border:1px solid rgba(41,47,54,0.2);background-color:#ff6b6b;box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px -1px rgba(41,47,54,0.2);text-decoration:none}
.btn--secondary:focus{border-color:#292f36}
.btn:active{box-shadow:inset 0 1px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);outline:0}
.btn--plain,.btn--plain:hover,.btn--plain:active,.btn--plain:focus,.btn--plain:visited{background:0;border:0;box-shadow:none}
.btn--plain:hover{color:#292f36}
.btn--full{display:block}
.btn--med{line-height:1.25;font-size:1.125em}
.btn--large{line-height:1.25;font-size:1.25em;font-weight:normal}
.article-header{border-bottom:1px dashed #ccc}
.lead{line-height:1.25;font-size:1.125em;font-weight:bold}
.feature-title{text-align:center}
@media screen and (min-width:40em){.feature-title{font-size:112.5%}
}
@media screen and (min-width:50em){.feature-title{font-size:125%}
}
.feature-title__title{font-size:2.5em;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5);line-height:1;display:block}
.feature-title__subtitle{line-height:1.25;font-size:1.125em;color:#292f36;margin:0}
.post{position:relative;margin-bottom:2.5em}
.post__title{margin-bottom:.1em}
.post__title a{border:0}
.post__date{display:block;margin-bottom:.5em;color:#798899}
.brand{display:inline-block;text-decoration:none;padding:1em 0;color:#fff;-webkit-font-smoothing:antialiased}
.brand__forename{font-weight:bold;color:#4ecdc4}
.brand__surname{font-weight:normal;color:#fff}
.header{background-color:#292f36}
.header__link{color:#fff;text-decoration:none;border:0}
.header__link:focus{outline:0;background-color:rgba(78,205,196,0.1)}
.header__link:hover .icon{color:#4ecdc4}
.header--fixed{position:fixed;z-index:10;right:0;left:0;top:0}
.footer{background-color:#292f36;border-top:3px solid #4ecdc4;box-shadow:0 2px 2px -1px #292f36 inset}
.footer a{color:#fff;text-decoration:none;padding-top:1em;padding-bottom:1em}
.heading{border-bottom:3px solid #4ecdc4;margin-bottom:1em;padding-bottom:.25em}
.sub-heading{border-bottom:1px solid rgba(41,47,54,0.1)}
.feature{background-color:#4ecdc4;padding:5em 0 2em 0}
.feature a{text-decoration:underline;color:#292f36}
.feature strong{color:#fff;font-weight:normal;text-shadow:1px 1px 1px #292f36}
.btt{display:none;position:fixed;left:0;bottom:0;font-size:.9em;-webkit-transform:translateY(4em);-ms-transform:translateY(4em);transform:translateY(4em)}
@media screen and (min-width:50em){.btt{display:block}
}
@media screen and (min-width:65em){.btt{left:.5em}
}
.slide{-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear}
.slide--reset{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
.slide--up{-webkit-transform:translateY(-4em);-ms-transform:translateY(-4em);transform:translateY(-4em)}
.slide--down{-webkit-transform:translateY(4em);-ms-transform:translateY(4em);transform:translateY(4em)}
.headroom-title{font-size:2.5em}
@media(min-width:30em){.headroom-title{font-size:3.5em}
}
@media screen and (min-width:40em){.headroom-title{font-size:4.5em}
}
.icon:before{font-size:.9em;display:inline-block;height:1em;width:1em;line-height:1}
.icon--up:before{content:"\25B2"}
.sharing{margin-top:2em}
.sharing__button{font-size:.8em}
@media screen and (min-width:40em){.sharing__button{font-size:.9em}
}
@media screen and (min-width:50em){.sharing__button{font-size:1em}
}
.form{margin-top:1.5em;margin-bottom:1.5em;padding:1em;border-radius:.3em;background-color:#dee2e6}
.question-set{border:0;padding:0;margin-bottom:1.5em}
.question-set__title{display:block;margin-bottom:.75em}
.question-set__input{width:100%;padding:.25em;border:1px solid #a4afba}
.question-set__input:focus{outline:0;box-shadow:#4ecdc4 0 0 3px 0}
.question-set__label{display:inline-block;margin-bottom:.25em}
.question-set__label--block{display:block}
.question-set__label input[type=radio]{margin-right:.75em}
:not(pre)>code{background-color:#d0d5db;padding:.3em .2em .1em;border-radius:.25em}
p+h2,p+h3{margin-top:1.5em}
.complimentary{display:none}
@media screen and (min-width:40em){.complimentary{display:inline}
}
.subdued{color:rgba(255,255,255,0.6);text-shadow:none}
a.subdued:hover{color:#fff}
.animated{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-4em)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes slideDown{0%{-moz-transform:translateY(-4em)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes slideDown{0%{-o-transform:translateY(-4em)}
100%{-o-transform:translateY(0)}
}
@keyframes slideDown{0%{transform:translateY(-4em)}
100%{transform:translateY(0)}
}
.animated.slideDown{-webkit-animation-name:slideDown;-moz-animation-name:slideDown;-o-animation-name:slideDown;animation-name:slideDown}
@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(0)}
100%{-webkit-transform:translateY(-4em)}
}
@-moz-keyframes slideUp{0%{-moz-transform:translateY(0)}
100%{-moz-transform:translateY(-4em)}
}
@-o-keyframes slideUp{0%{-o-transform:translateY(0)}
100%{-o-transform:translateY(-4em)}
}
@keyframes slideUp{0%{transform:translateY(0)}
100%{transform:translateY(-4em)}
}
.animated.slideUp{-webkit-animation-name:slideUp;-moz-animation-name:slideUp;-o-animation-name:slideUp;animation-name:slideUp}
@-webkit-keyframes swingInX{0%{-webkit-transform:perspective(400px) rotateX(-90deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg)}
}
@-moz-keyframes swingInX{0%{-moz-transform:perspective(400px) rotateX(-90deg)}
100%{-moz-transform:perspective(400px) rotateX(0deg)}
}
@-o-keyframes swingInX{0%{-o-transform:perspective(400px) rotateX(-90deg)}
100%{-o-transform:perspective(400px) rotateX(0deg)}
}
@keyframes swingInX{0%{transform:perspective(400px) rotateX(-90deg)}
100%{transform:perspective(400px) rotateX(0deg)}
}
.animated.swingInX{-webkit-transform-origin:top;-moz-transform-origin:top;-ie-transform-origin:top;-o-transform-origin:top;transform-origin:top;-webkit-backface-visibility:visible!important;-webkit-animation-name:swingInX;-moz-backface-visibility:visible!important;-moz-animation-name:swingInX;-o-backface-visibility:visible!important;-o-animation-name:swingInX;backface-visibility:visible!important;animation-name:swingInX}
@-webkit-keyframes swingOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg)}
100%{-webkit-transform:perspective(400px) rotateX(-90deg)}
}
@-moz-keyframes swingOutX{0%{-moz-transform:perspective(400px) rotateX(0deg)}
100%{-moz-transform:perspective(400px) rotateX(-90deg)}
}
@-o-keyframes swingOutX{0%{-o-transform:perspective(400px) rotateX(0deg)}
100%{-o-transform:perspective(400px) rotateX(-90deg)}
}
@keyframes swingOutX{0%{transform:perspective(400px) rotateX(0deg)}
100%{transform:perspective(400px) rotateX(-90deg)}
}
.animated.swingOutX{-webkit-transform-origin:top;-webkit-animation-name:swingOutX;-webkit-backface-visibility:visible!important;-moz-animation-name:swingOutX;-moz-backface-visibility:visible!important;-o-animation-name:swingOutX;-o-backface-visibility:visible!important;animation-name:swingOutX;backface-visibility:visible!important}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}
100%{transform:perspective(400px) rotateX(0deg);opacity:1}
}
.animated.flipInX{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible!important;-moz-animation-name:flipInX;-o-backface-visibility:visible!important;-o-animation-name:flipInX;backface-visibility:visible!important;animation-name:flipInX}
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1}
100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
.animated.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible!important;-o-animation-name:flipOutX;-o-backface-visibility:visible!important;animation-name:flipOutX;backface-visibility:visible!important}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-200px)}
60%{opacity:1;-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-200px)}
60%{opacity:1;-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-200px)}
60%{opacity:1;-o-transform:translateY(30px)}
80%{-o-transform:translateY(-10px)}
100%{-o-transform:translateY(0)}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-200px)}
60%{opacity:1;transform:translateY(30px)}
80%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}
.animated.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0)}
30%{opacity:1;-webkit-transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-200px)}
}
@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0)}
30%{opacity:1;-moz-transform:translateY(20px)}
100%{opacity:0;-moz-transform:translateY(-200px)}
}
@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0)}
30%{opacity:1;-o-transform:translateY(20px)}
100%{opacity:0;-o-transform:translateY(-200px)}
}
@keyframes bounceOutUp{0%{transform:translateY(0)}
30%{opacity:1;transform:translateY(20px)}
100%{opacity:0;transform:translateY(-200px)}
}
.animated.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp}

附件:下载该文件资源,减少时间成本(增值服务)