JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<section id="conA">
<div clas="container">
  <div id="heroText">
    <div id="text-fixed">I'm a fixed text</div>
    <div id="text">masdf</div>
  </div>
  <div id="images"><img src="https://i.stack.imgur.com/wftMn.jpg?s=96&g=1"></div>
</div>
</section>

CSS

body {
  padding: 1rem;
  margin: 0;
}

#conA #container {
  border: 1px black solid;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: initial;
  min-height: 100px;
  justify-content: center;
  margin-bottom: 1rem;
}



 #conA img
{
  width: 100%;
  height: 400px;
}

#heroText {
width: 50%;
}

#images {
    width: 50%;
}


img
{
  display:none;
}

img.invisible
{
  visibility: hidden;
}

img.show
{
  display:inline;
}

img.anim1
{
  animation-duration: 300ms;
}

img.anim2
{
  animation-duration: 600ms;
}

img.anim3
{
  animation-duration: 900ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

@keyframes fadeOut 
{
 0% {opacity: 1;}
 100% {opacity: 0; display:none;}
}

JavaScript

// sentences
let sentences = [
	"i'm the first sentence",
  "i'm the second sentence.",
  "i'm the third sentence.",
  "i'm the fourth sentence."
];

// images
let images = [
	'https://i.stack.imgur.com/wftMn.jpg?s=96&g=1',
  'https://i.stack.imgur.com/wftMn.jpg?s=96&g=1',
  'https://i.stack.imgur.com/wftMn.jpg?s=96&g=1',
  'https://i.stack.imgur.com/wftMn.jpg?s=96&g=1',
  'img/image2.png',
  'img/image3.png',
  'img/image4.png',
  'img/image5.png'
];

images = $.map(images, function(url,index){ 
  console.log(index);
  //var img = document.createElement('img'); 
  //img.setAttribute('src', url); 
  //img.classList.add('anim'+((index%2)+1)); 
  //img.classList.add('fadeOut'); 
  //document.getElementById('images').appendChild(img); 
  //return img;
}); 

/*
// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Implements typing effect
function Type() { 
  var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;

  // If full sentence has been displayed then start to delete the sentence after some time
  if(text === _CONTENT[_PART]) {

  var imgIndexBase = _PART*2;
    IMAGES[imgIndexBase].classList.remove('fadeOut');
    IMAGES[imgIndexBase+1].classList.remove('fadeOut');
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 0);
   ...