We Keep Coding

stacked cards carousel: looping z-index with jquery

I'm trying to create a carousel of stacked cards using CSS animations and Jquery.
The DOM elements are the following:
<div class="container">
<div class="card active" style="background:orange;z-index:4">
1
</div>
<div class="card" style="background:tan;z-index:3">
2
</div>
<div class="card" style="background:pink;z-index:2">
3
</div>
<div class="card" style="background:blue;z-index:1">
4
</div>
</div>
what i need to to is having
the z-index:4 card to become z-index:1
the z-index:3 card to become z-index: 4
the z-index:2 card to become z-index: 3
the z-index:1 card to become z-index: 2
you get the point: the first card needs to be pushed back in the stack, the others should move "up" one level.
Here's a semi-working fiddle: https://jsfiddle.net/p34yzmhv/
I'm no JS expert, i really don't know how to loop the zindex value. I've been reading similar questions here on stackoverflow but couldn't find something exactly similar to my problem.
thanks any hint or help is greatly appreciated.

You can put the z-index within a class and then change the class.
This also allows you to update the positions currently set with .card+.card+.card(etc) without which, your card1 would go to the back, but be position to be unseeable.
The alternative would be to move the elements in the DOM, which may or may not be simpler depending on what else you do with the cards.
Keeping with z4 = z-index=4 => positioned at the front (rather than more logical 1=at the front), add classes:
.z4 {
z-index: 4;
}
.z3 {
transform: rotate(2deg) translate3d(-50%, -50%, 0);
z-index: 3;
}
etc
Then, each iteration, remove all classes and add them back starting with the now current .active. .nextAll gives the following siblings while .prevAll gives the preceding siblings. Only .prevAll gives them in the reverse order so you also need to reverse that.
$(".card").removeClass("z1 z2 z3 z4");
let z=4;
$(".card.active").addClass("z"+z);
$(".card.active").nextAll(".card").each((i, e) => { z--; $(e).addClass("z"+z); });
$($(".card.active").prevAll(".card").get().reverse()).each((i, e) => { z--; $(e).addClass("z"+z); });
// console.log to confirm they're in the correct order
$(".card").each((i, e) => console.log(i, $(e).text(), e.className));
Updated snippet:
$(".btn2").click(function () {
setTimeout(function () {
var $next = $(".card.active").removeClass("active").next(".card");
if ($next.length) {
$next.addClass("active");
} else {
$(".card:first").addClass("active");
}
$(".card").removeClass("z1 z2 z3 z4");
var z=4;
$(".card.active").addClass("z"+z);
$(".card.active").nextAll(".card").each((i, e) => { z--; $(e).addClass("z"+z); });
$($(".card.active").prevAll(".card").get().reverse()).each((i, e) => { z--; $(e).addClass("z"+z); });
$(".card").each((i, e) => console.log(i, $(e).text(), e.className));
}, 1);
$(".card.active")
.addClass("animation")
.one(
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function () {
$(".card").removeClass("animation");
}
);
});
#keyframes animation {
0% {
transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
z-index: 10;
}
15% {
opacity: 1;
z-index: 10;
transform: rotate(2deg) translate3d(-50%, -50%, 0) scale(1.1);
}
50% {
transform: rotate(-40deg) translate3d(-320%, -50%, 0) scale(0.1);
opacity: 0;
z-index: 0;
}
75% {
opacity: 1;
}
100% {
transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
z-index: 0;
}
}
.animation {
animation: animation 1s forwards cubic-bezier(0.83, 0, 0.17, 1);
}
.card {
transform-origin: center;
transform: rotate(0) translate3d(-50%, -50%, 0);
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
&.active {
transform: rotate(0) translate3d(-50%, -50%, 0)!important;
}
}
// --------------------------------------------
// --------------- DEMO STYLES ----------------
// --------------------------------------------
html {
height: 100%;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
* {
box-sizing: inherit;
}
}
.btn2 {
position: fixed;
left: 50%;
bottom: 10%;
transform: translateX(-50%) translateY(-50%);
background: coral;
cursor: pointer;
color: white;
padding: 24px;
text-transform: uppercase;
z-index: 50;
zoom: 1.2;
}
.container {
width: 420px;
height: 480px;
background: #eee;
overflow: hidden;
margin: 0 auto;
position: relative;
padding: 20px;
}
.card {
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
max-width: 320px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
&.active {
box-shadow: 0 0 20px rgba(black, 0.25);
border: 1px solid black;
}
}
.z4 {
z-index: 4;
}
.z3 {
transform: rotate(2deg) translate3d(-50%, -50%, 0);
z-index: 3;
}
.z2 {
transform: rotate(4deg) translate3d(-50%, -50%, 0);
z-index: 2;
}
.z1 {
transform: rotate(6deg) translate3d(-50%, -50%, 0);
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card active z4" style="background:orange">1</div>
<div class="card z3" style="background:tan">2</div>
<div class="card z2" style="background:pink">3</div>
<div class="card z1" style="background:blue">4</div>
</div>
<div class="btn2">
animate
</div>
Updated fiddle: https://jsfiddle.net/7z39mqdt/

How can I set a CSS keyframes in Javascript?

I have a CSS keyframes shown as below, my problem is I would like to set it as JavaScript (to put inside my div which already have some functions) so that I can return the "element" value to my function
.cylon-eye {
background-color: yellow;
background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
#keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
I've tried to convert as below after suggestion, is that the return value i should call is var cylon-eye = document.getElementById("cylon-eye");?
<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css);
}
var styles = '#cylon-eye { background-color: yellow; background-image: linear-gradient(to right,rgba(255,255,255, 0.9) 25%,rgba(255,255,255, 0.1) 50%,rgba(255,255,255, 0.9) 75%); color: none; height: 100%; width: 20%;animation: 4s linear 0s infinite alternate move-eye; z-index: 10;}';
var keyFrames = '\
#keyframes move-eye {\
from {\
margin-left: -20%;\
}\
to {\
margin-left: 100%;\
}\
}';
window.onload = function() { appendStyle(styles) };
</script>

let me share with you two snippets, one is using CSS + javascript and another is only using javascript, you can use whatever preferred to you. Hope its helpful to you.
WITH JAVASCRIPT
let dynamicStyles = null;
function addAnimation(body) {
if (!dynamicStyles) {
dynamicStyles = document.createElement('style');
dynamicStyles.type = 'text/css';
document.head.appendChild(dynamicStyles);
}
dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}
addAnimation(`
#keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
`);
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";
document.body.appendChild(element);
WITH CSS + JAVASCRIPT
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
document.body.appendChild(element);
.cylon-eye {
background-color: yellow;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9) 25%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
#keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}

this works fine for me, Hope this will help :)
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
#keyframes slidein {\
from {\
margin-left: 100%;\
width: 300%; \
}\
to {\
margin-left: 0%;\
width: 100%;\
}\
}';
document.getElementsById('slideDiv')[0].appendChild(style);

It would be wise to use Native API functionality to alter CSSStyleSheets. You can access existing stylesheets using the following method
document.styleSheets[0].cssRules
This will return all applied rules and you will be able to edit the rule where the selectorText matches your selector

have you tried using a <style></style> tag?
For example:
const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");
keyFrames.innerHTML = `
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading {
animation: loading 1s ease infinite;
}
`;
loading.appendChild(keyFrames);
.loading {
width: 100px;
height: 100px;
background-size: cover;
background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
background-repeat: no-repeat;
}
<!doctype html>
<html>
<head>
<title>Keyframes in js</title>
</head>
<body>
<div class="loading"></div>
</body>
</html>

2022 SOLUTION
Now it's possible to use the method .animate() as in this example
document.getElementById("tunnel").animate([
// key frames
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// sync options
duration: 1000,
iterations: Infinity
});
Docs:
https://developer.mozilla.org/es/docs/Web/API/Element/animate
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats (blink effect example)

How to change body's background for a linear gradient using a fade in effect

I'm trying to get the body's background to change onload for a linear gradient onload event.
I have done this by far:
$(document).ready(function (){
$("body").addClass("bc");
});
/*CSS*/
.bc{
transition: background 1s;
background: red; /*This actually gets the fade in animation effect*/
/*background: linear-gradient(30deg, red, yellow) This doesn't get the effect*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I also tried to use Keyframes to change the background for a linear gradient but it changes it sharply

Here you have an example with keyframes animation:
$(document).ready(function (){
$("body").addClass("bc");
});
/*CSS*/
#-webkit-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-o-keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes GradientAnimation {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.bc{
background-color: red;
background: linear-gradient(270deg, #e4cc08, #e45708);
background-size: 400% 400%;
-webkit-animation: GradientAnimation 15s ease infinite;
-moz-animation: GradientAnimation 15s ease infinite;
-o-animation: GradientAnimation 15s ease infinite;
animation: GradientAnimation 15s ease infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And nice generator for this here: https://www.gradient-animator.com/

Since you cannot add transition on linear-gradient, you may use pseudo element that you make fading and you can easily adjust it's background and also the background of the body to create the needed effect:
setTimeout(function() {
$('body').addClass('bc')
}, 500); /*Control the start of fading here */
/*CSS*/
body {
transition: background 5s;
background:linear-gradient(60deg, yellow, red);
height:100vh;
margin:0;
}
body:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 3s; /* control the speed of fading here*/
background: linear-gradient(30deg, red, pink)
}
body.bc:before {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS transition works, but it lays an overlay over background. If you have text, which is placed above background, it will be overlaid.
i wrote a solution with jQuery, where you can define colors and order in which they would be changed from one to another:
in the example below, the animation goes from green to purple, and then back to green, and so on, until the animation stops after defined number of seconds
var stopAfterSec = 23;
var speed = 15;
var purple = [255, 26, 26];
var green = [26, 255, 118];
var sea_green = [26, 255, 244];
var order = [green, sea_green, purple];
var current = 0;
var direction = -1;
var color = end_color = order[current];
function updateGradient() {
if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) {
direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction);
current += direction;
end_color = order[current];
}
$('.animGradientEfron').css({
background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)"
});
for (var i = 0; i <= 2; i++) {
if (color[i] != end_color[i]) {
color[i] += Math.sign((end_color[i] - color[i]));
}
}
}
jQuery(document).ready(function() {
var startGradientAnimation = setInterval(updateGradient, speed);
setTimeout(function() {
clearInterval(startGradientAnimation);
}, stopAfterSec * 1000);
});
.animGradientEfron {
position: absolute;
top: 25%;
left: 0%;
width: 100%;
height: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animGradientEfron"></div>

please refer it
.css {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
height: 200px;
}
<div class="css"></div>
Use css gradient over background image

Flipclock Plugin isn´t working in Internet Explorer

I am using this clock in my homepage.
It isn´t working in IE.
What is the problem with IE and how I can solve it?
Working CodePen
/*
* flipclock
* Version: 1.0.1
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
(function($) {
var pluginName = 'flipclock';
var methods = {
pad: function(n) {
return (n < 10) ? '0' + n : n;
},
time: function(date) {
if (date) {
var e = new Date(date);
var b = new Date();
var d = new Date(e.getTime() - b.getTime());
} else
var d = new Date();
var t = methods.pad(date ? d.getFullYear() - 70 : d.getFullYear())
+ '' + methods.pad(date ? d.getMonth() : d.getMonth() + 1)
+ '' + methods.pad(date ? d.getDate() - 1 : d.getDate())
+ '' + methods.pad(d.getHours())
+ '' + methods.pad(d.getMinutes())
+ '' + methods.pad(d.getSeconds());
return {
'Y': {'d2': t.charAt(2), 'd1': t.charAt(3)},
'M': {'d2': t.charAt(4), 'd1': t.charAt(5)},
'D': {'d2': t.charAt(6), 'd1': t.charAt(7)},
'h': {'d2': t.charAt(8), 'd1': t.charAt(9)},
'm': {'d2': t.charAt(10), 'd1': t.charAt(11)},
's': {'d2': t.charAt(12), 'd1': t.charAt(13)}
};
},
play: function(c) {
$('body').removeClass('play');
var a = $('ul' + c + ' section.active');
if (a.html() == undefined) {
a = $('ul' + c + ' section').eq(0);
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
else if (a.is(':last-child')) {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready').removeClass('active');
a = $('ul' + c + ' section').eq(0);
a.addClass('active')
.closest('body')
.addClass('play');
}
else {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
},
// d1 is first digit and d2 is second digit
ul: function(c, d2, d1) {
return '<ul class="flip ' + c + '">' + this.li('d2', d2) + this.li('d1', d1) + '</ul>';
},
li: function(c, n) {
//
return '<li class="' + c + '"><section class="ready"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '</section><section class="active"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '</section></li>';
}
};
// var defaults = {};
function Plugin(element, options) {
this.element = element;
this.options = options;
// this.options = $.extend({}, defaults, options);
// this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var t, full = false;
if (!this.options || this.options == 'clock') {
t = methods.time();
} else if (this.options == 'date') {
t = methods.time();
full = true;
} else {
t = methods.time(this.options);
full = true;
}
$(this.element)
.addClass('flipclock')
.html(
(full ?
methods.ul('year', t.Y.d2, t.Y.d1)
+ methods.ul('month', t.M.d2, t.M.d1)
+ methods.ul('day', t.D.d2, t.D.d1)
: '')
+ methods.ul('hour', t.h.d2, t.h.d1)
+ methods.ul('minute', t.m.d2, t.m.d1)
+ methods.ul('second', t.s.d2, t.s.d1)
+ '<audio id="flipclick">'
+ '<source src="https://github.com/gokercebeci/flipclock/blob/master/js/plugins/flipclock/click.mp3?raw=true" type="audio/mpeg"/>'
+ '</audio>');
setInterval($.proxy(this.refresh, this), 1000);
},
refresh: function() {
var el = $(this.element);
var t;
if (this.options
&& this.options != 'clock'
&& this.options != 'date') {
t = methods.time(this.options);
} else
t = methods.time()
// second sound
setTimeout(function() {
document.getElementById('flipclick').play()
}, 500);
// second first digit
el.find(".second .d1 .ready .inn").html(t.s.d1);
methods.play('.second .d1');
// second second digit
if ((t.s.d1 === '0')) {
el.find(".second .d2 .ready .inn").html(t.s.d2);
methods.play('.second .d2');
// minute first digit
if ((t.s.d2 === '0')) {
el.find(".minute .d1 .ready .inn").html(t.m.d1);
methods.play('.minute .d1');
// minute second digit
if ((t.m.d1 === '0')) {
el.find(".minute .d2 .ready .inn").html(t.m.d2);
methods.play('.minute .d2');
// hour first digit
if ((t.m.d2 === '0')) {
el.find(".hour .d1 .ready .inn").html(t.h.d1);
methods.play('.hour .d1');
// hour second digit
if ((t.h.d1 === '0')) {
el.find(".hour .d2 .ready .inn").html(t.h.d2);
methods.play('.hour .d2');
// day first digit
if ((t.h.d2 === '0')) {
el.find(".day .d1 .ready .inn").html(t.D.d1);
methods.play('.day .d1');
// day second digit
if ((t.D.d1 === '0')) {
el.find(".day .d2 .ready .inn").html(t.D.d2);
methods.play('.day .d2');
// month first digit
if ((t.D.d2 === '0')) {
el.find(".month .d1 .ready .inn").html(t.M.d1);
methods.play('.month .d1');
// month second digit
if ((t.M.d1 === '0')) {
el.find(".month .d2 .ready .inn").html(t.M.d2);
methods.play('.month .d2');
// year first digit
if ((t.M.d2 === '0')) {
el.find(".year .d1 .ready .inn").html(t.Y.d1);
methods.play('.year .d1');
// year second digit
if ((t.Y.d1 === '0')) {
el.find(".year .d2 .ready .inn").html(t.Y.d2);
methods.play('.year .d2');
}
}
}
}
}
}
}
}
}
}
}
},
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$(this).data('plugin_' + pluginName)) {
$(this).data('plugin_' + pluginName,
new Plugin(this, options));
}
});
};
})(typeof jQuery !== 'undefined' ? jQuery : Zepto);
// RUN
$('#container').flipclock();
html, body {
margin: 0;
padding:0;
height: 100%;
color: #fff;
font: 11px/normal sans-serif;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/mask.png');
z-index: 2;
}
h1 {
margin: 0 10px;
font-size: 70px;
font-weight: bold;
text-shadow: 0 0 2px #fff;
}
.clearfix {
clear: both;
}
#page {
margin: 0 auto;
width: 600px;
}
#container {
opacity: .9;
}
#usage li {
position: relative;
margin: 5px 0;
padding: 10px;
color: #222;
background: #fff;
}
#usage code {
position: absolute;
top:0;
right:0;
padding: 10px;
color: #eee;
border: 1px solid #333;
background: #000;
}
/*
* flipclock
* Version: 1.0.0
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
/*==============================================================================
FLIP CLOCK
==============================================================================*/
.flipclock {
}
.flipclock hr {
position: absolute;
left: 0;
top: 65px;
width: 100%;
height: 3px;
border: 0;
background: #000;
z-index: 10;
opacity: 0;
}
ul.flip {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 180px;
height: 130px;
font-size: 120px;
font-weight: bold;
line-height: 127px;
}
ul.flip li {
float: left;
margin: 0;
padding: 0;
width: 49%;
height: 100%;
-webkit-perspective: 200px;
list-style: none;
}
ul.flip li.d1 {
float: right;
}
ul.flip li section {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li section:first-child {
z-index: 2;
}
ul.flip li div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
ul.flip li div .shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li div.up {
-webkit-transform-origin: 50% 100%;
top: 0;
}
ul.flip li div.down {
-webkit-transform-origin: 50% 0%;
bottom: 0;
}
ul.flip li div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-shadow: 0 0 2px #fff;
text-align: center;
background-color: #000;
border-radius: 6px;
}
ul.flip li div.up div.inn {
top: 0;
}
ul.flip li div.down div.inn {
bottom: 0;
}
/*--------------------------------------
PLAY
--------------------------------------*/
body.play ul section.ready {
z-index: 3;
}
body.play ul section.active {
-webkit-animation: index .5s .5s linear both;
z-index: 2;
}
#-webkit-keyframes index {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
body.play ul section.active .down {
z-index: 2;
-webkit-animation: flipdown .5s .5s linear both;
}
#-webkit-keyframes flipdown {
0% {
-webkit-transform: rotateX(90deg);
}
80% {
-webkit-transform: rotateX(5deg);
}
90% {
-webkit-transform: rotateX(15deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
body.play ul section.ready .up {
z-index: 2;
-webkit-animation: flipup .5s linear both;
}
#-webkit-keyframes flipup {
0% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
/*--------------------------------------
SHADOW
--------------------------------------*/
body.play ul section.ready .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
/*DOWN*/
body.play ul section.ready .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
#-webkit-keyframes show {
0% {
opacity: 0;
}
90% {
opacity: .10;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
80% {
opacity: .20;
}
100% {
opacity: 0;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div id="mask">
<div id="page">
<h1>flipclock</h1>
<div id="container"></div>
<div class="clearfix"></div>
<h2>USAGE</h2>
<ul id="usage">
<li class="selected">
clock
<code>$('#container').flipclock();</code>
</li>
<li>
fulldate
<code>$('#container').flipclock('date');</code>
</li>
<li>
countdown
<code>$('#container').flipclock('2013 01 17 12:00:00');</code>
</li>
</ul>
</div>
</div>

Thank you all for your tipps and support!
I solved the problem. Older IE-Versions couldn´t read the DATE format..
i had:
flipclock('2016 01 16 11:00:00');
but for IE it should be:
flipclock('2017-01-16T11:00:00.000Z');

How to properly implement setTimeout function to pulse loader

I have a situation trying to implement this pulse loader code into my theme pages.
As far as I've read, somehow there should be a setTimeout (function() implemented but not so sure how to integrate this into my js file:
jQuery(document).ready(function(){
setTimeout(function(){
$("div.loader").fadeOut( 500, function(){
$("div#content").fadeIn( 3000);
});
}, 2500);
});
In a few words, the pulse dot, it doesn't show up before the page content appearance, like we have in this site example, it show up in the same time (too late) almost when the content is already loaded.
My result with Live examples:
here;
If this helps, here is the original theme js sequence from the app.min.js file, that should manage a .gif loader:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.preloader"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
I've replaced .loader with .sk-spinner-pulse.sk-spinner resulting:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.sk-spinner-pulse.sk-spinner"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
Also in css I had in the preloader section:
...
#wrapper .preloader {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 80px 60px 0;
background: #f9f9f9 url("../img/preloader.gif") center center no-repeat;
-moz-background-size: 55px 55px;
-o-background-size: 55px 55px;
-webkit-background-size: 55px 55px;
background-size: 55px 55px;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
}
...
modified as follow:
...
#wrapper .sk-spinner-pulse.sk-spinner {
left: 50%;
position: fixed;
top: 50%;
width: 45px;
height: 45px;
margin: 0 auto;
background-color: gold;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
#-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
}
...
In header.php I've replaced:
...
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
...
with:
...
<!-- Start Loader -->
<div class="sk-spinner sk-spinner-pulse"></div>
<!-- End Loader -->
...
Any thoughts?

Use window.onload event to make the animation instead of using a timeout. Example:
jQuery(function($){
$(window).load(function(){
$(".sk-spinner-pulse").fadeOut(500);
$("#wrapper").css("opacity","1");
});
});
window.onload waits for the document and all it's images to load.
The pulse loader should be visible once the document loads, it should be outside your #wrapper div.