JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
<body>
<div class="center">
<h1 class="mimic">
Mimic.css
</h1>
<div class="description">
everyone else is doing it.
</div>
<div class="controls">
<form>
<div class="select">
<select>
<option value="boomerang">boomerang</option>
<option value="swivelChair">swivel chair</option>
<option value="gettinInYoFace">gettin' in yo face</option>
<option value="airplanePropeller">airplane propeller</option>
<option value="pulsate">pulsate</option>
<option value="candleInTheWind">candle in the wind</option>
<option value="highlighter">highlighter</option>
<option value="lawnMower">lawn mower</option>
<option value="iWanChuBack">i wan-chu back</option>
<option value="nope">nope</option>
<option value="heartBeat">heartbeat</option>
<option value="sleepyEyes">sleepy eyes</option>
<option value="plummit">plummit</option>
<option value="dropItLikeItsHot">drop it like it's hot</option>
<option value="gettinLifted">gettin' lifted</option>
<option value="glaucoma">glaucoma</option>
<option value="chameleon">chameleon</option>
<option value="backdrop">backdrop</option>
<option value="tearDrop">tear drop *n e w*</option>
<option value="acidTrip">acid trip *n e w*</option>
<option value="spinner">spinner *in progress*</option>
<option value="pageTurn">page turn *in progress*</option>
</select>
</div>
<button>mimic</button>
</form>
</div>
<hr />
<div class="links">Something from<a href="//etreacy.me">Eric Treacy</a>
<br><a href="//github.com/erictreacy/mimic.css">GitHub</a></span>
</div>
</div>
<!-- JS -->
<script src='./js/index.js'></script>
</body>
/*
* Date updated: 01/02/2018
* Currently re-designing, npm
*/
@keyframes gettinInYoFace {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(100);
}
}
.gettinInYoFace {
animation-timing-function: ease-in-out;
animation-name: gettinInYoFace;
animation-duration: 3s;
}
@keyframes airplanePropeller {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.airplanePropeller {
animation-name: airplanePropeller;
animation-duration: 5s;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
from {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
to {
}
}
.pulsate {
animation-name: pulsate;
animation-duration: 5s;
}
@keyframes boomerang {
10% {
z-index: 1;
transform: rotate(-20deg);
}
35% {
z-index: 1;
transform: translate(220%, -55%) scale(0.5) rotate(-200deg);
}
74% {
z-index: -1;
}
75% {
transform: translate(-200%, 55%) scale(0.9) rotate(-860deg);
}
80% {
z-index: 1;
}
90% {
z-index: 1;
transform: translate(0%, 0%) rotate(-10deg);
}
}
.boomerang {
animation-name: boomerang;
animation-duration: 3s;
}
@keyframes iWanChuBack {
0% {
opacity: 1;
}
25% {
opacity: 1;
transform: scale3d(0.1, 0.1, 0.1);
}
50% {
opacity: 1;
transform: scale3d(0.1, 0.1, 0.1);
}
to {
opacity: 1;
}
}
.iWanChuBack {
animation-name: iWanChuBack;
animation-duration: 3s;
}
@keyframes lawnMower {
0% {
opacity: 1;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotateY(12225deg);
}
}
.lawnMower {
animation-duration: 5s;
animation-name: lawnMower;
animation-timing-function: ease-in-out;
}
@keyframes swivelChair {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 1;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.swivelChair {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: swivelChair;
animation-duration: 2s;
}
.candleInTheWind {
opacity: 0;
animation-name: candleInTheWind;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
@keyframes candleInTheWind {
0% {
opacity: 0;
}
12.5% {
opacity: 0.25;
transform: skewX(-10deg);
}
25% {
opacity: 0;
}
37.5% {
opacity: 0;
transform: skewX(-10deg);
}
50% {
opacity: 0.75;
}
62.5% {
opacity: 0;
}
75% {
opacity: 1;
transform: skewX(-5deg);
}
87.5% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.highlighter {
animation-name: highlighter;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.highlight-text {
animation-name: highlighter-text;
animation-duration: 2s;
}
@keyframes highlighter {
0% {
background-color: rgba(0, 255, 255, 0);
background-color: rgba(0, 255, 255, 128);
}
100% {
background-color: rgba(0, 255, 255, 0);
background-color: rgba(127, 219, 255, 0);
}
}
@keyframes highlighter-text {
0% {
color: yellow;
color: #0074d9;
}
100% {
color: inherit;
}
}
@keyframes nope {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-7px) rotateY(-10deg);
}
18.5% {
transform: translateX(6px) rotateY(8deg);
}
31.5% {
transform: translateX(-4px) rotateY(-6deg);
}
43.5% {
transform: translateX(3px) rotateY(4deg);
}
50% {
transform: translateX(0);
}
}
.nope {
animation-name: nope;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
@keyframes heartBeat {
from {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(1.1);
}
}
.heartBeat {
animation-name: heartBeat;
animation: heartBeat 0.66s alternate;
animation-iteration-count: 8;
}
@keyframes sleepyEyes {
0% {
transform: perspective(400px);
}
5% {
transform: perspective(400px) rotateX(-20deg);
opacity: 0.5;
}
15% {
transform: perspective(400px);
opacity: 1;
}
35% {
transform: perspective(400px) rotateX(-20deg);
opacity: 0.75;
}
45% {
transform: perspective(400px) rotateX(-2deg);
opacity: 1;
}
to {
transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
}
.sleepyEyes {
animation-name: sleepyEyes;
animation-duration: 5s;
backface-visibility: visible !important;
}
@keyframes plummit {
from {
opacity: 1;
transform: scale(10);
}
to {
opacity: 1;
transform: scale(0);
}
}
.plummit {
animation-timing-function: ease-in-out;
animation-name: plummit;
animation-duration: 5s;
}
@keyframes dropItLikeItsHot {
from {
opacity: 1;
transform: none;
}
to {
opacity: 1;
transform: translate3d(0, 1000px, 0);
}
}
.dropItLikeItsHot {
animation-name: dropItLikeItsHot;
animation-duration: 0.5s;
}
@keyframes gettinLifted {
from {
opacity: 1;
transform: translate3d(0, 500px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.gettinLifted {
animation-name: gettinLifted;
animation-duration: 3s;
animation-timing-function: ease-in;
}
@keyframes glaucoma {
from {
opacity: 1;
text-shadow: 0 0 75px black;
color: transparent;
}
to {
opacity: 1;
text-shadow: 0;
color: transparent;
}
}
.glaucoma {
animation-name: glaucoma;
animation-duration: 5s;
animation-timing-function: ease-out;
}
@keyframes chameleon {
0% {
color: red;
}
14.2999% {
color: orange;
}
28.5999% {
color: yellow;
}
42.8998% {
color: green;
}
57.1996% {
color: blue;
}
71.4995% {
color: indigo;
}
85.7994% {
color: violet;
}
100% {
color: red;
}
}
.chameleon {
animation-name: chameleon;
animation-duration: 5s;
}
@keyframes backdrop {
0% {
background-color: red;
color: white;
}
14.2999% {
background-color: orange;
color: black;
}
28.5999% {
background-color: yellow;
color: black;
}
42.8998% {
background-color: green;
color: white;
}
57.1996% {
background-color: blue;
color: white;
}
71.4995% {
background-color: indigo;
color: white;
}
85.7994% {
background-color: violet;
color: white;
}
100% {
background-color: red;
color: white;
}
}
.backdrop {
animation-name: backdrop;
animation-duration: 10s;
}
/* Line-up for next github commit. */
@keyframes tearDrop {
0% {
top: 5px;
opacity: 0;
}
30% {
top: 10px;
opacity: 1;
}
100% {
top: 25px;
opacity: 0;
}
}
.tearDrop {
animation-name: tearDrop;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 5;
animation-play-state: running;
}
@keyframes acidTrip {
from {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
to {
filter: hue-rotate(-360deg);
}
}
.acidTrip {
animation-name: acidTrip;
color: red;
background-image: linear-gradient(50deg, purple, orange);
background-clip: text;
text-fill-color: transparent;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 3;
}
@keyframes spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.spinner {
animation-name: spinner;
animation-duration: 5s;
animation-iteration-count: 2;
animation-timing-function: linear;
transform-origin: 50% 50%;
}
/* not really sure what I want to do with this one... */
@keyframes pageTurn {
0% {
transform: translate3d(0,0,0) scale(1, 1) translate(-50%, -50%);
}
50% {
transform: translate3d(0,0,0) scale(-1 ,1) translate(-50%, -50%);
}
100% {
transform: translate3d(0,0,0) scale(1, 1) translate(-50%, -50%);
}
}
.pageTurn {
animation-name: pageTurn;
animation-duration: 1s;
animation-iteration-count: 5;
animation-timing-function: linear;
}
(function() {
var header = document.querySelector("h1");
var selectBox = document.querySelector("select");
var runButton = document.querySelector("button");
// On SelectBox Change
selectBox.addEventListener("change", function() {
triggerAnimation();
});
// On "run animation" button clicked
runButton.addEventListener("click", function(e) {
e.preventDefault();
triggerAnimation();
});
function triggerAnimation() {
var animation = selectBox.value;
header.className = "";
setTimeout(function() {
header.className = "mimic " + animation;
}, 10);
}
})();
Also see: Tab Triggers