JSFiddle - React, Tailwind, and code Playground
by karthick6891
HTML
<script src="https://cdn.jsdelivr.net/classlist/2014.01.31/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/howler.js/1.1.25/howler.min.js"></script>
<!-- super svg-->
<html>
<head>
<link rel="prerender" href="https://github.com/legomushroom/mojs"/>
<link rel="prefetch" href="https://github.com/legomushroom/mojs"/>
<link rel="prerender" href="https://twitter.com/legomushroom"/>
<link rel="prefetch" href="https://twitter.com/legomushroom"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
</head>
<body>
<div class="credits">
<div class="with">
<div class="with__text">built with</div><a href="https://github.com/legomushroom/mojs" title="mo · js" id="js-with-logo" class="with__logo"></a>
</div>
<div class="by">
<div class="by__text">by</div><a href="https://twitter.com/legomushroom" title="LegoMushroom" id="js-by-logo" class="by__logo"></a>
</div>
</div>
<div id="js-with-snowball" class="snowball snowball--with"></div>
<div id="js-by-snowball" class="snowball snowball--by"></div>
<div class="motion">
<div id="js-controls" class="motion__controls controls">
<div id="js-repeat" title="restart" class="controls__repeat">
<svg class="icon icon--repeat">
<path d="M5.03868442,0.355114828 C5.18894493,0.105224017 5.48268728,-0.0462129771 5.76249569,0.0127011539 C6.07958679,0.0633119511 6.33566986,0.367372131 6.34885061,0.703064059 C6.3544995,0.854105656 6.31684022,1.00672884 6.2403919,1.13483742 C6.01933195,1.49425316 5.79074015,1.84852874 5.56591427,2.2055721 C6.05774441,2.20636289 6.54957455,2.19805956 7.04102809,2.21506162 C9.1710367,2.28741925 11.2053908,3.45779393 12.5065187,5.21216977 C13.1512455,6.0749257 13.6238694,7.08476926 13.8483187,8.15748092 C14.1955372,9.7932377 13.9338053,11.5464273 13.1945537,13.0252116 C12.5558524,14.3055066 11.5661666,15.3968019 10.3610698,16.1006083 C9.29907824,16.7312663...CSS
body {
background: #333;
font-size: 16px;
}
.snowball {
width: 31.25rem;
height: 31.25rem;
border-radius: 50%;
background: #fff;
position: absolute;
bottom: -13rem;
z-index: 0;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
-webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
}
.snowball.is-shown {
-webkit-transform: scale(12);
-ms-transform: scale(12);
transform: scale(12);
opacity: 1;
z-index: 2;
}
.snowball--by {
right: -13rem;
}
.snowball--with {
right: -9.6875rem;
}
.credits {
position: absolute;
right: 1.5625rem;
bottom: 3.4375rem;
z-index: 1;
color: #fff;
font-family: Open Sans, sans-serif;
font-size: 0.5rem;
letter-spacing: 0.05rem;
padding-left: 5.9375rem;
}
.credits .with {
position: absolute;
left: 0.4375rem;
}
.by {
padding-right: 1.625rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: none;
touch-action: none;
}
.by__text {
position: relative;
top: 1rem;
}
.by__logo {
cursor: pointer;
width: 1.125rem;
height: 1.5rem;
position: absolute;
right: 0;
top: 0.4375rem;
background-image:...JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var Ball_1, Ball_2, Ball_3, Ball_4, Ball_5, Ball_6, Ball_7, Main, mojs,
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
mojs = __webpack_require__(2);
mojs.isDebug = false;
Ball_1 = __webpack_require__(3);
Ball_2 = __webpack_require__(4);
Ball_3 = __webpack_require__(5);
Ball_4 = __webpack_require__(6);
Ball_5 = __webpack_require__(7);
Ball_6 =...