JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="canvas" class="canvas"><img id="img" src=""><img id="img2" src=""></div>

CSS

img {width:100%;height:auto;opacity: 1;}

#canvas {border:1px solid #dddddd;margin:auto;overflow:hidden;position: relative;}

#img2 {position:absolute;top:0;left:0;}

.canvas #img2 {display:block;opacity: 1;
animation-name: opacit, front1;
animation-duration: 2s, 5s;
animation-timing-function: linear, linear;
animation-delay:3s, 0s;}

.canvas2 #img2 {display:block;opacity: 1;
animation-name: opacit2, front2;
animation-duration: 2s, 5s;
animation-timing-function: linear, linear;
animation-delay:3s, 0s;}

.canvas #img {display:block;opacity: 1;
animation-name: back1;
animation-duration:5s;
animation-timing-function: linear;
animation-delay:0s;}

.canvas2 #img {display:block;opacity: 1;
animation-name: back2;
animation-duration:5s;
animation-timing-function: linear;
animation-delay:0s;}


@-webkit-keyframes opacit {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes opacit {
    from {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes opacit2 {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes opacit2 {
    from {opacity: 1;}
    to {opacity: 0;}
}


@-webkit-keyframes front1 { 
  0%   {transform: rotate(0deg) scale(1.2);}
  100% {transform: rotate(6deg) scale(1.3);}
}

@keyframes front1 {
  0%   {transform: rotate(0deg) scale(1.2);}
  100% {transform: rotate(6deg) scale(1.3);}
}
@-webkit-keyframes front2 {
  0%   {transform: rotate(0deg) scale(1.2);}
  100% {transform: rotate(6deg) scale(1.3);}
}

@keyframes front2 {
  0%   {transform: rotate(0deg) scale(1.2);}
  100% {transform: rotate(6deg) scale(1.3);}
}


@-webkit-keyframes back1 {
  0%   {transform: rotate(-6deg) scale(1.1);}
  100% {transform: rotate(0deg) scale(1.2);}
}

@keyframes back1 {
  0%   {transform: rotate(-6deg) scale(1.1);}
  100% {transform: rotate(0deg) scale(1.2);}
}
@-webkit-keyframes back2 {
  0%   {transform: rotate(-6deg) scale(1.1);}
  100% {transform: rotate(0deg) scale(1.2);}
}

@keyframes back2 {
  0%   {transform: rotate(-6deg) scale(1.1);}
  100% {transform:...

JavaScript

// Edit here

var folder = "http://www.hloe.co.uk/images/";

var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];
var width = 300;
var height = 300;
var seconds = 3;
var rotation = true;

// Do not edit below here

var fading = (seconds-2);
var time = (seconds*1000);
var canvas = document.getElementById('canvas');
var img = document.getElementById('img');
var img2 = document.getElementById('img2');
canvas.style.maxWidth = width + "px";
canvas.style.maxHeight = height + "px";


i = 0;

function slide() {

setTimeout(function(){

img2.src = folder + images[i+1];
img2.width = width + "px";
img2.height = height + "px";

if (i > images.length-3) {i = -1;} else {i=i+1;}

var canid = document.getElementById('canvas');

if (canid.className == "canvas") {
canid.className = "canvas2";
}
else {canid.className = "canvas";}

slide();

}, time);

}

slide();


x = 1;

function preload() {

setTimeout(function(){

img.src = folder + images[i+1];
img.width = width + "px";
img.height = height + "px";

if (x > images.length-3) {x = -1;} else {x=x+1;}

preload();

}, time);

}


preload();

img.src = folder + images[1];
img2.src = folder + images[0];

document.getElementById("img2").style.animationDuration = "2s, " + seconds + "s";
document.getElementById("img").style.animationDuration = seconds + "s";

if (rotation == true) {document.getElementById("img2").style.animationDelay = fading + "s, 0s";}
else {document.getElementById("img2").style.animationDelay = fading + "s, 100s";
document.getElementById("img").style.animationDelay = "100s";}

// media queries

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes