/DEV/ reverse engineering headroom 1
How do I make an /dev/ reverse engineering headroom 1?
What is a /dev/ reverse engineering headroom 1? How do you make a /dev/ reverse engineering headroom 1? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.
/DEV/ reverse engineering headroom 1 Previews
/DEV/ reverse engineering headroom 1 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>/DEV/ reverse engineering headroom 1</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="header" class="header header--fixed hide-from-print animated headroom--not-top slideDown" role="banner"> <div class="container"> <nav id="nav" class="nav-wrapper" role="navigation"> <ul class="nav"> <li class="nav__item "> <a class="header__link subdued" href="https://www.github.com/WickyNilliams/headroom.js"> <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="http://www.twitter.com/WickyNilliams"> <span aria-hidden="true" class="icon icon--twitter"></span> <span class="complimentary push--left">@WickyNilliams</span> </a> </li> </ul> </nav> <a href="http://wicky.nillia.ms/headroom.js/" class="brand header__link"> <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b> </a> </div>
</header>
<article>
<header class="feature"> <div class="container container--wide"> <h1 class="feature__title">Playroom</h1> <h2 class="feature__subtitle">An interactive playground where you can tinker with headroom's options</h2> </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 <a href="http://daneden.me/animate/">animate.css</a>. </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="island island--large"> <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" name="offset" id="offset" value="205" type="number"> </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" name="tolerance" id="tolerance" value="4" type="number"> </div> </div> </fieldset> <fieldset class="question-set flush--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 id="slide" value="{"initial":"animated","pinned":"slideDown","unpinned":"slideUp"}" name="classes" checked="checked" type="radio"> Slide</label> </div> <div class="grid__item one-half lap--one-quarter"> <label class="question-set__label" for="swing"> <input id="swing" value="{"initial":"animated","pinned":"swingInX","unpinned":"swingOutX"}" name="classes" type="radio"> Swing</label> </div> <div class="grid__item one-half lap--one-quarter"> <label class="question-set__label" for="flip"> <input id="flip" value="{"initial":"animated","pinned":"flipInX","unpinned":"flipOutX"}" name="classes" type="radio"> Flip</label> </div> <div class="grid__item one-half lap--one-quarter"> <label class="question-set__label" for="bounce"> <input id="bounce" value="{"initial":"animated","pinned":"bounceInDown","unpinned":"bounceOutUp"}" name="classes" type="radio"> Bounce</label> </div> </div> </fieldset> </form> <h3>Plain JS</h3> <p> Using plain JS, pass the options as the second argument to the
constructor. Options are automatically merged with the defaults. </p> <pre class=" language-javascript" data-code-generator="widget"><code class=" language-javascript"><span class="token keyword">var</span> headroom <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Headroom</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">"tolerance"</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">"offset"</span><span class="token punctuation">:</span> <span class="token number">205</span><span class="token punctuation">,</span> <span class="token string">"classes"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">"initial"</span><span class="token punctuation">:</span> <span class="token string">"animated"</span><span class="token punctuation">,</span> <span class="token string">"pinned"</span><span class="token punctuation">:</span> <span class="token string">"slideDown"</span><span class="token punctuation">,</span> <span class="token string">"unpinned"</span><span class="token punctuation">:</span> <span class="token string">"slideUp"</span><span class="token punctuation">,</span> <span class="token string">"top"</span><span class="token punctuation">:</span> <span class="token string">"headroom--top"</span><span class="token punctuation">,</span> <span class="token string">"notTop"</span><span class="token punctuation">:</span> <span class="token string">"headroom--not-top"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
headroom<span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// to destroy
</span>headroom<span class="token punctuation">.</span><span class="token function">destroy<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <h3>jQuery/Zepto plugin</h3> <p> Using the plugin, pass the options object as the only parameter. Options are deep merged with the defaults. </p> <pre class=" language-javascript" data-code-generator="plugin"><code class=" language-javascript">$<span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">headroom<span class="token punctuation">(</span></span><span class="token punctuation">{</span> <span class="token string">"tolerance"</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">"offset"</span><span class="token punctuation">:</span> <span class="token number">205</span><span class="token punctuation">,</span> <span class="token string">"classes"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">"initial"</span><span class="token punctuation">:</span> <span class="token string">"animated"</span><span class="token punctuation">,</span> <span class="token string">"pinned"</span><span class="token punctuation">:</span> <span class="token string">"slideDown"</span><span class="token punctuation">,</span> <span class="token string">"unpinned"</span><span class="token punctuation">:</span> <span class="token string">"slideUp"</span><span class="token punctuation">,</span> <span class="token string">"top"</span><span class="token punctuation">:</span> <span class="token string">"headroom--top"</span><span class="token punctuation">,</span> <span class="token string">"notTop"</span><span class="token punctuation">:</span> <span class="token string">"headroom--not-top"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// to destroy
</span>$<span class="token punctuation">(</span><span class="token string">"#header"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">headroom<span class="token punctuation">(</span></span><span class="token string">"destroy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <h4>Data API code</h4> <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-code-generator="dataApi"><code class=" language-javascript"><span class="token operator"><</span>header data<span class="token operator">-</span>headroom data<span class="token operator">-</span>tolerance<span class="token operator">=</span><span class="token string">"4"</span> data<span class="token operator">-</span>offset<span class="token operator">=</span><span class="token string">"205"</span> data<span class="token operator">-</span>classes<span class="token operator">=</span><span class="token string">'{"initial":"animated","pinned":"slideDown","unpinned":"slideUp","top":"headroom--top","notTop":"headroom--not-top"}'</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>header<span class="token operator">></span>
<span class="token comment" spellcheck="true">
// to destroy, in your JS:
</span>$<span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span><span class="token string">"headroom"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">destroy<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <h3>AngularJS directive</h3> <p> Headroom can be used as an element or an attribute directive. When using an element directive, pass options to headroom via attributes. </p> <pre class=" language-markup" data-code-generator="angular"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>headroom</span> <span class="token attr-name">tolerance</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">offset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>205<span class="token punctuation">"</span></span> <span class="token attr-name">classes</span><span class="token attr-value"><span class="token punctuation">=</span>'{<span class="token punctuation">"</span>initial<span class="token punctuation">"</span>:<span class="token punctuation">"</span>animated<span class="token punctuation">"</span>,<span class="token punctuation">"</span>pinned<span class="token punctuation">"</span>:<span class="token punctuation">"</span>slideDown<span class="token punctuation">"</span>,<span class="token punctuation">"</span>unpinned<span class="token punctuation">"</span>:<span class="token punctuation">"</span>slideUp<span class="token punctuation">"</span>,<span class="token punctuation">"</span>top<span class="token punctuation">"</span>:<span class="token punctuation">"</span>headroom--top<span class="token punctuation">"</span>,<span class="token punctuation">"</span>notTop<span class="token punctuation">"</span>:<span class="token punctuation">"</span>headroom--not-top<span class="token punctuation">"</span>}'</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>headroom</span><span class="token punctuation">></span></span></code></pre> <h2>Share this on:</h2> <div class="sharing island"> <div class="grid"> <div class="grid__item one-third"> <a class="sharing__button btn btn--secondary btn--full" href="http://facebook.com/sharer.php?u=http://wicky.nillia.ms/headroom.js/">Facebook</a> </div> <div class="grid__item one-third"> <a class="sharing__button btn btn--secondary btn--full" href="http://twitter.com/intent/tweet?url=http://wicky.nillia.ms/headroom.js/&text=Headroom.js.%20Give%20your%20pages%20some%20headroom&via=WickyNilliams">Twitter</a> </div> <div class="grid__item one-third"> <a class="sharing__button btn btn--secondary btn--full" href="https://plus.google.com/share?url=http://wicky.nillia.ms/headroom.js/">Google+</a> </div> </div> </div>
</div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/headroom.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/jQuery.headroom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
/DEV/ reverse engineering headroom 1 - Script Codes CSS Codes
/*! 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
}
.flush--left{ margin-left:0!important
}
.flush--right{ margin-right:0!important
}
.flush--top{ margin-top:0!important
}
.flush--bottom{ margin-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
}
.peta{ font-size:5.25em
}
.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
}
*,::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:-1em; 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:1em
}
.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{ padding:0; list-style:none; margin-bottom:0; float:right
}
.nav__item{ display:inline-block
}
@media screen and (min-width:40em){ .nav__item{ display:inline-block }
}
.nav__item:hover{ background-color:rgba(78,205,196,0.1)
}
.nav__item a{ display:inline-block; padding:1em; border:0
}
.btn{ padding:.5em 1em; margin:0; display:inline-block; border-radius:.25em; border:1px solid rgba(41,47,54,0.2); 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; 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
}
.btn--primary{ color:#292f36; background-color:#4ecdc4
}
.btn--primary:hover,.btn--primary:focus{ border:1px solid rgba(41,47,54,0.2); color:#292f36; background-color:#3ac7bd
}
.btn--primary:focus{ border-color:#292f36; outline:0
}
.btn--secondary{ color:#fff; background-color:#ff6b6b; text-shadow:1px 1px 1px rgba(41,47,54,0.5)
}
.btn--secondary:hover,.btn--secondary:focus{ border:1px solid rgba(41,47,54,0.2); color:#fff; background-color:#ff5252
}
.btn--secondary:focus{ border-color:#292f36; outline:0
}
.btn--plain{ border:0; box-shadow:none; color:#556270
}
.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--full{ display:block
}
.island{ margin-top:1em; margin-bottom:1em; padding:.5em; border-radius:.3em; background-color:#dee2e6
}
@media screen and (min-width:40em){ .island{ padding:1em }
}
.island--large{ margin-top:2em; margin-bottom:2em; padding:1em
}
.feature{ background-color:#4ecdc4; padding:5em 0 2em 0; text-align:center
}
@media screen and (min-width:50em){ .feature{ padding-top:5.5em; padding-bottom:2.5em }
}
.feature a{ text-decoration:underline; color:#292f36
}
.feature strong{ color:#fff; font-weight:normal; text-shadow:1px 1px 1px #292f36
}
.feature__title{ font-size:2.5em; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.5); line-height:1; display:block
}
@media(min-width:30em){ .feature__title{ font-size:4.5em }
}
@media screen and (min-width:65em){ .feature__title{ font-size:5.25em }
}
.feature__subtitle{ font-size:1em; font-weight:normal; color:#292f36; margin:0
}
@media(min-width:30em){ .feature__subtitle{ line-height:1.25; font-size:1.125em }
}
@media screen and (min-width:50em){ .feature__subtitle{ line-height:1.25; font-size:1.25em; font-weight:normal }
}
.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
}
.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 .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out
}
.slide--reset{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0)
}
.slide--up{ -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%)
}
.icon:before{ font-size:.9em; display:inline-block; height:1em; width:1em; line-height:1
}
.icon--up:before{ content:"\25B2"
}
.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 }
}
.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{ opacity:.6; text-shadow:none
}
a.subdued:hover{ color:#fff
}
.downloads{ margin-bottom:1.5em
}
.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(-100%) } 100%{ -webkit-transform:translateY(0) }
}
@-moz-keyframes slideDown{ 0%{ -moz-transform:translateY(-100%) } 100%{ -moz-transform:translateY(0) }
}
@-o-keyframes slideDown{ 0%{ -o-transform:translateY(-100%) } 100%{ -o-transform:translateY(0) }
}
@keyframes slideDown{ 0%{ transform:translateY(-100%) } 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(-100%) }
}
@-moz-keyframes slideUp{ 0%{ -moz-transform:translateY(0) } 100%{ -moz-transform:translateY(-100%) }
}
@-o-keyframes slideUp{ 0%{ -o-transform:translateY(0) } 100%{ -o-transform:translateY(-100%) }
}
@keyframes slideUp{ 0%{ transform:translateY(0) } 100%{ transform:translateY(-100%) }
}
.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
}
/DEV/ reverse engineering headroom 1 - Script Codes JS Codes
!function(a,b){"use strict";function c(a){this.callback=a,this.ticking=!1}function d(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var b,c,e=a||{};for(c=1;c<arguments.length;c++){var f=arguments[c]||{};for(b in f)e[b]="object"==typeof e[b]?d(e[b],f[b]):e[b]||f[b]}return e}function e(a,b){b=d(b,e.options),this.lastKnownScrollY=0,this.elem=a,this.debouncer=new c(this.update.bind(this)),this.tolerance=b.tolerance,this.classes=b.classes,this.offset=b.offset,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop}var f={bind:!!function(){}.bind,classList:"classList"in b.documentElement,rAF:!!(a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame)};a.requestAnimationFrame=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame,c.prototype={constructor:c,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},e.prototype={constructor:e,init:function(){return e.cutsTheMustard?(this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this):void 0},destroy:function(){var b=this.classes;this.initialised=!1,a.removeEventListener("scroll",this.debouncer,!1),this.elem.classList.remove(b.unpinned,b.pinned,b.top,b.initial)},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,a.addEventListener("scroll",this.debouncer,!1),this.debouncer.handleEvent())},unpin:function(){var a=this.elem.classList,b=this.classes;(a.contains(b.pinned)||!a.contains(b.unpinned))&&(a.add(b.unpinned),a.remove(b.pinned),this.onUnpin&&this.onUnpin.call(this))},pin:function(){var a=this.elem.classList,b=this.classes;a.contains(b.unpinned)&&(a.remove(b.unpinned),a.add(b.pinned),this.onPin&&this.onPin.call(this))},top:function(){var a=this.elem.classList,b=this.classes;a.contains(b.top)||(a.add(b.top),a.remove(b.notTop),this.onTop&&this.onTop.call(this))},notTop:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notTop)||(a.add(b.notTop),a.remove(b.top),this.onNotTop&&this.onNotTop.call(this))},getScrollY:function(){return void 0!==a.pageYOffset?a.pageYOffset:(b.documentElement||b.body.parentNode||b.body).scrollTop},getViewportHeight:function(){return a.innerHeight||b.documentElement.clientHeight||b.body.clientHeight},getDocumentHeight:function(){var a=b.body,c=b.documentElement;return Math.max(a.scrollHeight,c.scrollHeight,a.offsetHeight,c.offsetHeight,a.clientHeight,c.clientHeight)},isOutOfBounds:function(a){var b=0>a,c=a+this.getViewportHeight()>this.getDocumentHeight();return b||c},toleranceExceeded:function(a){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=a<this.lastKnownScrollY,d=a<=this.offset;return c&&b||d},update:function(){var a=this.getScrollY(),b=this.toleranceExceeded(a);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),this.shouldUnpin(a,b)?this.unpin():this.shouldPin(a,b)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:0,offset:0,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,a.Headroom=e}(window,document),function(){var a=/\blang(?:uage)?-(?!\*)(\w+)\b/i,b=self.Prism={util:{type:function(a){return Object.prototype.toString.call(a).match(/\[object (\w+)\]/)[1]},clone:function(a){var c=b.util.type(a);switch(c){case"Object":var d={};for(var e in a)a.hasOwnProperty(e)&&(d[e]=b.util.clone(a[e]));return d;case"Array":return a.slice()}return a}},languages:{extend:function(a,c){var d=b.util.clone(b.languages[a]);for(var e in c)d[e]=c[e];return d},insertBefore:function(a,c,d,e){e=e||b.languages;var f=e[a],g={};for(var h in f)if(f.hasOwnProperty(h)){if(h==c)for(var i in d)d.hasOwnProperty(i)&&(g[i]=d[i]);g[h]=f[h]}return e[a]=g},DFS:function(a,c){for(var d in a)c.call(a,d,a[d]),"Object"===b.util.type(a)&&b.languages.DFS(a[d],c)}},highlightAll:function(a,c){for(var d,e=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),f=0;d=e[f++];)b.highlightElement(d,a===!0,c)},highlightElement:function(d,e,f){for(var g,h,i=d;i&&!a.test(i.className);)i=i.parentNode;if(i&&(g=(i.className.match(a)||[,""])[1],h=b.languages[g]),h){d.className=d.className.replace(a,"").replace(/\s+/g," ")+" language-"+g,i=d.parentNode,/pre/i.test(i.nodeName)&&(i.className=i.className.replace(a,"").replace(/\s+/g," ")+" language-"+g);var j=d.textContent;if(j){j=j.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ");var k={element:d,language:g,grammar:h,code:j};if(b.hooks.run("before-highlight",k),e&&self.Worker){var l=new Worker(b.filename);l.onmessage=function(a){k.highlightedCode=c.stringify(JSON.parse(a.data),g),b.hooks.run("before-insert",k),k.element.innerHTML=k.highlightedCode,f&&f.call(k.element),b.hooks.run("after-highlight",k)},l.postMessage(JSON.stringify({language:k.language,code:k.code}))}else k.highlightedCode=b.highlight(k.code,k.grammar,k.language),b.hooks.run("before-insert",k),k.element.innerHTML=k.highlightedCode,f&&f.call(d),b.hooks.run("after-highlight",k)}}},highlight:function(a,d,e){return c.stringify(b.tokenize(a,d),e)},tokenize:function(a,c){var d=b.Token,e=[a],f=c.rest;if(f){for(var g in f)c[g]=f[g];delete c.rest}a:for(var g in c)if(c.hasOwnProperty(g)&&c[g]){var h=c[g],i=h.inside,j=!!h.lookbehind,k=0;h=h.pattern||h;for(var l=0;l<e.length;l++){var m=e[l];if(e.length>a.length)break a;if(!(m instanceof d)){h.lastIndex=0;var n=h.exec(m);if(n){j&&(k=n[1].length);var o=n.index-1+k,n=n[0].slice(k),p=n.length,q=o+p,r=m.slice(0,o+1),s=m.slice(q+1),t=[l,1];r&&t.push(r);var u=new d(g,i?b.tokenize(n,i):n);t.push(u),s&&t.push(s),Array.prototype.splice.apply(e,t)}}}}return e},hooks:{all:{},add:function(a,c){var d=b.hooks.all;d[a]=d[a]||[],d[a].push(c)},run:function(a,c){var d=b.hooks.all[a];if(d&&d.length)for(var e,f=0;e=d[f++];)e(c)}}},c=b.Token=function(a,b){this.type=a,this.content=b};if(c.stringify=function(a,d,e){if("string"==typeof a)return a;if("[object Array]"==Object.prototype.toString.call(a))return a.map(function(b){return c.stringify(b,d,a)}).join("");var f={type:a.type,content:c.stringify(a.content,d,e),tag:"span",classes:["token",a.type],attributes:{},language:d,parent:e};"comment"==f.type&&(f.attributes.spellcheck="true"),b.hooks.run("wrap",f);var g="";for(var h in f.attributes)g+=h+'="'+(f.attributes[h]||"")+'"';return"<"+f.tag+' class="'+f.classes.join(" ")+'" '+g+">"+f.content+"</"+f.tag+">"},!self.document)return self.addEventListener("message",function(a){var c=JSON.parse(a.data),d=c.language,e=c.code;self.postMessage(JSON.stringify(b.tokenize(e,b.languages[d]))),self.close()},!1),void 0;var d=document.getElementsByTagName("script");d=d[d.length-1],d&&(b.filename=d.src,document.addEventListener&&!d.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",b.highlightAll))}(),Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),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*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/gi,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,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_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){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:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/gi,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),function(){function a(a){this.strategies=a}a.prototype={constructor:a,init:function(){this.elements=document.querySelectorAll("[data-code-generator]")},generate:function(a){var b=this;[].forEach.call(this.elements,function(c){b.highlightElement(c,a)})},getStrategy:function(a){return this.strategies[a.getAttribute("data-code-generator")]},highlightElement:function(a,b){var c=this.getStrategy(a),d=a.querySelector("code");c&&(d.innerHTML=c(b),Prism.highlightElement(d,!1))}},window.CodeGenerator=a}(),function(a){function b(a,b,c){this.form=a,this.codeGenerator=b,this.getOptions=c}b.prototype={constructor:b,init:function(){var a=this.form;return a&&(this.codeGenerator.init(),this.process(),a.addEventListener("change",this,!1)),this},process:function(){var b=this.getOptions(this.form);this.headroom&&this.headroom.destroy(),this.headroom=new Headroom(a.querySelector("header"),b).init(),this.codeGenerator.generate(b)},handleEvent:function(){this.process()},destroy:function(){this.form.removeEventListener("change",this)}};var c={widget:function(a){return"var headroom = new Headroom(elem, "+JSON.stringify(a,null," ")+");\nheadroom.init();\n\n"+"// to destroy\n"+"headroom.destroy();"},plugin:function(a){return'$("header").headroom('+JSON.stringify(a,null," ")+");\n\n"+"// to destroy\n"+'$("#header").headroom("destroy");'},dataApi:function(a){return'<header data-headroom data-tolerance="'+a.tolerance+'" '+'data-offset="'+a.offset+'" '+"data-classes='"+JSON.stringify(a.classes)+"'></header>\n\n"+"// to destroy, in your JS:\n"+'$("header").data("headroom").destroy();'},angular:function(a){return'<headroom tolerance="'+a.tolerance+'" '+'offset="'+a.offset+'" '+"classes='"+JSON.stringify(a.classes)+"'></headroom>"}};new b(a.querySelector("form"),new CodeGenerator(c),function(a){for(var b,c=a.querySelectorAll("[name=classes]"),d=c.length-1;d>=0;d--)if(c[d].checked){b=JSON.parse(c[d].value);break}return{tolerance:a.querySelector("#tolerance").valueAsNumber,offset:a.querySelector("#offset").valueAsNumber,classes:b}}).init()}(document);
| Developer | Juan Gallardo |
| Username | JGallardo |
| Uploaded | August 18, 2022 |
| Rating | 3 |
| Size | 17,080 Kb |
| Views | 34,408 |
Do you need developer help for /DEV/ reverse engineering headroom 1?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Juan Gallardo (JGallardo) Script Codes
| Name | Size |
| Simple Modal | 3,208 Kb |
| Working demo of Headroom.js | 12,199 Kb |
| Travel Location Select | 2,218 Kb |
| Fixed Header when scrolling | 4,203 Kb |
| Template - iPad Air - Horizontal | 1,864 Kb |
| Blog Concept 2 | 2,994 Kb |
| Template - iPhone 5 - Vertical | 1,919 Kb |
| Foundation - Sample Header | 1,825 Kb |
| A Pen by Juan Gallardo | 1,823 Kb |
| Blog Concept 3 | 4,382 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| React JS Movie Info App | MTushar | 4,870 Kb |
| Canvas snow | Win7killer | 2,572 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| Colorful Sliders | Chanrith | 1,246 Kb |
| A Pen by Miro Olma | Programiro | 2,342 Kb |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!