Skip to content

Instantly share code, notes, and snippets.

@ypetya

ypetya/alternate-class.js

Last active November 22, 2016 15:59
Show Gist options
  • Save ypetya/e24e0227305bcec348bf to your computer and use it in GitHub Desktop.
Save ypetya/e24e0227305bcec348bf to your computer and use it in GitHub Desktop.
Download ZIP
playing with CSS
Raw
readme.md

CSS playground

Raw
alternate-class.js
/**
* when you load this module:
*
* after window.onload it will look DOM elements classed by `alternate`
* it will start put and remove class specified in the `alternate` attr of those
* elements in 5 seconds each
* */
(function initAlternateClassApiOn(window, initCb){
window.alternateClassBySelector = function(selector, className) {
var el = document.querySelector(selector),
enable = addClass.bind(el,className),
disable = removeClass.bind(el,className);
alternate(enable, disable, 5000);
};
function alternate(callback1,callback2, timeout) {
callback1();
setTimeout(alternate.bind(this,callback2,callback1, timeout),timeout);
}
function addClass(clazz) {
var classes = this.getAttribute('class');
this.setAttribute('class', classes + ' ' + clazz);
}
function removeClass(clazz) {
var classes = this.getAttribute('class');
classes = classes.replace(new RegExp('([ ]*' + clazz + ')'),'');
this.setAttribute('class', classes);
}
var fn = window.onload;
window.onload = function monkeyPatch() {
[fn, initCb, startAlternates].forEach(function(callback){
if(typeof(callback)=='function') callback();
});
};
function startAlternates() {
Array.prototype.forEach.call(document.querySelectorAll('.alternate'),
function(element){
var className = element.getAttribute('alternate'),
enable = addClass.bind(element,className),
disable = removeClass.bind(element,className);
alternate(enable, disable, 5000);
});
}
}(window, initCb));
function initCb() {
//window.alternateClassBySelector('div#fail1','fail');
}
Raw
hover.css
.experiment:nth-of-type(3)::before {
content: 'Experiment #3 - transform on hover';
}
.experiment:nth-of-type(3) .child {
opacity: 0;
}
.experiment:nth-of-type(3) .parent:hover .child {
opacity: 1;
}
.experiment:nth-of-type(3) .parent div:nth-of-type(1) {
transition-duration: 5s;
}
.experiment:nth-of-type(3) .parent div:nth-of-type(2) {
transition-duration: 10s;
}
.experiment:nth-of-type(3) .parent div:nth-of-type(3) {
transition-duration: 15s;
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<title>CSS playground</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="transform_inherit.css">
<link rel="stylesheet" href="ping-pong.css">
<link rel="stylesheet" href="hover.css">
<link rel="stylesheet" href="static-formatting.css">
<script src="alternate-class.js"></script>
</head>
<body>
<div class="experiment">
<div class="parent parent-transform">
Parent
<div class="child alternate" alternate="fail">
Child
</div>
</div>
<div class="parent parent-transform">
Father
<div class="child">
Son
</div>
</div>
<div class="parent parent-transform">
Mother
<div class="child">
Daughter
</div>
</div>
</div>
<div class="experiment">
<div class="ping alternate" alternate="pong">Ping-pong</div>
<div class="ping alternate" alternate="pong">linear</div>
<div class="ping alternate" alternate="pong">steps</div>
<div class="ping alternate" alternate="pong">ease in-out</div>
<div class="ping alternate" alternate="pong">cubic-bezier(0, 1, 1, 0)</div>
</div>
<div class="experiment">
<div class="parent">
Hover this
<div class="child">
5s
</div>
<div class="child">
10s
</div>
<div class="child">
15s
</div>
</div>
</div>
<div class="experiment">
<div class="parent">
Parent
<div class="child">
long long line of characters
</div>
<div class="child">
long long line of characters
</div>
<div class="child">
long long line of characters
</div>
</div>
</div>
</body>
</html>
Raw
main.css
.experiment {
background-color: aliceblue;
border: dashed black thin;
font-family: sans-serif;
height: inherit;
overflow: auto;
margin: 0;
padding: 20px;
width: 500px;
}
.experiment::before {
content: 'Experiment #';
font-size: x-small;
opacity: 0.2;
text-transform: capitalize;
}
Raw
ping-pong.css
.experiment:nth-of-type(2)::before {
content: 'Experiment #2 - Emulating infinite animation by add-remove class';
}
.ping {
background-color: indianred;
border-radius: 10px;
border: solid red 1px;
font-size: x-small;
height: auto;
width: 60px;
transform: translate(0px,5px);
transition: transform 5s;
transition-delay: 0s, 10s;
}
.pong {
transform: translate(200px,5px);
transition: transform 5s;
transition-delay: 0s, 10s;
}
.ping:nth-of-type(2) {
transition-timing-function: linear;
}
.ping:nth-of-type(3) {
transition-timing-function: steps(10);
}
.ping:nth-of-type(4) {
transition-timing-function: ease-in-out;
}
.ping:nth-of-type(5) {
transition-timing-function: cubic-bezier(0, 1, 1, 0);
}
/*
ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()
Value Description
ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
*/
Raw
static-formatting.css
.experiment:nth-of-type(4)::before {
content: 'Experiment #4 - static formatting';
}
.experiment:nth-of-type(4) .parent {
margin-left: 25px;
}
.experiment:nth-of-type(4) .child {
width:inherit;
}
.experiment:nth-of-type(4) .child:nth-of-type(1) {
white-space: nowrap;
}
.experiment:nth-of-type(4) .child:nth-of-type(2) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.experiment:nth-of-type(4) .child:nth-of-type(3) {
white-space: nowrap;
overflow: hidden;
}
Raw
transform_inherit.css
div {
padding: 2px;
text-align: center;
}
.parent {
background-color: lightcyan;
border-radius: 10px;
border: groove aqua thin;
float:left;
height: auto;
width: 100px;
}
.child {
background-color: indianred;
border-radius: 10px;
border: solid red 1px;
font-size: x-small;
height: 15px;
width: 50px;
}
.experiment:nth-of-type(1)::before {
content: 'Experiment #1 - Superposition of transformations';
}
.parent-transform {
transform: translate(100px,5px);
transition-delay: 0s, 10s;
transition: transform 5s;
}
.parent-transform:hover {
transform: translate(0,5px) rotate(180deg);
}
.parent-transform .child {
transform: translate(20px,0) rotate(180deg);
transition: transform 5s;
}
.fail {
transform: translateY(0px) !important;
/*transition: transform 5s;
transition-delay: 0s,5s;*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment