Skip to content

Instantly share code, notes, and snippets.

@Saminou24

Saminou24/Interactive-UI-demo.markdown

Created October 3, 2013 14:20
Show Gist options
  • Save Saminou24/6810628 to your computer and use it in GitHub Desktop.
Save Saminou24/6810628 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Saminou yengue kizidi.
Raw
index.html
<!--
Welcome to Source,
brave developer!
-->
<section id="try" class="static">
<div>
<section class="bg"></section>
<div class="ui"></div>
<div class="container">
<h2>Interactive plugin UI</h2>
<p>We made this really fancy demo for our promotional website of our new Photoshop plugin we made in cooperation with Subtle Patterns.</p>
<p>It works only on Webkit-based browsers because of <code>-webkit-mask-image</code> which I used make that fading transition.</p>
<p class="small">You can look into source code to find out more. Hint: there are two identical elements stacked on each other and the top one is masked when we need to show the bottom one.</p>
<a href="javascript:;" class="play button">See the website in action</a>
</div>
</div>
</section>
<footer>
<div class="container">
<a href="http://madebysource.com/" target="_blank" class="source"><span>Made by</span>Source</a>
<div class="social">
<div class="fb-like" data-href="https://www.facebook.com/madebysource" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>
<a href="https://twitter.com/madebysource" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
</div>
<nav>
<a href="http://plugin.subtlepatterns.com/">Visit the original website<b></b></a>
</nav>
</div>
</footer>
<link rel="stylesheet" href="http://plugin.subtlepatterns.com/static/font/futura.css">
<script type="text/javascript" src="//use.typekit.net/ozx3yxj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div id="fb-root"></div>
<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Raw
Interactive-UI-demo.markdown
Raw
script.js
// this is class definition
// bootstraping is on the bottom of this file
var SubtlePlugin = function (element) {
this.element = element;
this.element.className = '';
var ui = this.element.innerHTML;
this.element.innerHTML = ui + ui + '<div id="plugin-ui"><a href="http://instagram.com/p/cmdLgdRfdm/" target="_blank" id="videolink"></a><div class="ui" id="controls"><div id="tryme"></div><div id="andme"></div></div></div>';
this.containerElements = this.element.children;
this.uiElements = [
this.containerElements[0].getElementsByTagName('div')[0],
this.containerElements[1].getElementsByTagName('div')[0],
];
this.controlsElement = this.containerElements[2].getElementsByTagName('div')[0];
this.bgElements = [
this.containerElements[0].getElementsByTagName('section')[0],
this.containerElements[1].getElementsByTagName('section')[0],
];
this.basePath = 'http://plugin.subtlepatterns.com/static/images/patterns/';
this.patterns = [
{ url: 'wild_oliva.png', light: true },
{ url: 'worn_dots.png', light: false, position: '-2px -4px' },
{ url: 'tileable_wood_texture.png', light: false },
{ url: 'blizzard.png', light: false },
{ url: 'foggy_birds.png', light: false, position: '-92px 24px' },
{ url: 'gold_scale.png', light: false },
{ url: 'green_gobbler.png', light: false, position: '-3px -6px' },
{ url: 'plaid.png', light: false, position: '0px -8px' },
{ url: 'polaroid.png', light: false },
{ url: 'ps_neutral.png', light: false },
{ url: 'rebel.png', light: true },
{ url: 'retina_wood.png', light: false },
{ url: 'ricepaper.png', light: false },
{ url: 'subtle_carbon.png', light: true },
{ url: 'subtle_dots.png', light: false },
{ url: 'subtlenet2.png', light: false },
];
this.controls = {};
this.ui = [
{},
{},
];
this.second = true;
this.prepareElements();
this.prepareEventListeners();
this.patternUrl = null;
this.setPattern(1);
};
SubtlePlugin.prototype.createRange = function (className, min, max, val, step) {
var input = document.createElement('input');
input.type = 'range';
input.className = className;
input.min = min || 0;
input.max = max || 100;
input.value = val || 50;
input.step = step || 1;
return input;
};
SubtlePlugin.prototype.createCheckbox = function (className) {
var checkbox = document.createElement('label');
checkbox.className = className;
checkbox.innerHTML = '<input type="checkbox"><i></i><span></span><strong>Link with Layer</strong>';
return checkbox;
};
SubtlePlugin.prototype.createInput = function (className) {
var search = document.createElement('input');
search.className = className;
return search;
};
SubtlePlugin.prototype.createGrid = function () {
var grid = document.createElement('div');
grid.className = 'grid';
return grid;
};
SubtlePlugin.prototype.createLabel = function (className, text) {
var label = document.createElement('span');
label.className = className;
if (text) {
label.innerHTML = text;
}
return label;
};
SubtlePlugin.prototype.prepareElements = function () {
this.controls.opacity = this.createRange('opacity', 0, 100, 100);
this.ui[0].opacity = this.createRange('opacity', 0, 100, 100);
this.ui[1].opacity = this.createRange('opacity', 0, 100, 100);
this.controls.scale = this.createRange('scale', 10, 200, 100, 5);
this.ui[0].scale = this.createRange('scale', 10, 200, 100, 5);
this.ui[1].scale = this.createRange('scale', 10, 200, 100, 5);
this.controls.check = this.createCheckbox('check');
this.ui[0].check = this.createCheckbox('check');
this.ui[1].check = this.createCheckbox('check');
this.controls.opacityLabel = this.createLabel('opacity', '100%');
this.ui[0].opacityLabel = this.createLabel('opacity', '100%');
this.ui[1].opacityLabel = this.createLabel('opacity', '100%');
this.controls.scaleLabel = this.createLabel('scale', '100%');
this.ui[0].scaleLabel = this.createLabel('scale', '100%');
this.ui[1].scaleLabel = this.createLabel('scale', '100%');
var components = Object.keys(this.controls);
var component;
for (var i = 0, ii = components.length; i < ii; ++i) {
component = components[i];
this.controlsElement.appendChild(this.controls[component]);
this.uiElements[0].appendChild(this.ui[0][component]);
this.uiElements[1].appendChild(this.ui[1][component]);
}
this.controls.grid = this.createGrid();
var html = '';
for (var j = 0, jj = this.patterns.length; j < jj; ++j) {
html += '<span style="background-image:url(' + this.basePath + this.patterns[j].url + ');' + (this.patterns[j].position ? 'background-position:' + this.patterns[j].position + ';' : '') + '" pattern="' + j + '"></span>';
}
this.controls.grid.innerHTML = html;
this.controlsElement.appendChild(this.controls.grid);
};
SubtlePlugin.prototype.prepareEventListeners = function () {
var plugin = this;
var trymeHidden = false;
var andmeHidden = false;
plugin.controls.opacity.addEventListener('change', function () {
plugin.ui[0].opacity.value = this.value;
plugin.ui[1].opacity.value = this.value;
plugin.ui[0].opacityLabel.innerHTML = this.value + '%';
plugin.ui[1].opacityLabel.innerHTML = this.value + '%';
plugin.bgElements[0].style.opacity = this.value / 100;
plugin.bgElements[1].style.opacity = this.value / 100;
if (!andmeHidden) {
andmeHidden = true;
plugin.controlsElement.className += ' stop2';
}
});
plugin.controls.scale.addEventListener('change', function () {
plugin.ui[0].scale.value = this.value;
plugin.ui[1].scale.value = this.value;
plugin.ui[0].scaleLabel.innerHTML = this.value + '%';
plugin.ui[1].scaleLabel.innerHTML = this.value + '%';
plugin.setScale(this.value / 100);
if (!andmeHidden) {
andmeHidden = true;
plugin.controlsElement.className += ' stop2';
}
});
plugin.controls.check.getElementsByTagName('input')[0].addEventListener('change', function (e) {
plugin.ui[0].check.getElementsByTagName('input')[0].checked = this.checked;
plugin.ui[1].check.getElementsByTagName('input')[0].checked = this.checked;
});
plugin.controls.grid.addEventListener('click', function (e) {
if (e.target.tagName === 'SPAN') {
plugin.setPattern(parseInt(e.target.getAttribute('pattern'), 10));
if (!trymeHidden) {
trymeHidden = true;
plugin.controlsElement.className += ' stop1';
}
}
});
};
SubtlePlugin.prototype.setPattern = function (patternId) {
var plugin = this;
var pat = plugin.patterns[patternId];
if (pat.url !== plugin.patternUrl) {
plugin.second = !plugin.second;
plugin.patternUrl = pat.url;
plugin.bgElements[plugin.second ? 1 : 0].style.backgroundImage = 'url(' + plugin.basePath + pat.url + ')';
plugin.patternSize = null;
var image = new Image();
image.onload = function () {
plugin.patternSize = [image.width, image.height];
plugin.containerElements[plugin.second ? 1 : 0].className = pat.light ? 'light' : '';
plugin.setScale(plugin.controls.scale.value / 100);
plugin.element.className = plugin.second ? '' : 'second';
};
image.src = plugin.basePath + pat.url;
}
};
SubtlePlugin.prototype.setScale = function (scale, el) {
var plugin = this;
if (!plugin.patternSize) {
return;
} else {
plugin.bgElements[plugin.second ? 1 : 0].style.backgroundSize = plugin.patternSize[0] * scale + 'px ' + plugin.patternSize[1] * scale + 'px';
}
};
// bootstrap the plugin
var plugin = new SubtlePlugin(document.getElementById('try'));
Raw
style.less
// plugin.subtlepatterns.com
// 2013
// author: Marek Hrabe, @marek
// lesshat
@import 'http://plugin.subtlepatterns.com/static/css/mixins.less';
// main styles
* {
margin: 0;
padding: 0;
text-decoration: none;
border:none;
font-size: 100%;
.box-sizing(border-box);
outline:none;
list-style: none;
-webkit-font-smoothing: antialiased;
}
html, body {
height: 100%;
min-height: 100%;
}
.container {
width: 960px;
margin: auto;
padding: 0 10px;
position: relative;
}
#try {
border-bottom: 1px solid #f2f2f2;
height: 100%;
min-height: 600px;
position: relative;
#videolink {
display: block;
position: absolute;
left: 50%;
top: 416px;
margin-left: -381px;
.size(307px, 45px);
border: 0;
opacity: 0;
}
.button {
position: absolute;
left: 50%;
top: 416px;
margin-left: -381px;
.size(307px, 45px);
}
.container {
padding: 60px 0 170px 100px;
pointer-events: none;
}
> div {
position: absolute;
top: 0;
width: 100%;
height: 100%;
&.light {
background-color: #000;
}
&#plugin-ui {
z-index: 100;
}
&:nth-child(2) {
-webkit-transition: -webkit-mask-position .5s linear;
-webkit-mask-size: 240% 100%;
-webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.46, rgba(0,0,0,1)), color-stop(0.54, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0)));
}
}
&.second {
> div:nth-child(2) {
-webkit-mask-position: 100% 0;
pointer-events: none;
}
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: url('http://plugin.subtlepatterns.com/static/images/patterns/worn_dots.png');
}
h2 {
margin-bottom: 28px;
width: 400px;
.user-select(text);
}
p {
width: 410px;
margin-bottom: 25px;
line-height: 24px;
color: rgba(0, 0, 0, 0.5);
}
.light {
h2 {
color: #fff;
}
p {
color: #fff;
}
.button {
.btn(#fff, #828282);
text-shadow: none;
}
}
}
// plugin ui
.ui {
.size(250px, 436px);
background-image: url('http://plugin.subtlepatterns.com/static/images/plugin_dark.png');
background-size: 250px 436px;
color: #d9d9d9;
font-family: "Myriad Pro", sans-serif;
font-size: 10px;
text-shadow: 0 -1px 0 #353535;
pointer-events: none;
position: absolute;
left: 50%;
top: 60px;
margin-left: 200px;
cursor: normal;
#tryme {
.size(90px, 43px);
position: absolute;
top: 100px;
left: -100px;
display: block;
background: url(http://plugin.subtlepatterns.com/static/images/try-me.png) top left no-repeat;
.animation(~'tryme 7s ease-out infinite');
.transition(~'opacity .3s');
}
#andme {
.size(100px, 43px);
position: absolute;
top: 319px;
left: 260px;
display: block;
background: url(data:image/png;base64,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) top left no-repeat;
.animation(~'tryme 7s ease-out infinite');
.transition(~'opacity .3s .5s');
opacity: 0;
}
&.stop1 #tryme {
opacity: 0;
}
&.stop1 #andme {
opacity: 1;
}
&.stop2 #andme {
opacity: 0;
.transition(~'opacity .3s');
}
input[type="range"] {
display: block;
.appearance(~'none !important');
.size(161px, 20px);
position: absolute;
left: 32px;
background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
.appearance(~'none !important');
.size(10px);
border: 1px solid #333;
.border-radius(6px);
background-color: #000;
.box-shadow(~"inset 0 1px 0 #d5d5d5");
.background-image(~"linear-gradient(bottom, #717171 0%, #bbb 100%)");
}
.opacity {
top: 332px;
}
.scale {
top: 363px;
}
.search {
top: 40px;
position: absolute;
display: block;
left: 11px;
width: 177px;
color: #d9d9d9;
font-family: "Myriad Pro", sans-serif;
height: 21px;
font-size: 10px;
text-shadow: 0 -1px 0 #353535;
font-weight: bold;
text-indent: 20px;
padding-top: 2px;
background: transparent;
border: 0;
}
> span {
display: block;
position: absolute;
&.opacity, &.scale {
left: 205px;
font-weight: bold;
width: 33px;
height: 17px;
line-height: 17px;
text-align: center;
margin-top: 1px;
}
}
.grid {
display: block;
width: 229px;
height: 197px;
position: absolute;
top: 93px;
left: 11px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
span {
display: block;
width: 53px;
height: 50px;
float: left;
margin: 2px;
cursor: pointer;
background-color: #353535;
background-position: top left;
.transition(~'background .2s ease');
}
}
.check {
position: absolute;
bottom: 14px;
left: 10px;
.size(115px, 20px);
cursor: pointer;
display: block;
i {
display: block;
.size(10px, 9px);
background-image: url('data:image/png;base64,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');
background-size: 10px 87px;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
top: 4px;
left: 4px;
opacity: 0;
.transition(~'opacity .2s ease');
}
input {
opacity: 0;
visibility: hidden;
}
input:checked + i {
.animation(~'check .2s step-start forwards');
.transition(~'opacity 0 ease');
opacity: 1;
}
strong {
position: absolute;
display: block;
left: 24px;
top: 3px;
}
span {
position: absolute;
display: block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAAAAAASMiRZAAAAuUlEQVQ4y72TsQrCQBBE3102UVARFRtBQQz+kL8vlkKKYBESz3h3Wti6xiJk6sfs7C5jThBLF/iuZLyyIBCvHk2hfmwsAqVf5JkCtedbucaCQ2XIchwIBCijAtkZASxApTHECkAMoDIQwXycutQfJKYTMUM79Tdu4O0GhnoMbv94yuBvMYJeczxisJ4phUr5gglewmjb1BfdKtvZkByTdNl6rZ7p/CDtXWjI9r9ytw3Cqw6petLonw7e+DU5AAPo6BcAAAAASUVORK5CYII=');
background-size: 100%;
width: 18px;
height: 17px;
top: 0;
left: 0;
}
}
span.reload {
display: block;
.size(15px, 23px);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAACr0lEQVRIx7WWzUtiURiHD8xu9rNuPWvFNubUIhAb0syv/OxL3YUYFdGmsXElfUCCYBtbhH/AKNIiDIpZNC1UVCQNjSTQ/oBhhoF3zu8w4+J6b26ui5d7z7nnPs993/OhbHFx8Z1Wq/VrNJpbHqRi3IILPrPZbO954/vy8jJtbGyoFuCBCz6z2+0fYPb7/bS0tKRagAcu+JBMoKGm4H/8k0wwh8PxcZwS8JnT6dSOkmxtbVE+n6dWq0W9Xo+azSblcjmKRqMjJeAzl8v16S3J2dkZ9ft9en19Fdd2uz1od7tdWltbI6/XqygBn/HGZyXJycmJ+PKnpyc6ODigqakp0ul0ND09TaenpxSPx4WgWq1SLBaTlYDP3G63S06ysrIiyvL8/CzujUYjUhfPeJ1pdnZW9GWzWXp5eaFKpTK0QsEFn3k8nqCcJJFICMH5+TmZzWbZTHd2dkSWGIfIZDJDEvAZTzcqJwG80+nQ9va24nyhnMViUYxDyQqFwpAEfObz+falksvLS5H+4+OjgKD+chKUKxKJiHGpVErMmVQCPiSHUsnx8TE9PDyIaDQaFA6HFbO5uLgQ4/b29mQnHnzGJystlczNzdHNzY0QoCQLCwuygt3dXarX63R/f0/8IJSVgM8CgUBWKuFrm0KhEF1dXQkhROl0mlZXV8VzHH5HR0dUKpWoVqvR5ubmYOVJJeAz/sI3uYmfn58nvV6PQeJLMUeIu7u7wX25XBZlMplMipsRfMb3wLXSZkRG2BMWi4WSyaRYBBDiisxQRkz+W8cK+IyX4Meos8tqtdLMzAxNTk7iN0JcsevRP+rsAp/xs6c+zlMYfLa+vt4ZpwR8SHIGg+E36q6mADxwOT/PgsHgPl/jP3nHHzX/SIAHLud/YbyD8T3xlUeRxy8V45pHnIjYX8r/uOJ2BdmhAAAAAElFTkSuQmCC');
}
}
.light .ui {
color: #353535;
text-shadow: 0 1px 0 #fff;
background-image: url('http://plugin.subtlepatterns.com/static/images/plugin_light.png');
input[type="range"]::-webkit-slider-thumb {
border: 1px solid #636363;
.border-radius(6px);
background-color: #d5d5d5;
.box-shadow(~"inset 0 1px 0 #f1f1f1");
}
.check {
strong {
color: #353535;
}
span {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAAAAAASMiRZAAAAw0lEQVQ4y+2RoY7CUBBFzy0vTVqgwa9gJR+CRWP4Ab6IH8BgkaTf0WAQK5ogm4ZXCGl5GCQDjuwme+w9uTOTUSHOeel5Tv9rmhBU6LyusckWSXAiryfzzFDqzT6fKZJKTIdsTik58MTHzpB6Izw4AZXl0FUgIgDTeUROvOPR9I4/2/Q/7le+5cNNUdAAb+eegYg6xuxM67RjTKtD2qyqF6NGy7RR0Y+b7c/JUIbfs+TqVSiNX259bYIj+M4568hb217gDsQ/PDwSWxtwAAAAAElFTkSuQmCC');
}
i {
background-image: url('data:image/png;base64,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');
}
}
}
.static .ui {
background-image: url('http://plugin.subtlepatterns.com/static/images/plugin.png');
}
#controls {
pointer-events: all;
background: none;
input[type="range"], .check, > span {
opacity: 0;
}
}
// footer
footer {
height: 65px;
background-color: #ebeff1;
padding-top: 30px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
.box-shadow(~'0 -1px 2px rgba(0, 0, 0, .1)');
.source {
width: 114px;
height: 13px;
background: url('http://plugin.subtlepatterns.com/static/images/footer-logo.png');
float: left;
font-size: 0;
color: transparent;
border: 0;
margin-left: 10px;
span {
display: block;
text-transform: uppercase;
position: absolute;
font-size: 10px;
color: #c4c9cd;
font-weight: bold;
top: -17px;
opacity: 0;
// ugly, but there is no better way in less hat (yet)
-webkit-transition: opacity .3s, -webkit-transform 0s .3s;
-moz-transition: opacity .3s, -moz-transform 0s .3s;
-ms-transition: opacity .3s, -ms-transform 0s .3s;
-o-transition: opacity .3s, -o-transform 0s .3s;
transition: opacity .3s, transform 0s .3s;
.transform(~'translateX(-30px)');
}
&:hover span {
opacity: 1;
.transition(~'.1s');
.transform(~'translateX(0)');
}
}
.social {
float: left;
margin-left: 25px;
margin-top: -3px;
}
nav {
float: right;
margin-right: 10px;
position: relative;
bottom: 6px;
a {
display: inline-block;
font-size: 14px;
border: 0;
color: #95a5a6;
padding: 3px 0;
margin: 1px 10px;
.transition(~'.1s');
position: relative;
b {
display: block;
width: 0;
background-color: darken(#95a5a6, 20%);
height: 1px;
position: absolute;
bottom: 1px;
left: 0;
.transition(~'.3s');
}
&:hover {
color: darken(#95a5a6, 20%);
b {
width: 100%;
}
}
}
}
}
// buttons
.btn(@bg, @color) {
background-color: @bg;
.box-shadow(0 2px 0 rgba(0,0,0,.15), 0 2px 0 @bg);
color: @color;
&:hover {
background-color: lighten(@bg, 3%);
}
&:active {
.box-shadow(0 0 0 rgba(0,0,0,.15), 0 0 0 @bg);
}
}
.button {
height: 43px;
.border-radius(5px);
font-family: @font_h1;
font-size: 18px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
line-height: 43px;
text-transform: uppercase;
display: inline-block;
padding: 0 25px;
white-space: nowrap;
border-bottom: 0;
padding-top: 2px;
.transition(~'background-color .1s linear, box-shadow .1s linear');
// default is grey
.btn(#95999b, #fff);
position: relative;
.transform(~'translate3d(0, 0, 0)');
&:active {
.transform(~'translate3d(0, 2px, 0)');
}
}
// fonts
@size: 18px;
@size_h1: 30px;
@font: 'proxima-nova', sans-serif;
@font_h1: 'FuturaBT-Bold', sans-serif;
@typo_light: #878787;
@typo_dark: #333;
html, body, input, textarea, button {
font-family: @font;
color: @typo_light;
font-size: @size;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
h1, h2, h3 {
font-family: @font_h1;
color: @typo_dark;
font-size: @size_h1;
font-weight: normal;
text-transform: uppercase;
}
p {
font-family: @font, sans-serif;
line-height: 22px;
&.small {
font-size: 14px;
line-height: 19px;
}
}
// Try me shake animation
@-webkit-keyframes tryme{0%,100%{-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-4px);}20%,40%,60%,80%{-webkit-transform:translateX(4px);}}
@-moz-keyframes tryme{0%,100%{-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-4px);}20%,40%,60%,80%{-moz-transform:translateX(4px);}}
@-o-keyframes tryme{0%,100%{-o-transform:translateX(0);}10%,30%,50%,70%,90%{-o-transform:translateX(-4px);}20%,40%,60%,80%{-o-transform:translateX(4px);}}
@keyframes tryme{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-4px);}20%,40%,60%,80%{transform:translateX(4px);}}
// Checkbox stop motion animation
@-webkit-keyframes check{0%{background-position:0 -81px;}11%{background-position:0 -72px;}22%{background-position:0 -63px;}33%{background-position:0 -54px;}44%{background-position:0 -45px;}55%{background-position:0 -36px;}66%{background-position:0 -27px;}77%{background-position:0 -18px;}88%{background-position:0 -9px;}100%{background-position:0 0px;}}
@-moz-keyframes check{0%{background-position:0 -81px;}11%{background-position:0 -72px;}22%{background-position:0 -63px;}33%{background-position:0 -54px;}44%{background-position:0 -45px;}55%{background-position:0 -36px;}66%{background-position:0 -27px;}77%{background-position:0 -18px;}88%{background-position:0 -9px;}100%{background-position:0 0px;}}
@-ms-keyframes check{0%{background-position:0 -81px;}11%{background-position:0 -72px;}22%{background-position:0 -63px;}33%{background-position:0 -54px;}44%{background-position:0 -45px;}55%{background-position:0 -36px;}66%{background-position:0 -27px;}77%{background-position:0 -18px;}88%{background-position:0 -9px;}100%{background-position:0 0px;}}
@-o-keyframes check{0%{background-position:0 -81px;}11%{background-position:0 -72px;}22%{background-position:0 -63px;}33%{background-position:0 -54px;}44%{background-position:0 -45px;}55%{background-position:0 -36px;}66%{background-position:0 -27px;}77%{background-position:0 -18px;}88%{background-position:0 -9px;}100%{background-position:0 0px;}}
@keyframes check{0%{background-position:0 -81px;}11%{background-position:0 -72px;}22%{background-position:0 -63px;}33%{background-position:0 -54px;}44%{background-position:0 -45px;}55%{background-position:0 -36px;}66%{background-position:0 -27px;}77%{background-position:0 -18px;}88%{background-position:0 -9px;}100%{background-position:0 0px;}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment