<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=768px, user-scalable=no"/>
</head>
<body>
<div class="by">
<div class="by__text by__text--1">demo for</div>
<div class="by__text by__text--2">by</div><a href="https://github.com/legomushroom/mojs" title="mojs github page" class="by__logo by__logo--mojs"></a><a href="https://twitter.com/legomushroom" title="@legomushroom on twitter" class="by__logo by__logo--legomushroom"></a>
</div>
<div id="js-curtain" class="curtain">
<div class="curtain__progress-text">loading..</div>
<div id="js-progress-gradient" class="curtain__progress-text-gradient"></div>
<div id="js-progress" class="curtain__progress"></div>
</div>
<div id="js-close-btn" class="close">
<div id="js-close-btn-inner" class="close__inner"></div>
</div>
<div id="js-content" class="content">
<div id="js-dust-1" class="dust dust--1 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="10" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.6" ry="0.2" stroke-width="9.8" stroke-dasharray="3.4" stroke-dashoffset="6.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3.2" ry="0.4" stroke-width="9.6" stroke-dasharray="6.8" stroke-dashoffset="13.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.800000000000001" ry="0.6000000000000001" stroke-width="9.4" stroke-dasharray="10.2" stroke-dashoffset="20.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6.4" ry="0.8" stroke-width="9.2" stroke-dasharray="13.6" stroke-dashoffset="27.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8" ry="1" stroke-width="9" stroke-dasharray="17" stroke-dashoffset="34" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9.600000000000001" ry="1.2000000000000002" stroke-width="8.8" stroke-dasharray="20.4" stroke-dashoffset="40.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="11.200000000000001" ry="1.4000000000000001" stroke-width="8.6" stroke-dasharray="23.8" stroke-dashoffset="47.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12.8" ry="1.6" stroke-width="8.4" stroke-dasharray="27.2" stroke-dashoffset="54.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="14.4" ry="1.8" stroke-width="8.2" stroke-dasharray="30.599999999999998" stroke-dashoffset="61.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16" ry="2" stroke-width="8" stroke-dasharray="34" stroke-dashoffset="68" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="17.6" ry="2.2" stroke-width="7.8" stroke-dasharray="37.4" stroke-dashoffset="74.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19.200000000000003" ry="2.4000000000000004" stroke-width="7.6" stroke-dasharray="40.8" stroke-dashoffset="81.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="20.8" ry="2.6" stroke-width="7.4" stroke-dasharray="44.199999999999996" stroke-dashoffset="88.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22.400000000000002" ry="2.8000000000000003" stroke-width="7.199999999999999" stroke-dasharray="47.6" stroke-dashoffset="95.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24" ry="3" stroke-width="7" stroke-dasharray="51" stroke-dashoffset="102" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25.6" ry="3.2" stroke-width="6.8" stroke-dasharray="54.4" stroke-dashoffset="108.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27.200000000000003" ry="3.4000000000000004" stroke-width="6.6" stroke-dasharray="57.8" stroke-dashoffset="115.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28.8" ry="3.6" stroke-width="6.4" stroke-dasharray="61.199999999999996" stroke-dashoffset="122.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="30.400000000000002" ry="3.8000000000000003" stroke-width="6.199999999999999" stroke-dasharray="64.6" stroke-dashoffset="129.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="32" ry="4" stroke-width="6" stroke-dasharray="68" stroke-dashoffset="136" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="33.6" ry="4.2" stroke-width="5.8" stroke-dasharray="71.39999999999999" stroke-dashoffset="142.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="35.2" ry="4.4" stroke-width="5.6" stroke-dasharray="74.8" stroke-dashoffset="149.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="36.800000000000004" ry="4.6000000000000005" stroke-width="5.3999999999999995" stroke-dasharray="78.2" stroke-dashoffset="156.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="38.400000000000006" ry="4.800000000000001" stroke-width="5.199999999999999" stroke-dasharray="81.6" stroke-dashoffset="163.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="40" ry="5" stroke-width="5" stroke-dasharray="85" stroke-dashoffset="170" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="41.6" ry="5.2" stroke-width="4.8" stroke-dasharray="88.39999999999999" stroke-dashoffset="176.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="43.2" ry="5.4" stroke-width="4.6" stroke-dasharray="91.8" stroke-dashoffset="183.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="44.800000000000004" ry="5.6000000000000005" stroke-width="4.3999999999999995" stroke-dasharray="95.2" stroke-dashoffset="190.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="46.400000000000006" ry="5.800000000000001" stroke-width="4.199999999999999" stroke-dasharray="98.6" stroke-dashoffset="197.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="48" ry="6" stroke-width="4" stroke-dasharray="102" stroke-dashoffset="204" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="49.6" ry="6.2" stroke-width="3.8" stroke-dasharray="105.39999999999999" stroke-dashoffset="210.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="51.2" ry="6.4" stroke-width="3.5999999999999996" stroke-dasharray="108.8" stroke-dashoffset="217.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="52.800000000000004" ry="6.6000000000000005" stroke-width="3.3999999999999995" stroke-dasharray="112.2" stroke-dashoffset="224.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="54.400000000000006" ry="6.800000000000001" stroke-width="3.1999999999999993" stroke-dasharray="115.6" stroke-dashoffset="231.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="56" ry="7" stroke-width="3" stroke-dasharray="119" stroke-dashoffset="238" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="57.6" ry="7.2" stroke-width="2.8" stroke-dasharray="122.39999999999999" stroke-dashoffset="244.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="59.2" ry="7.4" stroke-width="2.5999999999999996" stroke-dasharray="125.8" stroke-dashoffset="251.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="60.800000000000004" ry="7.6000000000000005" stroke-width="2.3999999999999995" stroke-dasharray="129.2" stroke-dashoffset="258.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="62.400000000000006" ry="7.800000000000001" stroke-width="2.1999999999999993" stroke-dasharray="132.6" stroke-dashoffset="265.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="64" ry="8" stroke-width="2" stroke-dasharray="136" stroke-dashoffset="272" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="65.60000000000001" ry="8.200000000000001" stroke-width="1.799999999999999" stroke-dasharray="139.4" stroke-dashoffset="278.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="67.2" ry="8.4" stroke-width="1.5999999999999996" stroke-dasharray="142.79999999999998" stroke-dashoffset="285.59999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="68.8" ry="8.6" stroke-width="1.4000000000000004" stroke-dasharray="146.2" stroke-dashoffset="292.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="70.4" ry="8.8" stroke-width="1.1999999999999993" stroke-dasharray="149.6" stroke-dashoffset="299.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="72" ry="9" stroke-width="1" stroke-dasharray="153" stroke-dashoffset="306" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="73.60000000000001" ry="9.200000000000001" stroke-width="0.7999999999999989" stroke-dasharray="156.4" stroke-dashoffset="312.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="75.2" ry="9.4" stroke-width="0.5999999999999996" stroke-dasharray="159.79999999999998" stroke-dashoffset="319.59999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="76.80000000000001" ry="9.600000000000001" stroke-width="0.3999999999999986" stroke-dasharray="163.2" stroke-dashoffset="326.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="78.4" ry="9.8" stroke-width="0.1999999999999993" stroke-dasharray="166.6" stroke-dashoffset="333.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
</div>
<div id="js-dust-2" class="dust dust--2 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="8" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1" ry="0.16" stroke-width="7.84" stroke-dasharray="3.6" stroke-dashoffset="1.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="2" ry="0.32" stroke-width="7.68" stroke-dasharray="7.2" stroke-dashoffset="2.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3" ry="0.48" stroke-width="7.52" stroke-dasharray="10.8" stroke-dashoffset="4.199999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4" ry="0.64" stroke-width="7.36" stroke-dasharray="14.4" stroke-dashoffset="5.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="5" ry="0.8" stroke-width="7.2" stroke-dasharray="18" stroke-dashoffset="7" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6" ry="0.96" stroke-width="7.04" stroke-dasharray="21.6" stroke-dashoffset="8.399999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7" ry="1.12" stroke-width="6.88" stroke-dasharray="25.2" stroke-dashoffset="9.799999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8" ry="1.28" stroke-width="6.72" stroke-dasharray="28.8" stroke-dashoffset="11.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9" ry="1.44" stroke-width="6.5600000000000005" stroke-dasharray="32.4" stroke-dashoffset="12.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="10" ry="1.6" stroke-width="6.4" stroke-dasharray="36" stroke-dashoffset="14" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="11" ry="1.76" stroke-width="6.24" stroke-dasharray="39.6" stroke-dashoffset="15.399999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12" ry="1.92" stroke-width="6.08" stroke-dasharray="43.2" stroke-dashoffset="16.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="13" ry="2.08" stroke-width="5.92" stroke-dasharray="46.800000000000004" stroke-dashoffset="18.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="14" ry="2.24" stroke-width="5.76" stroke-dasharray="50.4" stroke-dashoffset="19.599999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="15" ry="2.4" stroke-width="5.6" stroke-dasharray="54" stroke-dashoffset="21" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16" ry="2.56" stroke-width="5.4399999999999995" stroke-dasharray="57.6" stroke-dashoffset="22.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="17" ry="2.72" stroke-width="5.279999999999999" stroke-dasharray="61.2" stroke-dashoffset="23.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="18" ry="2.88" stroke-width="5.12" stroke-dasharray="64.8" stroke-dashoffset="25.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19" ry="3.04" stroke-width="4.96" stroke-dasharray="68.4" stroke-dashoffset="26.599999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="20" ry="3.2" stroke-width="4.8" stroke-dasharray="72" stroke-dashoffset="28" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="21" ry="3.36" stroke-width="4.640000000000001" stroke-dasharray="75.60000000000001" stroke-dashoffset="29.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22" ry="3.52" stroke-width="4.48" stroke-dasharray="79.2" stroke-dashoffset="30.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="23" ry="3.68" stroke-width="4.32" stroke-dasharray="82.8" stroke-dashoffset="32.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24" ry="3.84" stroke-width="4.16" stroke-dasharray="86.4" stroke-dashoffset="33.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25" ry="4" stroke-width="4" stroke-dasharray="90" stroke-dashoffset="35" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="26" ry="4.16" stroke-width="3.84" stroke-dasharray="93.60000000000001" stroke-dashoffset="36.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27" ry="4.32" stroke-width="3.6799999999999997" stroke-dasharray="97.2" stroke-dashoffset="37.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28" ry="4.48" stroke-width="3.5199999999999996" stroke-dasharray="100.8" stroke-dashoffset="39.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="29" ry="4.64" stroke-width="3.3600000000000003" stroke-dasharray="104.4" stroke-dashoffset="40.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="30" ry="4.8" stroke-width="3.2" stroke-dasharray="108" stroke-dashoffset="42" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="31" ry="4.96" stroke-width="3.04" stroke-dasharray="111.60000000000001" stroke-dashoffset="43.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="32" ry="5.12" stroke-width="2.88" stroke-dasharray="115.2" stroke-dashoffset="44.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="33" ry="5.28" stroke-width="2.7199999999999998" stroke-dasharray="118.8" stroke-dashoffset="46.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="34" ry="5.44" stroke-width="2.5599999999999996" stroke-dasharray="122.4" stroke-dashoffset="47.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="35" ry="5.6000000000000005" stroke-width="2.3999999999999995" stroke-dasharray="126" stroke-dashoffset="49" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="36" ry="5.76" stroke-width="2.24" stroke-dasharray="129.6" stroke-dashoffset="50.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="37" ry="5.92" stroke-width="2.08" stroke-dasharray="133.20000000000002" stroke-dashoffset="51.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="38" ry="6.08" stroke-width="1.92" stroke-dasharray="136.8" stroke-dashoffset="53.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="39" ry="6.24" stroke-width="1.7599999999999998" stroke-dasharray="140.4" stroke-dashoffset="54.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="40" ry="6.4" stroke-width="1.5999999999999996" stroke-dasharray="144" stroke-dashoffset="56" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="41" ry="6.5600000000000005" stroke-width="1.4399999999999995" stroke-dasharray="147.6" stroke-dashoffset="57.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="42" ry="6.72" stroke-width="1.2800000000000002" stroke-dasharray="151.20000000000002" stroke-dashoffset="58.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="43" ry="6.88" stroke-width="1.12" stroke-dasharray="154.8" stroke-dashoffset="60.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="44" ry="7.04" stroke-width="0.96" stroke-dasharray="158.4" stroke-dashoffset="61.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="45" ry="7.2" stroke-width="0.7999999999999998" stroke-dasharray="162" stroke-dashoffset="62.99999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="46" ry="7.36" stroke-width="0.6399999999999997" stroke-dasharray="165.6" stroke-dashoffset="64.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="47" ry="7.5200000000000005" stroke-width="0.47999999999999954" stroke-dasharray="169.20000000000002" stroke-dashoffset="65.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="48" ry="7.68" stroke-width="0.3200000000000003" stroke-dasharray="172.8" stroke-dashoffset="67.19999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="49" ry="7.84" stroke-width="0.16000000000000014" stroke-dasharray="176.4" stroke-dashoffset="68.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
</div>
<div id="js-dust-3" class="dust dust--3 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="5" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0.6" ry="0.08" stroke-width="4.9" stroke-dasharray="1.8" stroke-dashoffset="0.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.2" ry="0.16" stroke-width="4.8" stroke-dasharray="3.6" stroke-dashoffset="0.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.7999999999999998" ry="0.24" stroke-width="4.7" stroke-dasharray="5.4" stroke-dashoffset="1.2000000000000002" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="2.4" ry="0.32" stroke-width="4.6" stroke-dasharray="7.2" stroke-dashoffset="1.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3" ry="0.4" stroke-width="4.5" stroke-dasharray="9" stroke-dashoffset="2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3.5999999999999996" ry="0.48" stroke-width="4.4" stroke-dasharray="10.8" stroke-dashoffset="2.4000000000000004" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.2" ry="0.56" stroke-width="4.3" stroke-dasharray="12.6" stroke-dashoffset="2.8000000000000003" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.8" ry="0.64" stroke-width="4.2" stroke-dasharray="14.4" stroke-dashoffset="3.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="5.3999999999999995" ry="0.72" stroke-width="4.1" stroke-dasharray="16.2" stroke-dashoffset="3.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6" ry="0.8" stroke-width="4" stroke-dasharray="18" stroke-dashoffset="4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6.6" ry="0.88" stroke-width="3.9" stroke-dasharray="19.8" stroke-dashoffset="4.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7.199999999999999" ry="0.96" stroke-width="3.8" stroke-dasharray="21.6" stroke-dashoffset="4.800000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7.8" ry="1.04" stroke-width="3.7" stroke-dasharray="23.400000000000002" stroke-dashoffset="5.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8.4" ry="1.12" stroke-width="3.5999999999999996" stroke-dasharray="25.2" stroke-dashoffset="5.6000000000000005" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9" ry="1.2" stroke-width="3.5" stroke-dasharray="27" stroke-dashoffset="6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9.6" ry="1.28" stroke-width="3.4" stroke-dasharray="28.8" stroke-dashoffset="6.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="10.2" ry="1.36" stroke-width="3.3" stroke-dasharray="30.6" stroke-dashoffset="6.800000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svPX = (1/16)rem
gs = 10*PX
rect()
width arguments
height arguments
nw()
top arguments
left arguments
circle()
rect arguments
border-radius 50%
easy-click()
&:after
content ''
position absolute
rect 200%
z-index 1
nw -50%
c-deep-purple = #28143f
body
background c-deep-purple
font-size 16px
margin 0
padding 0
user-select none
overflow hidden
font-family Open Sans, sans-serif
min-width 768px
.curtain
rect 100%
position fixed
nw 0
background rgba(#28143f, 1)
z-index 30
opacity 1
transition all .8s ease-out
procWidth = 150
&__progress
height 1*PX
width procWidth*PX
border-radius 4*PX
background white
position absolute
nw 50%
margin-left -(procWidth/2)*PX
margin-top - PX
transition width .3s ease-out
&__progress-text,
&__progress-text-gradient
position absolute
color white
font-size 10*PX
font-weight 100
letter-spacing 1.4*PX
position absolute
margin-left -(procWidth/2)*PX
margin-top -2*gs
nw 50%
&__progress-text-gradient
width 1.5*procWidth*PX
height 16*PX
// border 1px solid red
z-index 1
transition transform .3s ease-out
background linear-gradient(to right, rgba(40,18,64,0) 20%,rgba(40,18,64,1) 50%)
&.is-hide
opacity 0
z-index 0
.badge
position fixed
nw 0
z-index 10
color white
.wrapper
position absolute
z-index 1
top 0
bottom 0
left 0
right 0
overflow hidden
.particles
perspective 500px
perspective-origin 50% 50%
overflow visible
position relative
user-select none
position absolute
z-index 1
tap-highlight-color rgba(0,0,0,0)
// transform translateZ(0)
user-select none
text-size-adjust none
particleSize = 150/2
contentWidth = 540
contentHeight = 280
{el = '.particle'}
rect 2*particleSize*PX
position absolute
nw 0
text-align center
display block
line-height (2*particleSize)*PX
&.is-open
z-index 20
{el}__inner
transform scale(15) translateZ(-1000px)
{el}__content
display block
&__inner
circle 100%
position absolute
nw 0
// transform translateZ(0)
&__over-mobile
display none
.desktop &
display block
.content
position fixed
width contentWidth*PX
height contentHeight*PX
display block
margin-left -(contentWidth/2)*PX
margin-top -(contentHeight/2)*PX
// border 1px solid white
z-index 2
nw 50%
transform translateX(-5000px)
&__inner
position absolute
rect 100%
&.is-show
display block
.project
color white
position relative
rect 100%
&__text,
&__img
position absolute
width 50%
height 100%
&__text
left 57%
margin-top 3*gs
width 40%
text-align left
line-height 1.6
h2
text-transform uppercase
&__shadow-wrap
transform-origin 100% center
&__shadow
position absolute
width 300px
height 50px
opacity 0
top 204px
right 8px
transform rotateX(80deg)
border-radius 26px
background linear-gradient(to right, rgba(58,8,57,0) 0%,rgba(58,8,57,0.65) 100%)
transform-origin 100% center
.ie &
display none
.by
background white
position absolute
bottom 0
right 0
height 28*PX
width 110*PX
z-index 40
opacity .75
border-top-left-radius 12*PX
&:hover
opacity 1
&__text
color c-deep-purple
font-size 8.5*PX
letter-spacing .2*PX
position absolute
top 9*PX
.ios &
top 8*PX
&--1
left 7*PX
&--2
left 70*PX
&__logo
background #f1f1f1
position absolute
circle 16*PX
background url('') no-repeat center
center
background-size 100% 100%
top 7*PX
.ios &
top 6*PX
&--mojs
left 49*PX
background-image url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/mojs.svg')
&--legomushroom
left 85*PX
background-image url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/legomushroom.svg')
.sprite
&__frame
position absolute
nw 0
display block
// transform translateZ(0)
rect 100%
&__ellipse
fill none
stroke white
.dust
position absolute
rect 200*PX
height 50*PX
&--1
top 270*PX
left 100*PX
&--2,
&--3
// &--4
top 227*PX
&--2
left -40*PX
opacity .9
&--3
left -70*PX
opacity .7
blobSize = 100
.blob-circle
position absolute
nw -50%
z-index 1
margin-left -(blobSize/2)*PX
margin-top -(blobSize/2)*PX
rect blobSize*PX
.blob-circle-wrap
width 0px
height 0px
overflow hidden
.close
position fixed
circle 30*PX
top 20%
left -10%
z-index -1
transition opacity .25s ease-out
display none
&:hover
cursor pointer
&.is-show
display block
opacity 1
left 75%
z-index 10
// image
.image-ie {
width: 256*PX;
height: 192*PX;
background: url('i/mojs-logo.png') no-repeat center center;
background-size: 100% 100%;
position: absolute;
top: 4.5*gs;
left: .8*gs;
border-radius: 15*PX;
display: none;
.ie & {
display: block;
}
}
.image {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
font-size: 100%;
background: url('i/mojs-logo.png') no-repeat center center;
.ie & {
display: none;
}
}
.scene, .shape, .face, .face-wrapper, .cr {
position: absolute;
transform-style: preserve-3d;
}
.shape {
opacity: 0;
}
.scene {
width: 80em;
height: 80em;
top: 50%;
left: 50%;
margin: -40em 0 0 -40em;
transform: rotateX(90deg);
}
bgColor = #fff;
bgColorDark = darken(bgColor, 20);
// bgColorDark = #fff;
.cub-1 {
.ft, .bk,
.bm {
.photon-shader {
background-color: bgColor;
}
}
.ft, .bk,
.rt, .lt {
.photon-shader {
background-color: bgColorDark;
}
}
.bm {
.photon-shader {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/mojs-logo.png') no-repeat center center;
background-size: 100% 100%;
}
}
}
.cub-1 .cr .photon-shader {
background-color: bgColorDark;
}
.shape {
top: 50%;
left: 50%;
width: 0;
height: 0;
transform-origin: 50%;
}
.face, .face-wrapper {
overflow: hidden;
transform-origin: 0 0;
backface-visibility: hidden;
/* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
background-size: 100% 100%!important;
background-position: center;
}
.face-wrapper .face {
left: 100%;
width: 100%;
height: 100%
}
.photon-shader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.side {
left: 50%;
}
.cr, .cr .side {
height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
width: 100%;
height: 100%;
}
[class*="cuboid"] .bk {
left: 100%;
}
[class*="cuboid"] .rt {
transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
left: 100%;
}
[class*="cuboid"] .bm {
top: 100%;
}
/* .cub-1 styles */
.cub-1 {
transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
// opacity:1;
width:16em;
height:1em;
margin:-0.5em 0 0 -8em;
}
.cub-1 .ft {
transform:translateZ(6em);
}
.cub-1 .bk {
transform:translateZ(-6em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
width:12em;
height:1em;
}
.cub-1 .tp, .cub-1 .bm {
width:16em;
height:12em;
}
.cub-1 .face {
background-color:#FFFFFF;
}
.cub-1 .ft {
width:14em;
margin-left:1em;
}
.cub-1 .bk {
width:14em;
margin-left:-1em;
}
.cub-1 .rt, .cub-1 .lt {
width:10em;
}
.cub-1 .tp, .cub-1 .bm, .cub-1 .tp .photon-shader, .cub-1 .bm .photon-shader {
border-radius:1em;
}
.cub-1 .cr {
width:1em;
left:0.5em;
}
.cub-1 .cr-0 {
transform: translate3D(14em, 0, 5em);
}
.cub-1 .cr-1 {
transform: translate3D(14em, 0, -5em);
}
.cub-1 .cr-2 {
transform: translate3D(0, 0, -5em);
}
.cub-1 .cr-3 {
transform: translate3D(0, 0, 5em);
}
.cub-1 .cr-0 .s0 {
transform: rotateY(15deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s1 {
transform: rotateY(45deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s2 {
transform: rotateY(75deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s0 {
transform: rotateY(105deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s1 {
transform: rotateY(135deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s2 {
transform: rotateY(165deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s0 {
transform: rotateY(195deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s1 {
transform: rotateY(225deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s2 {
transform: rotateY(255deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s0 {
transform: rotateY(285deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s1 {
transform: rotateY(315deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s2 {
transform: rotateY(345deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .side {
width: 0.5608983848622454em;
}
var main = {
init: function(o) {
this.vars(); this.initContainer(); this.initClose(); this.initHideClose();
this.prepareSprites(); this.events(); this.draw();
setInterval(() => { this.updateProgress(false) }, 10)
return this;
},
initContainer: function () {
this.iscroll = new IScroll('#js-wrapper', {
scrollX: true, freeScroll: true, mouseWheel: true, probeType: 3
});
var x = -this.centerX + this.wWidth/2 + this.xOffset,
y = -this.centerY + this.wHeight/2 + this.yOffset;
this.iscroll.scrollTo(x, y, 10);
},
vars: function() {
this.S = 1; this.loadCnt = 0; this.maxLoadCnt = 8;
this.BLOB_DURATION = 500;
this.ext = this.isCanPlayMP3() ? 'mp3' : 'wav';
this.isIE = this.isIE();
this.isIOS = !!(/(iPad|iPhone|iPod)/g.test( navigator.userAgent ));
this.isIOS && document.body.classList.add('ios');
!this.isTabletMobile && document.body.classList.add('desktop');
this.progressStep = (150/this.maxLoadCnt) * (1/16);
this.getDOMElements();
this.particleRadius = parseInt(getComputedStyle(this.particles[0]).width, 10)/2;
this.particlesLength = this.particles.length;
this.radPoint = mojs.helpers.getRadialPoint;
this.particleBuffer = null; this.isOpen = false;
this.blobBase = 1.6; this.blob = this.blobBase; this.blobShift = this.blobBase;
this.xOffset = this.particleRadius + 25;
this.yOffset = 1.4*this.particleRadius;
var styles = getComputedStyle(this.particlesContainer);
this.width = parseInt(styles.width, 10); this.height = parseInt(styles.height,10);
this.prepareDust(); this.calcDimentions(); this.loadAssets();
var i = this.particlesLength;
while(i--) {
var particle = this.particles[i];
particle.x = parseInt(particle.getAttribute('data-left'), 10);
particle.y = parseInt(particle.getAttribute('data-top'), 10);
}
},
getDOMElements: function () {
this.particlesContainer = document.querySelector('#scroller');
this.particles = document.querySelectorAll('.particle');
this.closeBtn = document.querySelector('#js-close-btn');
this.blobCircle = document.querySelector('#js-blob-circle');
this.blobEllipses = this.blobCircle.querySelectorAll('#js-blob-circle-ellipse')
this.dust1 = document.querySelector('#js-dust-1');
this.dust2 = document.querySelector('#js-dust-2');
this.dust3 = document.querySelector('#js-dust-3');
this.dust4 = document.querySelector('#js-dust-4');
this.content = document.querySelector('#js-content');
this.curtain = document.querySelector('#js-curtain');
this.progress = document.querySelector('#js-progress');
this.progressGrad = document.querySelector('#js-progress-gradient');
},
draw: function() {
var origin = `${this.bubleCenter.x}px ${this.bubleCenter.y}px`,
h = mojs.h, inEasing = mojs.easing.cubic.in, i = this.particlesLength;
h.setPrefixedStyle(this.particlesContainer, 'perspective-origin', origin);
while(i--) {
this.particleBuffer = this.particles[i];
var x = Math.abs(this.bubleCenter.x-this.particleBuffer.x),
y = Math.abs(this.bubleCenter.y-this.particleBuffer.y),
radius = Math.sqrt(x*x + y*y),
a = this.blob - (2*radius)/this.size,
b = this.blobShift - (2*radius)/this.size, scaleMax = 1;
var delta = mojs.helpers.clamp(inEasing(a), 0.03, scaleMax),
deltaShift = h.clamp((inEasing(b)), 0.03, scaleMax),
isDeltaChanged = this.particleBuffer.prevDelta !== delta;
if (isDeltaChanged || this.particleBuffer.prevDeltaShift !== deltaShift) {
var translateZ = -150*(inEasing(1-deltaShift)),
transform = `scale(${delta}) translateZ(${translateZ}px)`;
h.setPrefixedStyle(this.particleBuffer, 'transform', transform);
this.particleBuffer.prevDelta = delta;
this.particleBuffer.prevDeltaShift = deltaShift;
}
}
requestAnimationFrame(this.draw.bind(this));
},
calcDimentions: function () {
this.wWidth = window.innerWidth; this.wHeight = window.innerHeight;
this.centerY = this.height/2 - this.wHeight/2;
this.centerX = this.width/2 - this.wWidth/2;
this.bubleCenter = { x: this.centerX, y: this.centerY }
var x = Math.sqrt(this.wHeight*this.wHeight),
y = Math.sqrt(this.wWidth*this.wWidth);
this.size = 1*Math.min(x, y)
},
start: function () { this.curtain.classList.add('is-hide'); this.startBlob(); },
startBlob: function () {
var tween = new mojs.Tween;
var t = new mojs.Timeline({
duration: 1200*this.S,
onUpdate: (p)=> {
this.blob = this.blobBase + .3*(1-mojs.easing.elastic.out(p));
}
});
var centerX = this.bubleCenter.x, centerY = this.bubleCenter.y;
var t2 = new mojs.Timeline({
duration: 1200*this.S, delay: 0*this.S,
onUpdate: (p)=> {
this.blobShift = this.blobBase + .5*(1-mojs.easing.elastic.out(p));
},
onStart: () => { this.closeScaleSound.play() }
});
tween.add(t, t2); tween.start();
},
updateProgress: function (isReturn = true) {
if (isReturn) {return}
var shift = (this.maxLoadCnt - ++this.loadCnt)*this.progressStep;
this.progress.style.width = `${shift}rem`;
mojs.h.setPrefixedStyle(this.progressGrad, 'transform', `translateX(-${(this.loadCnt*this.progressStep/1.3)}rem)`);
(this.loadCnt === this.maxLoadCnt) && this.start();
},
loadAssets: function () {
this.openSound = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-2.${this.ext}`], onload: this.updateProgress.bind(this)});
this.openSound2 = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.${this.ext}`], rate: .15, onload: this.updateProgress.bind(this)});
this.bounceSound = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bounce.${this.ext}`] });
this.closeSound = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.${this.ext}`], rate: .5, onload: this.updateProgress.bind(this) });
this.closeSound2 = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.${this.ext}`], rate: .75, onload: this.updateProgress.bind(this) });
this.closeSound3 = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.${this.ext}`], rate: .85, onload: this.updateProgress.bind(this) });
this.closeScaleSound = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.${this.ext}`], rate: .25, onload: this.updateProgress.bind(this) });
this.closeBtnSound = new Howl({ urls: [`https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.${this.ext}`], rate: 1, onload: this.updateProgress.bind(this) });
this.loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/mojs-logo.png');
},
loadImage: function (url) {
var image = new Image;
image.addEventListener('load', this.updateProgress.bind(this), false);
image.addEventListener('error', this.updateProgress.bind(this), false);
image.src = url;
},
isCanPlayMP3: function () {
var userAgent = navigator.userAgent;
return !(userAgent.indexOf("Opera") && (userAgent.indexOf('firefox') > -1));
},
isIE: function () {
return !!(window.navigator.msPointerEnabled && !window.PointerEvent);
},
isTabletMobile: (function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
})(),
setBubblePosition: function () {
this.bubleCenter.x = -this.iscroll.x + this.wWidth/2 + this.xOffset;
this.bubleCenter.y = -this.iscroll.y + this.wHeight/2 + this.yOffset;
},
events: function () {
window.addEventListener('resize', () => {
this.calcDimentions(); this.setBubblePosition()
});
(new Hammer(document.body)).on('tap', (e) => {
var el = e.target.parentNode;
if (this.isOpen) { return e.preventDefault() }
if (el.classList.contains('particle')) { this.showOnEl(el);}
else if (el.parentNode.classList.contains('particle')) {
this.showOnEl(el.parentNode);
}
});
(new Hammer(this.closeBtn)).on('tap', this.closeEl.bind(this));
document.addEventListener('touchmove', function (e) {e.preventDefault();}, false);
this.iscroll.on('scroll', this.setBubblePosition.bind(this));
},
initClose: function () {
var dur = 400*this.S;
var closeOption = {
parent: document.querySelector('#js-close-btn'),
type: 'circle',
radius: {0: 15},
fill: 'transparent',
stroke: 'white',
strokeWidth: {5:0},
x: '50%', y: '50%',
duration: dur,
isRunLess: true
}
this.closeCircle = new mojs.Transit(closeOption);
var closeCrossOption = {
type: 'cross',
delay: (.4*dur),
angle: 45,
strokeWidth: 2,
radius: {0:8},
isShowEnd: true,
onStart: () => { this.closeSound.play(); }
};
mojs.h.extend(closeCrossOption, closeOption);
this.closeCross = new mojs.Transit(closeCrossOption);
var closeBurstOption = {
type: 'line',
radius: {0: 30},
strokeWidth: {4:0},
delay: (.4*dur),
childOptions: { radius: {5:0} },
}
mojs.h.extend(closeBurstOption, closeOption);
this.closeBurst = new mojs.Burst(closeBurstOption);
var closeOption2 = {
parent: document.querySelector('#js-close-btn'),
type: 'circle',
radius: {0: 10},
fill: 'transparent',
stroke: 'white',
strokeWidth: {5:0},
x: '-20%', y: '-50%',
isRunLess: true,
delay: (.7*dur),
duration: 400*this.S,
onStart: () => { this.closeSound2.play(); }
}
this.closeCircle2 = new mojs.Transit(closeOption2);
var closeOption3 = {
x: '80%', y: '-30%',
radius: {0: 6},
delay: (1.1*dur),
duration: 300*this.S,
onStart: () => { this.closeSound3.play(); }
}
mojs.h.extend(closeOption3, closeOption2);
this.closeCircle3 = new mojs.Transit(closeOption3);
var closeOption4 = {
x: '50%', y: '130%',
radius: {0: 4},
delay: (.9*dur),
duration: 200*this.S,
onStart: () => { this.closeSound3.play(); }
}
mojs.h.extend(closeOption4, closeOption2);
this.closeCircle4 = new mojs.Transit(closeOption4);
this.showCloseBtnTween = new mojs.Tween;
this.showCloseBtnTween.add(
this.closeCircle.tween, this.closeCircle2.tween,
this.closeCircle3.tween, this.closeCircle4.tween,
this.closeCross.tween, this.closeBurst.tween
);
},
showClose: function () {
this.closeBtn.classList.add('is-show'); this.showCloseBtnTween.start();
},
initHideClose: function () {
this.hideBurst = new mojs.Burst({
x: '50%', y: '50%',
parent: this.closeBtn,
radius: {0: 100},
type: 'circle',
fill: 'white',
degree: 25,
isSwirl: true,
randomRadius: 1,
isRunLess: true,
childOptions: { radius: {'rand(12,5)':0} },
duration: 500*this.S,
onUpdate: (p) => {
p = mojs.easing.cubic.in(p);
mojs.h.setPrefixedStyle(this.closeCross.el, 'transform', `scale(${1-p})`)
},
onStart: () => { this.closeBtnSound.play(); },
onComplete: () => {
this.closeBtn.classList.remove('is-show');
mojs.h.setPrefixedStyle(this.closeCross.el, 'transform', `none`);
}
});
this.hideCircle = new mojs.Transit({
x: '50%', y: '50%',
parent: this.closeBtn,
type: 'circle',
radius: {0: 15},
fill: 'transparent',
stroke: 'white',
strokeWidth: { 8:0 },
isRunLess: true,
duration: 500*this.S
});
},
hideClose: function () { this.hideBurst.run(); this.hideCircle.run(); },
closeEl: function () {
this.iscroll.enabled = true; this.isOpen = false; this.hideClose()
var innerEl = this.currentEl.querySelector('.particle__inner'),
scaleDownTween = new mojs.Tween;
var scaleDownTimeline = new mojs.Timeline({
duration: 500*this.S,
onUpdate: (p)=> {
var np = 1-p, npe = mojs.easing.cubic.inout(np),
scaleSize = .75+18*npe, scale = `scale(${scaleSize})`;
mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
mojs.h.setPrefixedStyle(this.content, 'transform', `scale(${npe})`);
}
});
var scaleDownSoundTimeline = new mojs.Timeline({
delay: 0*this.S, onStart: () => { this.closeScaleSound.play() }
});
var scaleUpTimeline = new mojs.Timeline({
duration: 1000*this.S,
onUpdate: (p)=> {
var scaleSize = .75 + .25*mojs.easing.elastic.out(p),
scale = `scale(${scaleSize})`;
mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
},
onComplete: () => {
if (this.isOpen) {
return mojs.h.setPrefixedStyle(this.content, 'transform', `translate3d(-5000px,-5000px,0)`);
}
mojs.h.setPrefixedStyle(this.content, 'transform', `translate3d(-5000px,-5000px,0)`);
}
});
scaleDownTween.add(scaleDownTimeline); scaleDownTween.append(scaleUpTimeline);
var blobTween = new mojs.Tween;
var blobShiftDownTimeline = new mojs.Timeline({
duration: 1200*this.S, delay: 300*this.S,
onUpdate: (p)=> {
if (this.isOpen) { return }
this.blobShift = this.blobBase + (1-mojs.easing.elastic.out(p));
}
});
var blobDownTimeline = new mojs.Timeline({
duration: 2100*this.S, delay: 0*this.S,
onUpdate: (p)=> {
if (this.isOpen) { return }
this.blob = this.blobBase + .3*(1-mojs.easing.elastic.out(p));
}
});
blobTween.add(blobShiftDownTimeline, blobDownTimeline, scaleDownSoundTimeline)
this.jellyTween = new mojs.Tween;
this.jellyTween.add(scaleDownTween, blobTween);
this.jellyTween.start();
},
moveTextEl: function (el, p) {
p = mojs.easing.cubic.out(p);
var transform = `rotate(${90*(1-p)}deg) translateY(${200*(1-p)}%)`,
transformOrigin = `left ${80*(p)}%`;
mojs.h.setPrefixedStyle(el, 'transform', transform);
mojs.h.setPrefixedStyle(el, 'transform-origin', transformOrigin);
el.style.opacity = mojs.easing.cubic.out(p);
},
prepareDust: function () {
this.dust1Spriter = new mojs.Spriter({
el: this.dust1,
duration: 300*this.S,
delay: 275*this.S,
isRunLess: true
});
this.dust2Spriter = new mojs.Spriter({
el: this.dust2,
duration: 200*this.S,
delay: 575*this.S,
isRunLess: true
});
this.dust3Spriter = new mojs.Spriter({
el: this.dust3,
duration: 100*this.S,
delay: 725*this.S,
isRunLess: true
});
},
runDust: function () {
if (this.isTabletMobile || this.isIE) { return };
this.dust1Spriter.run(); this.dust2Spriter.run();
this.dust3Spriter.run();
},
showInnerPlastic: function (el) {
var tween = new mojs.Tween,
image = el.querySelector('.image'),
scene = el.querySelector('.shape'),
shadow = el.querySelector('#js-shadow'),
shadowWrap = el.querySelector('#js-shadow-wrap');
this.runDust();
var mp = new mojs.MotionPath({
path: { x: -300, y: -300 },
curvature: { x: '75%', y: '50%' },
offsetX: 300,
offsetY: 300,
el: image,
duration: (this.isIE) ? 200*this.S : 1000*this.S,
easing: 'cubic.out',
onPosit: function (p, x, y, angle) {
p = mojs.easing.expo.out(mojs.easing.cubic.in(p))
var rotate = `rotateX(70deg) rotateZ(${-60*(1-p)}deg)`,
translate = `translateX(${x}px) translateY(${y}px)`,
scale = `scaleY(${2.5 - 1.5*(p)})`
mojs.h.setPrefixedStyle(shadow, 'transform', `${translate} ${rotate} ${scale}`)
return `translate(${x}px, ${y}px)`;
},
});
var opacityEasing = mojs.easing.path('M0,0 C0,0 32.1191406,0.314142863 40.1669859,0 C40.1669859,0.165327852 50.9999996,-112.569017 74.0660521,0 C80.8905119,-16.0420643 87.1001393,-19.621745 92.0689049,0 C92.0689049,1.54522552 95.3231688,-14.8615687 100,0'),
bounceEasing = mojs.easing.path('M0,100 C28.3125,98.6523445 39.0445328,8.99375039 40.1669859,0 C40.1669859,-0.0485295402 50.9999996,152.873952 74.0660521,0 C80.8905119,21.9365596 87.1001393,26.7923438 92.0689049,0 C92.0689049,-1.92034044 95.3231688,20.3352347 100,0');
var timeline1 = new mojs.Timeline({
duration: (this.isIE) ? 200*this.S : 800*this.S,
onStart: ()=> {
mojs.h.setPrefixedStyle(this.content, 'transform', `translate3d(0,0,0)`);
},
onComplete: () => { this.showClose(); },
onUpdate: (p) => {
var b = mojs.easing.bounce.out(p), bin = mojs.easing.bounce.in(p),
t = mojs.easing.cubic.out(p),
rotate = `rotateY(${90*(1-b)}deg) rotateX(${70*(1-t)}deg) rotateZ(${90*(1-t)}deg)`,
scale = `scaleX(${opacityEasing(p)})`,
transform = `translate(${(-300*(mojs.easing.bounce.in(1-p)))-5}px, 2px) ${scale}`;
mojs.h.setPrefixedStyle(scene, 'transform', `${rotate}`);
mojs.h.setPrefixedStyle(scene, 'transform-origin', `${50+50*t}% 100%`);
mojs.h.setPrefixedStyle(shadowWrap, 'transform', transform);
scene.style.opacity = mojs.easing.expo.out(p);
shadow.style.opacity = .75*bounceEasing(p);
}
});
var soundTimeline = new mojs.Timeline({
delay: 300*this.S, onStart: () => {
if (this.isIE) { return }; this.bounceSound.play();
}
});
tween.add(timeline1, soundTimeline);
tween.start();
},
prepareSprites: function () {
this.blobSprite = new mojs.Spriter({
el: this.blobCircle,
duration: this.BLOB_DURATION*this.S,
isRunLess: true
})
},
showInnerCircle: function (x, y) {
this.blobCircle.style.left = `${x}px`;
this.blobCircle.style.top = `${y}px`;
var tween = new mojs.Tween,
size = Math.min(this.wWidth, this.wHeight),
borderWidth = Math.min(10*mojs.easing.cubic.in(size/800), 20),
blobCircleSize = 30 + 2*borderWidth,
strokeStep = (borderWidth/2)/(this.blobEllipses.length),
i = 0;
for (var i = 0; i < this.blobEllipses.length; i++) {
var item = this.blobEllipses[i];
item.setAttribute('stroke-width', borderWidth/2 - i*strokeStep);
item.setAttribute('rx', blobCircleSize/2);
item.setAttribute('ry', blobCircleSize/2);
};
this.blobCircle.style.display = 'block';
var blobCircleTm = new mojs.Timeline({
duration: this.BLOB_DURATION*this.S,
onStart:() => {
this.blobSprite.run();
this.openSound.play();
},
onUpdate: (p) => {
var tr = `scale(${28*p})`;
mojs.h.setPrefixedStyle(this.blobCircle, 'transform', tr);
this.blobCircle.style.opacity = 1*(mojs.easing.cubic.in(1-p));
}
});
tween.add(blobCircleTm);
tween.start();
},
showOnEl: function (el) {
this.prevEl = this.currentEl; this.currentEl = el;
this.prevEl && (this.prevEl.style['z-index'] = 0)
// return immediately on edges
if (el.delta < .2) { return }
var x = el.x - this.wWidth/2 - this.xOffset,
y = el.y - this.wHeight/2 - this.yOffset,
innerEl = el.querySelector('.particle__inner'),
contentEl = el.querySelector('.particle__content'),
tween = new mojs.Tween;
this.isOpen = true; el.style['z-index'] = 20; this.iscroll.enabled = false;
this.showInnerCircle(el.x+75, el.y+75); this.iscroll.scrollTo(-x,-y, 500*this.S);
var soundTimeline = new mojs.Timeline({
delay: 0*this.S, onStart: () => { this.openSound2.play(); }
});
var scaleDownTween = new mojs.Timeline({
duration: 300*this.S, easing: 'expo.out',
onUpdate: (p)=> {
mojs.h.setPrefixedStyle(innerEl, 'transform', `scale(${1-.25*p})`);
innerEl.style.opacity = 1-.25*p;
}
});
var blobTimeline = new mojs.Timeline({
duration: 600*this.S, delay: 100*this.S,
onUpdate: (p)=> {
this.blob = this.blobBase + .3*(mojs.easing.cubic.out(p));
this.blobShift = this.blobBase + 1*(p);
}
});
mojs.h.setPrefixedStyle(this.content, 'transform', `translate3d(-5000px,-5000px,0)`);
var scaleUpTimeline = new mojs.Timeline({
duration: 600*this.S, delay: 350*this.S,
onUpdate: (p)=> {
var scaleSize = 19*mojs.easing.cubic.in(p);
scaleSize = Math.max(.75, scaleSize);
var scale = `scale(${scaleSize})`;
mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
innerEl.style.opacity = .75 + .25*mojs.easing.cubic.out(p)
},
onStart:()=> {
setTimeout(()=> { this.showInnerPlastic(this.content); }, 400)
},
onComplete: () => {
this.blobCircle.style.display = 'none';
}
});
tween.add(scaleDownTween, soundTimeline, blobTimeline, scaleUpTimeline);
tween.start();
}
}
main.init()
External CSS
This Pen doesn't use any external CSS resources.