Adding images to type and delete effect

Admin 1
Viewed 95

I'm implementing a type and delete effect with the code below. Current code successfully shows 4 sentences one by one, but I'd like to add images at the end of each sentence.

So after the first sentence is typed, I'd like to show 3 images also one by one (not at the same time) next to the first sentence. (update: to clarify, I'd like each image to appear in the same exact place as other images) Then the first sentence gets deleted, and second sentence gets typed, and next to the second sentence, another set of images will be shown one by one (not at the same time). Then the second sentence gets deleted so on.... Note that I'll have 12 different images in total.

It seems that I'd need to insert a new function between those lines:

if(text === _CONTENT[_PART]) {

clearInterval(_INTERVAL_VAL);

but am having a hard time actually writing the code. Help would be appreciated.

html:

<div id="container">
<div id="text"></div><div id="cursor"></div>
</div>

jquery: 

var _CONTENT = [ "This is the first sentence", "I'm the second sentence", "Third sentence goes here", 
"I'm a fourth sentence" ];

var _PART = 0;


var _PART_INDEX = 0;


var _INTERVAL_VAL;


var _ELEMENT = document.querySelector("#text");


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

if(text === _CONTENT[_PART]) {

    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
        _INTERVAL_VAL = setInterval(Delete, 50);
    }, 1000);

}
}

function Delete() {
var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;

if(text === '') {
    clearInterval(_INTERVAL_VAL);

    if(_PART == (_CONTENT.length - 1))
        _PART = 0;
    else
        _PART++;
    _PART_INDEX = 0;

    setTimeout(function() {
        _INTERVAL_VAL = setInterval(Type, 100);
    }, 200);
}
}

_INTERVAL_VAL = setInterval(Type, 100);
css html jquery javascript
1 Answers

Add in css fade in and fade out, hide the images by default, and add a showing class to css.

When fading in, add the showing class. When fading out, remove the showing class when the fade out ends.

var _CONTENT = [ "This is the first sentence", "I'm the second sentence", "Third sentence goes here", 
"I'm a fourth sentence" ];

const IMAGE_URLS = ['https://i.stack.imgur.com/wftMn.jpg?s=96&g=1', 'https://i.stack.imgur.com/jFsyb.png?s=96&g=1', 'https://i.stack.imgur.com/tYIVC.png?s=96&g=1', 'https://i.stack.imgur.com/zweIW.png?s=96&g=1','https://www.gravatar.com/avatar/d84b558fd67be10d5a718fb94231909d?s=96&d=identicon&r=PG','https://www.gravatar.com/avatar/a2d818d801ce38a33807f68fdd92043a?s=96&d=identicon&r=PG', 'https://www.gravatar.com/avatar/52a2ffb44b1c11ab9001cb67e0a0021c?s=96&d=identicon&r=PG','https://i.stack.imgur.com/gIt1g.png?s=96&g=1','https://www.gravatar.com/avatar/3f8912af19fe86b7b34a0b011a962460?s=96&d=identicon&r=PG','https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG','https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1','https://i.stack.imgur.com/4xczZ.jpg?s=96&g=1'];

const IMAGES = IMAGE_URLS.map((url, index) =>
{
  const img = document.createElement('img');
  img.setAttribute('src', url);
  img.classList.add('anim'+((index%3)+1));
  img.classList.add('fadeOut');
  document.getElementById('images').appendChild(img);
  return img;
});


var _PART = 0;


var _PART_INDEX = 0;


var _INTERVAL_VAL;


var _ELEMENT = document.querySelector("#text");


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

if(text === _CONTENT[_PART]) {
    let imgIndexBase = _PART*3;
    IMAGES[imgIndexBase].classList.remove('fadeOut');
    IMAGES[imgIndexBase+1].classList.remove('fadeOut');
    IMAGES[imgIndexBase+2].classList.remove('fadeOut');
    IMAGES[imgIndexBase].classList.add('fadeIn', 'show');
    IMAGES[imgIndexBase+1].classList.add('fadeIn', 'show');
    IMAGES[imgIndexBase+2].classList.add('fadeIn', 'show');
    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
        _INTERVAL_VAL = setInterval(Delete, 50);
    }, 1000);

}
}

function Delete() {
var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;

if(text === '') {
    let imgIndexBase = _PART*3;
    IMAGES[imgIndexBase].classList.remove('fadeIn');
    IMAGES[imgIndexBase+1].classList.remove('fadeIn');
    IMAGES[imgIndexBase+2].classList.remove('fadeIn');
    IMAGES[imgIndexBase].classList.add('fadeOut');
    IMAGES[imgIndexBase+1].classList.add('fadeOut');
    IMAGES[imgIndexBase+2].classList.add('fadeOut');
    
    setTimeout(function() { IMAGES[imgIndexBase].classList.add('invisible'); }, 300);
    setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('invisible'); }, 400);
    
    setTimeout(function() 
    { 
      IMAGES[imgIndexBase+1].classList.remove('show', 'invisible');
      IMAGES[imgIndexBase].classList.remove('show', 'invisible');
      IMAGES[imgIndexBase+2].classList.remove('show'); 
    }, 500);

    clearInterval(_INTERVAL_VAL);

    if(_PART == (_CONTENT.length - 1))
        _PART = 0;
    else
        _PART++;
    _PART_INDEX = 0;

    setTimeout(function() {
        _INTERVAL_VAL = setInterval(Type, 100);
    }, 200);
}
}

_INTERVAL_VAL = setInterval(Type, 100);
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;}
}
<div id="container">
<div id="text"></div><div id="cursor"><div id="images"></div></div>
</div>

user_2047230
Related