JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<!-- Insert objects:-->
        
        <!-- Layer 1: (z-index: 1) -->
        <!-- Define background image as part of template, please note the path to the image -->
        <div class="template-default-bg-img"><img src="templates/background.jpg"> </div>
        
        <!-- Layer 2: -->
        <!-- Insert image (Local input, the image should have aspect ratio 16:9)-->
        <div class="template-1-img">%%image(720,1280)%%</div>
        
        <!-- Layer 3: -->            
        <!-- Insert image (Local input, the image should have aspect ratio 16:9)-->
        <div class="template-2-img">%%image_2(720,1280)%%</div>               
        
         <!-- Layer 4: -->    
        <!-- Insert image (Local input, the image should have aspect ratio 16:9)-->
        <div class="template-3-img">%%image_3(720,1280)%%</div>

CSS

body {
                
                /* Background layer */
                 /* Set to no scrollbars */                   
                    overflow: hidden;                
                /* Define background colour */            
                    background-color: #ccc; 
                }
                
                /* Layer 1 (z-index: 1): Default background image */
                .template-default-bg-img {
                    z-index: 1;
                    background-color: none; 
                    position: absolute; 
                    left: 0px;
                    top: 0px;
                    padding: 0px; 
                    display: none;
                }                
                
                /* Layer 2 (z-index: 2): Custom background full screen image */
                .template-1-img {
                    z-index: 2;
                    background-color: white; 
                    color: black; 
                    position: absolute; 
                    left: 0px;
                    top: 0px;
                    padding: 0px; 
                    text-align: left;   
                    width: 1280px;        
                }
                
                /* Layer 3 (z-index: 3): Custom part of screen image */
                .template-2-img {
                    z-index: 3;
                    background-color: red; 
                    color: black; 
                    position: absolute; 
                    left: 0px;
                    top: 0px; 
                    padding: 0px; 
                    margin: 0;
                    text-align: center;   
                    width: 1280px;       
                }                

                /* Layer 4 (z-index: 4): Custom part of screen image */
                .template-3-img {
                    z-index: 4;
                    background-color: green; 
                    color: black;
                    position: absolute; 
                  ...

JavaScript

jQuery.fx.interval = 1000/30; // Set animation to 25 frames per second

$(document).ready(function() {
    $('.template-1-img').css("opacity", "0");
    $('.template-2-img').css("opacity", "0");
    $('.template-3-img').css("opacity", "0");
    $('.template-1-img').animate({opacity: 1}, 1500);
    $('.template-2-img').delay(5000).animate({opacity: 1}, 1500);
    $('.template-3-img').delay(10000).animate({opacity: 1}, 1500);
    $('.template-3-img').delay(10000).animate({opacity: 0}, 1500);
    $('.template-2-img').delay(10000).animate({opacity: 0}, 0);
});