123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <a class="fork_me" href="https://github.com/hbi99/genie.js" target="_new"><img src="http://longscript.com/genie/img/forkme.png" alt="Fork me"/></a>

<div class="dock">
	<!-- Photos: All rights reserved -->
	<ul>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-17.jpg" alt="My daughters; Isabell &amp; Yasmin"/></li>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-12.jpg" alt="Isabell"/></li>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-11.jpg" alt="Yasmin"/></li>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-13.jpg" alt="Felicia"/></li>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-14.jpg" alt="My princesses :)"/></li>
		<li><img class="genie-thumb" src="http://longscript.com/genie/img/img-15.jpg" alt="Me &amp; Yasmin"/></li>
	</ul>
	<!-- Photos: All rights reserved -->
</div>

<img id="genie_text" src="http://longscript.com/genie/img/_.gif"
	data-src="http://longscript.com/genie/img/genie_text.png"
     data-frames="[[[34.8,15.2,3.6]],[[34.4,14,4.2]],[[33.8,12.2,4.6]],[[32.6,11.6,4.8]],[[30.8,11.4,4.8]],[[28.4,11.4,4.8]],[[24.8,11,4.8]],[[22,11.8,4.8]],[[19.4,12.8,4.8]],[[17,14.2,4.8]],[[15.2,16,4.8]],[[12.8,17.8,4.8]],[[10.4,20.4,4.8]],[[8.4,22.8,4.8]],[[7.6,25.4,4.8]],[[7.2,28,4.8]],[[7.4,30.6,4.8]],[[7.2,32.8,5.8]],[[7.8,35.6,5.8]],[[9.6,38,5.8]],[[11.6,40.4,5.8]],[[13.8,41.4,5.8]],[[17,41.4,5.8]],[[19.6,40.2,5.8]],[[23.8,39,4.2]],[[25.8,37,4.2]],[[27.6,34.4,4.2]],[[29.6,32.4,4.2]],[[31.8,29.8,3.2]],[[33,28.8,3.2]],[[33.8,27.4,3.2]],[[34.8,26,3.2]],[[31.8,26.6,4.2]],[[29.8,28.4,4.2]],[[28.2,28,4.6]],[[25,28.2,4.6]],[[22.6,28.8,4.6]],[[20.2,29.8,4.6]],[[27.8,27.6,4.6]],[[27.8,27.6,4.6]],[[31.8,29.6,4.6]],[[30.8,32,4.6]],[[30.6,34.2,4.6]],[[29.8,35.4,6.2]],[[28.4,38.6,6.2]],[[27.6,41.6,6.2]],[[27.2,44.4,6.2]],[[25.6,47.8,6.2]],[[49,32.6,2.2]],[[50.6,32.4,3.4]],[[52.2,31.6,3.8]],[[55,30.6,3.8]],[[57.6,29.2,3.8]],[[59.8,27.8,3.8]],[[60.6,26.6,4.6]],[[60.8,24.6,4.6]],[[60.8,22.2,4.6]],[[59,21,4.6]],[[55.6,21.2,4.6]],[[52.4,21.4,4.6]],[[48.6,22.6,4.6]],[[46.8,25.2,4.6]],[[45.2,27.4,4.6]],[[44.4,30.8,4.6]],[[44,33.8,4.6]],[[44.4,36.6,4.6]],[[45,38.8,5.4]],[[47,40.6,5.4]],[[49,41.8,5.4]],[[52.2,42.2,5.4]],[[55.2,41.4,5.4]],[[58,40.4,5.4]],[[60.4,38.8,5.4]],[[63,37,5.4]],[[65.2,35,5.4]],[[67.2,33,5.4]],[[68.8,30.4,5.4]],[[69.6,27.6,5.4]],[[71.4,27.4,5.4]],[[73.2,25.6,5.4]],[[74.6,24.6,5.4]],[[75.8,23.6,5.4]],[[76.6,23,5.4]],[[75.8,25,5.4]],[[75.6,27.8,5.4]],[[75,29.6,5.4]],[[74.8,32.8,5.4]],[[74.6,35.8,5.4]],[[74.4,38.4,5.4]],[[73.8,42,5.4]],[[74.4,43,5.4]],[[76.2,41.4,5.4]],[[77,38.4,5.4]],[[78.4,36,5.4]],[[80.4,33.6,5.4]],[[82.6,31.2,5.4]],[[84,28.4,5.4]],[[85.6,26.2,5.4]],[[87.8,23.4,5.4]],[[90,20.8,5.4]],[[93,20.8,5.4]],[[95.6,22.8,5.4]],[[95.6,26,5.4]],[[95.6,29.8,5.4]],[[95.6,32.2,5.4]],[[95.6,35,5.4]],[[95.8,38,5.4]],[[96.6,41.2,5.4]],[[99.6,42.2,5.4]],[[101.8,41,5.4]],[[103.8,39,5.4]],[[105.4,36.4,5.4]],[[107,34.2,5.4]],[[108.8,31.6,5.4]],[[110.6,29.4,5.4]],[[112,27.8,5.4]],[[113.6,26,5.4]],[[116.4,25,5.4]],[[116.2,27.6,5.4]],[[115,29.8,5.4]],[[115,32.4,5.4]],[[114.6,35.4,5.4]],[[114.2,38.2,5.4]],[[114.8,40.8,5.4]],[[118,43,5.4]],[[120.8,42.4,5.4]],[[123.4,40,5.4]],[[125.4,38.2,5.4]],[[126.8,36.2,5.4]],[[128.4,33.4,5.4]],[[132.2,31.4,3.6]],[[133.4,29.4,3.6]],[[134.8,27.4,3.6]],[[136.4,26.4,3.6]],[[138.8,24.6,3.6]],[[141,22.8,3.6]],[[143,21,3.6]],[[146.4,20,3.6]],[[149.6,20.2,3.6]],[[152.4,22.4,4.6]],[[152.8,24.6,4.6]],[[151.6,27,4.6]],[[150,28.8,4.6]],[[147.6,30.6,4.6]],[[146,31,4.6]],[[144.4,32.2,4.6]],[[143.4,32.6,4.6]],[[142.2,26.8,4.6]],[[139.8,29.4,4.6]],[[137.2,31.8,4.6]],[[137.2,34.4,4.6]],[[137.2,36.2,6]],[[137.2,39.6,6]],[[140.6,41.8,6]],[[144,41.8,6]],[[148,41.6,6]],[[150.6,40,6]],[[153.6,38,6]],[[156.4,36.8,6]],[[158.6,34.8,6]],[[160.4,32.6,6]],[[162.2,31,6]],[[164.6,26.8,6]],[[116.6,18,2.4]],[[117.6,17.4,3.6]],[[118.8,15.6,4.6]],[[121,14.2,4.6]],[[123.4,13,4.6]],[[124.6,10.8,4.6]],[[125.2,10,4.6]],[[125.2,10,4.6]],[[125.2,10,4.6]],[[187.6,32.6,2.6]],[[189.2,32.2,3.2]],[[192,31,4]],[[195.2,29.4,4]],[[198,27,4]],[[199,25,4]],[[199.2,22.8,4]],[[197.8,21.4,4.8]],[[194.6,20.8,4.8]],[[190.6,21,4.8]],[[187.4,22.6,4.8]],[[185.4,24.4,4.8]],[[183.2,27.2,4.8]],[[183,30.8,4.8]],[[182.8,32.8,6.4]],[[182.6,36.4,6.4]],[[184.2,40,6.4]],[[187.4,42.8,6.4]],[[191.6,42.8,6.4]],[[195.8,41.2,6.4]],[[198.2,39.4,6.4]],[[201,37.2,6.4]],[[202.8,35.4,6.4]],[[206.8,32.4,3.8]],[[209.2,30.2,3.2]],[[230.6,9.4,3.2]],[[231.4,6.8,3.8]],[[229.6,5.2,3.8]],[[231,6.2,4.6]],[[227.6,5.8,4.6]],[[224.2,6.8,4.6]],[[221.4,8.8,4.6]],[[219.2,11.4,4.6]],[[218,14.4,4.6]],[[217.6,17.2,4.6]],[[216.8,20.4,3.4]],[[216.4,22.4,3.4]],[[215.6,25,3.4]],[[215.2,28,3.4]],[[215.2,29.6,3.4]],[[214.8,31.2,4.2]],[[214.4,32.8,5.4]],[[213.6,35.6,5.4]],[[213.4,38.2,5.4]],[[212.4,41.2,5.4]],[[211.2,44.6,5.4]],[[211.2,47.8,5.4]],[[210.6,52.4,5.4]],[[249.8,10.6,2.8]],[[251,9.2,3.8]],[[249.8,7.2,4.8]],[[246.2,6,4.8]],[[242.6,6.8,4.8]],[[239.2,8.8,4.8]],[[237.4,12.2,4.8]],[[235.8,15.8,4.8]],[[235.4,17.8,4.8]],[[235,21.4,3.4]],[[234.4,23,3.4]],[[234,26,3.4]],[[233.2,28.4,3.4]],[[232.6,31.4,3.4]],[[232.8,32.6,5.2]],[[231.8,36,5.2]],[[231.2,39.2,5.2]],[[230.2,42.6,5.2]],[[229.6,44.6,5.2]],[[229.4,47.6,5.2]],[[229.2,51.6,5.2]],[[206.4,26.6,4]],[[208.8,25.4,4]],[[212.6,25,4]],[[215.4,24.6,5.8]],[[218,25,5.8]],[[221.6,25.2,5.8]],[[224.2,25.2,5.8]],[[228.6,24.8,5.8]],[[235.6,25,5.8]],[[239,25,5.8]],[[244.4,24.8,3.2]],[[246.8,24.4,3.2]],[[255,32.8,3.2]],[[257.6,31.6,3.2]],[[260,30.4,3.2]],[[262.4,29.6,4.2]],[[265,27.6,4.2]],[[266.2,25.2,4.2]],[[265.8,22.8,4.2]],[[264.2,20.8,4.2]],[[262,19.2,5.4]],[[258.6,19.6,5.4]],[[256,21.6,5.4]],[[252.8,23.4,5.4]],[[251.2,26.2,5.4]],[[249.8,29.4,5.4]],[[249.2,32.6,5.4]],[[249,35.6,5.4]],[[250,38.6,5]],[[250.2,40.2,6.4]],[[254,42.2,6.4]],[[258.4,41.8,6.4]],[[262.6,41,6.4]],[[265.2,39,6.4]],[[267,37,6.4]],[[271.2,34.2,3.6]],[[272,31.2,3.6]],[[274,31.2,3.6]],[[276.2,28.6,3.6]],[[277.8,27,3.6]],[[280.2,25.2,3.6]],[[282.6,23,3.6]],[[284.6,21.8,3.6]],[[288,20,3.6]],[[291.6,19.4,3.6]],[[294.4,20.6,3.6]],[[295,22.6,4.8]],[[284.4,23,4.8]],[[281.8,26.6,4.8]],[[280,28.8,4.8]],[[278.6,31.6,4.8]],[[278,34.4,4.8]],[[279,37.4,4.8]],[[279.4,40.4,6]],[[282.6,43,5.2]],[[285.4,43.8,5.2]],[[289,44,5.2]],[[292.6,42.4,5.2]],[[295.4,40.2,5.2]],[[297.2,37.4,5.2]],[[299,34.2,5.2]],[[300.6,32.2,5.2]],[[304.6,30,3]],[[306.2,28,3]],[[307.6,26.2,3]],[[309,24,3]],[[310.8,22.2,3.2]],[[310.8,20.6,3.2]],[[311.4,18.6,3.2]],[[312.4,16.8,3.2]],[[313.2,14.8,3.2]],[[313.8,12.4,3.2]],[[315.6,10.6,3.2]],[[316.4,9,4.2]],[[314.8,10,3.8]],[[313.8,12.2,4.2]],[[313.8,12.2,4.2]],[[311.6,19,3.8]],[[310.4,24.4,3.8]],[[309,28.2,4.4]],[[308.4,31.6,4.4]],[[308.2,34.8,4.4]],[[308.2,37.8,4.4]],[[309.6,40,5.6]],[[312,42.4,5.6]],[[315,41,5.6]],[[318,39.6,5.6]],[[322.6,36,5.6]],[[300.8,19.8,3.4]],[[302.6,17.6,4.2]],[[306.4,17.4,4.2]],[[313.2,17.2,5.4]],[[317.4,17,5.4]],[[321.6,17,5.4]],[[324.6,17,5.4]],[[328.6,17,5.4]],[[344.2,18,3]],[[346.4,18,4.8]],[[347.4,20.4,4.8]],[[349,23,4.8]],[[348.6,24.8,6.6]],[[349,28.6,6.6]],[[349.2,32.4,6.6]],[[349.2,36,6.6]],[[349.6,39.8,6.6]],[[349.8,44.2,6.6]],[[352,41.6,6.6]],[[355.6,39,4.6]],[[357,36.6,4.6]],[[358.2,34.4,4.6]],[[359.6,32,4.6]],[[361.4,29.2,4.6]],[[362.2,26.4,4.6]],[[363.4,23.8,4.6]],[[366,22,4.6]],[[365.2,26.2,4.6]],[[365,29,4.6]],[[364.6,32.6,4.6]],[[364.2,36.2,4.6]],[[364.8,39.6,4.6]],[[366.2,42.4,4.6]],[[369.2,43.4,4.6]],[[372.4,42.2,4.6]],[[374.2,39.8,4.6]],[[376.2,36.6,4.6]],[[378,33.6,4.6]],[[378.2,30.6,4.6]],[[378.6,27,4.6]],[[378.8,24.8,4.6]],[[378.2,21.6,5.8]],[[391.2,22.6,3.4]],[[392.2,24.4,4.6]],[[392.2,27.6,4.6]],[[391.4,31.2,4.6]],[[391.4,34.4,4.6]],[[390.4,37.4,4.6]],[[391.2,40.6,4.6]],[[394.2,42.8,4.6]],[[396.8,41.8,4.6]],[[399.6,40.6,4.6]],[[402,38.4,4.6]],[[404.2,36.2,4.6]],[[405.4,33.6,4.6]],[[408.8,31.6,3.2]],[[410.4,29.8,3.2]],[[412.2,27.6,3.2]],[[413.2,25.6,3.2]],[[414.4,23,3.2]],[[414.4,22.6,3.6]],[[415.2,20.8,3.6]],[[415.6,18.4,3.6]],[[415.8,16.8,3.6]],[[417,14.6,3.6]],[[418,12.2,3.6]],[[419.2,10,4.6]],[[419,10,5.4]],[[414,24.4,5.4]],[[413.2,28.6,5.4]],[[412.6,32.2,5.4]],[[412,36.6,5.4]],[[413.8,40.4,5.4]],[[417.4,41.2,5.4]],[[420,40,5.4]],[[424,36,5.4]],[[429.6,3,2.6]],[[430.8,4.6,3.6]],[[432.8,6,3.6]],[[435,5.8,3.6]],[[437,4.4,5]],[[439.8,4.2,5]],[[439.6,8.2,5]],[[439.6,11.6,5]],[[438.8,15.6,4]],[[437.4,18.8,4]],[[436.6,23.4,4]],[[435.8,26,3.2]],[[434.4,28.6,4.2]],[[434.4,31.4,4.2]],[[433.6,33.8,4.2]],[[433.4,36.4,4.2]],[[433.4,38.4,4.2]],[[433,40.6,4.2]],[[433,41.2,6.2]],[[434.4,37.8,6.2]],[[436.4,33.6,6.2]],[[438.4,30.6,6.2]],[[440.4,27.6,6.2]],[[442.8,23.6,6.2]],[[446.8,21.8,6.2]],[[451.8,20.8,6.2]],[[453,25.4,6.2]],[[453.4,29.2,6.2]],[[453.2,33,6.2]],[[453.2,36.6,6.2]],[[455.6,39.8,6.2]],[[459.6,38.6,6.2]],[[462.4,36.6,6.2]],[[465.2,33.6,6.2]],[[467.4,31,6.2]],[[470.8,27.8,6.2]],[[404.4,18.8,3.6]],[[406.8,17.4,3.6]],[[408.4,17.2,4.4]],[[412,17,4.4]],[[417,16.8,5.4]],[[419,16.8,5.4]],[[421.6,16.8,5.4]],[[424.4,16.6,5.4]],[[426.8,16.6,5.4]],[[430.2,16.6,5.4]],[[431.6,16.4,5.4]],[[392,18.4,4]],[[393.8,17,4]],[[395.6,15.6,4]],[[396.8,14.6,4]],[[398.6,13.8,4]],[[399.8,12.4,4]],[[401.4,10.8,4]],[[500.6,15,4]],[[499.4,16.6,5]],[[498.8,19.2,5]],[[498.4,21.6,5]],[[497.8,25,5]],[[497.4,28,5]],[[496.8,30.6,5]],[[496,33.2,5]],[[496,36.8,5]],[[495.8,37.8,6.4]],[[494.2,41,6.4]],[[493.2,44.6,6.4]],[[491.2,47.6,6.4]],[[488.8,50.4,6.4]],[[485.6,53.4,6.4]],[[481,53.8,6.4]],[[477.6,51,6.4]],[[534,16.4,3.8]],[[534,14.4,3.8]],[[533.2,12.4,3.8]],[[532,12,4.8]],[[529.2,11.8,4.8]],[[525.4,11.8,4.8]],[[523,12.8,4.8]],[[520,14.4,4.8]],[[518.4,18.4,4.8]],[[518.8,21.4,4.8]],[[519.6,23,6]],[[522.8,25.2,5.2]],[[523.8,27.8,5.2]],[[525.2,28.8,6.4]],[[528.8,31.6,6.4]],[[529.2,34.4,6.4]],[[530,38.6,6.4]],[[527.6,41.2,6.4]],[[524.8,43.4,6.4]],[[522,45.8,6.4]],[[518.4,45.4,6.4]],[[514,45.2,6.4]],[[512.8,40.6,6.4]],[[488.6,10,5.2]],[[490.6,10.4,5.2]],[[493.4,9.8,5.2]],[[496.6,9.6,5.2]],[[499.4,9.6,5.2]],[[502.2,9.8,5.6]],[[505.6,9.8,5.6]],[[507.8,9.8,5.6]],[[509.6,10.4,5.6]],[[583.4,16.2,4.2]],[[583,13,4.2]],[[581.2,11.8,4.2]],[[578.8,11,4.2]],[[575.8,10.2,4.2]],[[571.8,10,4.2]],[[569.4,11.6,4.2]],[[566.6,13.8,4.2]],[[566.4,16.4,4.2]],[[566.8,19.2,4.2]],[[569.8,18.8,5.8]],[[571.8,21.2,5.2]],[[573.4,23,5.2]],[[575.2,23.2,5.2]],[[571.4,24.4,5.2]],[[567.8,24.4,5.2]],[[565.2,26.2,5.2]],[[562,28.4,5.2]],[[560.4,31.6,5.2]],[[559.4,34.8,5.2]],[[559.8,38.4,5.2]],[[561,41.2,5.2]],[[563.8,43.2,5.2]],[[567.6,43.8,5.2]],[[570.6,43.4,5.2]],[[574,42.4,5.2]],[[575.8,41.8,5.2]],[[579.8,39.4,3.4]],[[581.6,37.8,3.4]],[[583.6,35.4,3.4]],[[585.4,33.6,3.4]],[[586.4,32.2,3.4]],[[586.8,30.2,3.4]],[[586,34,3.4]],[[585.2,36.6,3.4]],[[585,39.4,3.4]],[[584.8,40.2,4.6]],[[584.2,42.8,4.6]],[[584,45,5.4]],[[584.8,47.6,5.4]],[[578.4,26.8,5.4]],[[580.8,26.6,5.4]],[[583.6,26.6,5.4]],[[586.6,26.6,5.4]],[[589,26.8,5.4]],[[591.2,26.8,5.4]],[[595,26.8,5.4]],[[645.6,16.8,3.8]],[[645.4,15.4,4.6]],[[645.2,13.2,4.6]],[[642.6,11.6,5.4]],[[639,11.6,5.4]],[[635.4,11.8,5.4]],[[631.2,12.6,5.4]],[[627.6,14.2,5.4]],[[625.4,16.8,5.4]],[[623.4,20.4,5.4]],[[621.8,24.2,5.4]],[[621.4,28,5.4]],[[620.8,31.6,5.4]],[[621.2,34.8,5.4]],[[622.2,38.2,5.4]],[[625,40.6,5.4]],[[628.2,42.8,5.4]],[[632.8,43.2,5.4]],[[636.6,42.8,5.4]],[[640.2,40.8,5.4]],[[643,38.4,5.4]],[[645.2,36.4,5.4]],[[676.6,16,3.6]],[[676,13.4,3.6]],[[674.6,12,4.4]],[[670.8,10.6,4.4]],[[667,10.4,4.4]],[[663.2,11.4,4.4]],[[661.6,14,4.4]],[[660.8,16.2,4.4]],[[660.6,19,4.4]],[[661.4,20.8,5.2]],[[662.6,23.8,5.2]],[[666.6,26.6,5.2]],[[669.4,30,5.2]],[[670.8,32.8,5.2]],[[671.8,36.2,5.2]],[[671.4,39,5.2]],[[670.2,42.6,5.2]],[[667.6,44.6,5.2]],[[664.4,46,5.2]],[[660.8,46.2,5.2]],[[657.6,45.4,5.2]],[[655.2,43.4,5.2]],[[654.4,39.2,5.2]],[[704.4,17.2,3]],[[704.4,15.2,4]],[[703.2,12.2,4]],[[701.2,10.4,5.4]],[[698,10.8,5.4]],[[694,11.4,5.4]],[[691,13.2,5.4]],[[689.2,15.8,5.4]],[[689.2,18.8,5.4]],[[690,22.2,5.4]],[[693,25.4,5.4]],[[696,28.2,5.4]],[[698.6,32,5.4]],[[700.6,35.4,5.4]],[[700.4,39.8,5.4]],[[698,42.2,5.4]],[[694.6,44.8,5.4]],[[690.8,45.8,5.4]],[[687.8,45.8,5.4]],[[684.4,44.2,5.4]],[[682.4,41.2,5.4]],[[682,38.8,5.4]],[[682,38.8,5.4]]]"
     data-speed="6"
     data-autoplay="true"
     data-loop="false"/>
<script>
// Generated with app.longscript.com
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 1K=(7(Z){8 l={O:{1e:20,F:[],C:\'\',1a:H,17:B,f:B,r:1h.1G*2},I:7(d){8 m=l,q=m.O;14(d){J\'1k\':4 m.P(1P[1]);J\'1g\':4 m.S()}3(/1v [1B]/i.1H(1I.1J)||q.f)4;8 u=7(n){4 Z.1Q(n)},o=7(n){4 Z.1Z(n)},13=7(e,r){4 1i(e,1j)[r]},A=u(\'N\').C=\'/\'+\'/1o.1p.1q/a.1y\',c=o(d.1C),i=1D 1E(),z,6;V(z U q){6=c.22(\'1L-\'+z);3(!6)1M;14(12(q[z])){J\'1O\':6=(6===\'H\');10;J\'Y\':6=1R.1S(6);10;1W:6=q[z].1X(6)}q[z]=6}q.5=0;m.X(q,d);m.a=u(\'M\');m.k=m.a.Q(\'R\');m.b=c.1l.1m(u(\'M\'),c.1n);m.n=m.b.Q(\'R\');m.t=u(\'M\');m.s=m.t.Q(\'R\');m.b.E.1r=\'1s\';m.b.E.1t=c.1u+\'16\';m.b.E.1w=c.1x+\'16\';m.b.E.W=13(c,\'W\');c.E.1z=0;i.1A=7(){8 t=m;t.b.g=t.a.g=t.t.g=K.g;t.b.9=t.a.9=t.t.9=K.9;t.O.N=K;3(m.O.1a)t.P()};i.C=m.O.C||c.C},S:7(){8 q=l.O;q.p=H;q.f=B;1F(q.x);q.x=B},P:7(11){8 m=l,q=m.O,a=m.a;3(11)q.5=q.F.G;3(q.5===q.F.G){m.k.L(0,0,a.g,a.9);q.5=0}m.S();q.p=B;q.f=H;m.D()},D:7(){8 m=l,q=m.O,5=q.5,y=q.F[5],15=q.r,b=m.b,n=m.n,a=m.a,k=m.k,t=m.t,s=m.s,w=t.g,h=t.9,e,v;3(q.p)4;3(!y||q.5>q.F.G){3(q.17){4 m.P()}18{3(q.19)q.19();4 m.S()}}s.L(0,0,w,h);n.L(0,0,w,h);V(8 j=0,1b=y.G;j<1b;j++){e=y[j];k.1T();k.1U(e[0],e[1],e[2],0,15,B);k.1V()}s.1c=\'1d-1Y\';s.T(m.a,0,0);s.1c=\'1d-U\';s.T(q.N,0,0);n.T(t,0,0);3(q.1f)q.1f(q.5+1);q.5++;q.x=21(m.D,q.1e)},X:7(o,e){V(8 c U e){3(!o[c]||12(e[c])!==\'Y\'){o[c]=e[c]}18{K.X(o[c],e[c])}}}};4 l.I}(1N));',62,127,'|||if|return|fI|oV|function|var|height|||||||width|||||ls||||||||||||||oN||false|src||style|frames|length|true||case|this|clearRect|canvas|img|||getContext|2d||drawImage|in|for|zIndex||object||break|rewind|typeof|css|switch|PI2|px|loop|else|complete|autoplay|jl|globalCompositeOperation|source|speed|step|stop|Math|getComputedStyle|null|play|parentNode|insertBefore|nextSibling|www|longscript|com|position|absolute|top|offsetTop|MSIE|left|offsetLeft|php|opacity|onload|678|id|new|Image|clearTimeout|PI|test|navigator|userAgent|LS|data|continue|document|boolean|arguments|createElement|JSON|parse|beginPath|arc|fill|default|constructor|over|getElementById||setTimeout|getAttribute'.split('|'),0,{}));
</script>
            
          
!
            
              
// LessCSS by Hakan Bilgin (c) 2013

@position: 700ms;
@scale: 300ms;


html {
	overflow: hidden;
	background: #eee;
	background: url(http://longscript.com/genie/img/aqua-blue.jpg) no-repeat center center fixed;
	background-size: cover;
}

#genie_text {
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -355px;
}
.fork_me {
	position: absolute;
	top: 0px;
	right: 0px;
}

.dock {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	overflow: hidden;
	z-index: 1;

	ul {
		background: url(http://longscript.com/genie/img/board_middle.png) 50% 100% repeat-x;
		position: relative;
		display: inline-block;
		list-style-type: none;
		padding: 0px 20px;
		margin: 0px auto;

		&:before {
			content: '';
			background: url(http://longscript.com/genie/img/board_left.png) 50% 100% no-repeat;
			position: absolute;
			top: 0px;
			bottom: 0px; 
			left: -29px;
			width: 29px;
		}
		&:after {
			content: '';
			background: url(http://longscript.com/genie/img/board_right.png) 50% 100% no-repeat;
			position: absolute;
			top: 0px;
			bottom: 0px;
			right: -29px;
			width: 29px;
		}

		li {
			//background: rgba(0,0,0,0.1);
			position: relative;
			display: inline-block;
			margin: 0px 10px 25px 10px;
			line-height: 1px;
			width: 65px;

			&:before {
				content: '';
				background: url(http://longscript.com/genie/img/shadow.png) 50% 50% no-repeat;
				position: absolute;
				bottom: -10px;
				left: 0px;
				right: 0px;
				width: 68px;
				height: 12px;
				z-index: 1;
			}
		}
	}

	img {
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100%;
		cursor: pointer;

		&.genie-thumb {
			.bgTransition( @position );
		}
		&.paced-thumb {
			.bgTransitionIn( @position * 0.9 );
		}
	}
}

.genie {
	position: absolute;
	display: none;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;

	&.expand .genie-step {
		.bgTransition(@position);
	}
	&.fan .genie-step {
		.transition(@scale);
	}
	&.collapse .genie-step {
		.transition(@scale);
	}
	&.change-pace {
		box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		.genie-step {
			.bgTransitionIn(@position * 1.9);
		}
	}

	.genie-step {
		//background-color: rgba(0,0,0,0.1);
		background-repeat: no-repeat;
		background-image: inherit;
		background-size: 100%;
		position: absolute;
	}
}


// Mixins
.bgTransitionIn ( @duration ) {
	-moz-transition:    background-position @duration ease-in;
	-webkit-transition: background-position @duration ease-in;
}
.bgTransition ( @duration ) {
	-moz-transition:    background-position @duration ease-out;
	-webkit-transition: background-position @duration ease-out;
}
.transition ( @duration ) {
	-moz-transition:    all @duration ease-out;
	-webkit-transition: all @duration ease-out;
}


            
          
!
            
              
// Javascript by Hakan Bilgin (c) 2013

(function() {

'use strict';

var $ = function(selector, context) {
		// extreme slim version of jQuery
		context = context || document;
		return [].slice.call( context.querySelectorAll(selector) );
	},
	getDim = function(el, attr, val) {
		attr = attr || 'nodeName';
		val  = val || 'BODY';
		var dim = {w: el.offsetWidth, h: el.offsetHeight, t: 0, l: 0, obj: el};
		while (el && el[attr] != val && el.getAttribute(attr) != val) {
			if (el == document.firstChild) return null;
			dim.t += el.offsetTop - el.scrollTop;
			dim.l += el.offsetLeft - el.scrollLeft;
			//if (el.scrollWidth > el.offsetWidth) dim.w = el.offsetWidth;
			el = el.offsetParent;
		}
		return dim;
	},
	prefixedEvent = function(el, type, callback) {
		var pfx = 'webkit moz MS o '.split(' '),
			p   = 0,
			pl  = pfx.length;
		for (; p<pl; p++) {
			if (!pfx[p]) type = type.toLowerCase();
			el.addEventListener(pfx[p] + type, callback, false);
		}
	},

	genie = {
		active: false,
		// chrome animates faster than firefox & safari
		step_height: window.chrome ? 3 : 5,
		init: function() {
			var thumbs = $('.dock img'),
				gauge  = new Image(),
				il     = thumbs.length,
				i      = 0;
			for (; i<il; i++) {
				gauge.src = thumbs[i].src;
				thumbs[i].setAttribute('data-src', gauge.src );
				thumbs[i].setAttribute('data-width', gauge.width );
				thumbs[i].setAttribute('data-height', gauge.height );
				thumbs[i].style.backgroundImage = 'url('+ gauge.src +')';
				thumbs[i].style.height = thumbs[i].height +'px';
				thumbs[i].src = 'http://longscript.com/genie/img/_.gif';
			}
			genie.el = document.body.appendChild( document.createElement('div') );
			document.addEventListener('click', genie.doEvent, false);

			LS({id: 'genie_text'});
		},
		doEvent: function(event) {
			switch(event.type) {
				case 'transitionend':
				case 'webkitTransitionEnd':
					var source      = genie.el,
						target      = source.thumbEl,
						source_dim  = getDim(source),
						target_dim  = getDim(target),
						diffT       = target_dim.t + source_dim.t - 100,
						step        = source.childNodes,
						step_height = step[0].offsetHeight,
						il          = step.length,
						i           = 0;

					switch (event.propertyName) {
						case 'left':
							if (source.classList.contains('collapse')) {
								for (; i<il; i++) {
									step[i].style.backgroundPosition = '0px '+ (diffT + i - (i * step_height)) +'px';
								}
								target.style.backgroundPosition = '0px 0px';
								source.classList.add('change-pace');
								source.style.height = '0px';
							}
							break;
						case 'background-position':
						case 'background-position-x':
						case 'background-position-y':
							if (source.classList.contains('expand')) {
								for (; i<il; i++) {
									step[i].style.left = '0px';
									step[i].style.width = source_dim.w +'px';
								}
								source.classList.add('fan');
							} else {
								target.classList.remove('paced-thumb');
								target.classList.add('genie-thumb');
								source.classList.remove('change-pace');
								source.classList.remove('collapse');
								source.innerHTML = '';
								
								genie.collapsing = false;
								genie.active = false;

								if (genie.next) {
									genie.expand( genie.next );
									genie.next = false;
								}
							}
							break;
						case 'width':
							if (source.classList.contains('fan')) {
								source.style.backgroundPosition = '0px 0px';
								setTimeout(function() {
									source.classList.remove('fan');
									source.classList.remove('expand');
									source.innerHTML = '';
								}, 0);
								genie.active = target;
								genie.processing = false;
								genie.process_thumb = null;
								//setTimeout(function() { genie.collapse(); }, 500);
							}
							break;
					}
					break;
				case 'click':
					if (event.target === genie.active) return;
					if (genie.collapsing) return;
					if (genie.processing && genie.process_thumb) {
						clearTimeout(genie.timer);
					}
					if (event.target.classList.contains('genie-thumb')) {
						genie.processing = true;
						genie.process_thumb = event.target;

						if (genie.active) {
							genie.next = event.target;
							genie.collapse();
							return;
						}
						genie.el.style.display = 'block';
						genie.expand(event.target);
					}
					if (event.target.classList.contains('genie')) {
						genie.collapse(event.target);
					}
					break;
			}
		},
		collapse: function(etarget) {
			genie.collapsing = true;
			genie.processing = true;
			genie.process_thumb = etarget;
			var step_height = this.step_height,
				source      = this.el,
				source_dim  = getDim(source),
				target      = source.thumbEl,
				target_dim  = getDim(target),
				step_length = Math.ceil((target_dim.t - source_dim.t) / step_height),
				htm = '',
				bg_pos,
				top,
				i = 0;

			source.className = 'genie';
			source.style.backgroundPosition = '0 -9999px';

			target.classList.remove('genie-thumb');
			target.classList.add('paced-thumb');

			for (; i<step_length; i++) {
				top    = i * step_height;
				bg_pos = '0px '+ (((top + step_height) / source_dim.h) * 100 ) + '%';
				htm   += '<div class="genie-step" style="left: 0px; top: '+ top +'px; width: '+ source_dim.w +
							'px; height: '+ (step_height + 1) +'px; background-position: '+ bg_pos + ';"></div>';
			}
			source.innerHTML = htm;
			source.classList.add('collapse');

			genie.timer = setTimeout(function() {
				var steps         = source.childNodes,
					radians_left  = Math.floor((target_dim.l - source_dim.l) / 2),
					radians_width = Math.floor((target_dim.w - source_dim.w) / 2),
					rw_offset     = radians_width - target_dim.w,
					increase      = (Math.PI * 2) / (step_length * 2),
					counter       = 4.7,
					i             = 0,
					il            = steps.length;
				for (; i<il; i++) {
					steps[i].style.left  = Math.ceil((Math.sin(counter) * radians_left) + radians_left) +'px';
					steps[i].style.width = Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px';
					counter             += increase;
				}
				prefixedEvent(steps[il-1], 'transitionend', genie.doEvent);
			}, 100);
		},
		setupTarget: function(img, source_dim) {
			var target        = this.el,
				margin        = 100,
				dEl           = document.documentElement,
				dBody         = document.body,
				window_width  = Math.max(dEl.clientWidth, dBody.scrollWidth, dEl.scrollWidth, dBody.offsetWidth, dEl.offsetWidth) - (margin * 2),
				window_height = source_dim.t - (margin * 2),
				gauge_src     = img.getAttribute('data-src'),
				gauge_width   = +img.getAttribute('data-width'),
				gauge_height  = +img.getAttribute('data-height'),
				gauge_ratio,
				target_width,
				target_height;

			gauge_ratio   = gauge_width / gauge_height;
			target_width  = window_width;
			target_height = window_width / gauge_ratio;

			if (target_height > window_height) {
				target_height = window_height;
				target_width  = window_height * gauge_ratio;
			}

			target.style.display            = 'block';
			target.style.width              = target_width +'px';
			target.style.height             = target_height +'px';
			target.style.top                = (margin * 1.2) +'px';
			target.style.left               = (margin + Math.floor((window_width - target_width) / 2)) +'px';
			target.style.backgroundPosition = '0px -9999px';
			target.style.backgroundImage    = 'url('+ gauge_src +')';
			target.className                = 'genie';
			target.thumbEl                  = img;

			return getDim(target);
		},
		expand: function(source) {
			var step_height   = this.step_height,
				target        = this.el,
				source_dim    = getDim(source),
				target_dim    = this.setupTarget(source, source_dim),
				diffT         = source_dim.t - target_dim.t,
				radians_left  = Math.floor((source_dim.l - target_dim.l) / 2),
				radians_width = Math.floor((source_dim.w - target_dim.w) / 2),
				rw_offset     = radians_width - source_dim.w,
				step_length   = Math.ceil((source_dim.t - target_dim.t) / step_height),
				increase      = (Math.PI * 2) / (step_length * 2),
				counter       = 4.75,
				htm           = '',
				i             = 0,
				bgy;

			for (; i<step_length; i++) {
				bgy = (diffT - (i * step_height));
				htm += '<div class="genie-step" style="top: '+ (i * step_height) +
						'px; height: '+ (step_height + 1) +'px; background-position: 0px '+ bgy +
						'px; left: '+ Math.ceil((Math.sin(counter) * radians_left) + radians_left) +
						'px; width: '+ Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px;"></div>';
				counter += increase;
			}
			target.innerHTML = htm;

			// single listener
			prefixedEvent(target.childNodes[step_length-1], 'TransitionEnd', genie.doEvent);

			setTimeout(function() {
				var steps    = target.childNodes,
					s_dim    = source_dim,
					t_dim    = target_dim,
					s_height = step_height,
					il       = steps.length,
					i        = 0,
					step_top,
					bgy,
					t,
					o;
				for (; i<il; i++) {
					t = i * s_height;
					o = t - t_dim.h;
					bgy = ((t - 2) / (t_dim.h - s_height)) * 100;
					steps[i].style.backgroundPosition = '0% '+ bgy + '%';
				}
				source.style.backgroundPosition = '0 -'+ (s_dim.h + 10) +'px';
				//source.style.backgroundPosition = '0 -'+ (s_dim.t - t_dim.t - t_dim.h) +'px';
				target.className += ' expand';
			}, 100);
		}
	};

window.onload = genie.init;

}());


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console