0

I have two div those contain h tag inside which I have a span tag those contain letters

First Div

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters">E</span>
          <span class="letters">F</span>
    </h6>
</div>

Second Div

<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters">&nbsp;</span> 
          <span class="letters">I</span>
          <span class="letters">J</span>
    </h6>
</div>

First div starts from left top of the screen and scales to a particular location using keyframe

Second div starts from few pixels below the first div of the screen and scales to a particular location using keyframe

I want letters EF in startname and <whitespace>IJ in lastname to disappear after few seconds of startname and lastname align

Here's the code I found which pages div disappear after few seconds

Tried it out in svelte doesn't seem to be working here's the entire code below. How do I achieve the desired result?

<script>
window.onload = function() {
  window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
  document.getElementById('fadeout').style.opacity = '0';
}
</script>
<style>
  .startname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: startnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
    justify-content:flex-end;

}
#fadeout {
  opacity: 1;
  transition: 3s opacity;
}

.endname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: endnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
}

@keyframes startnamemymove {
  from {top: 0px;
  left:0px;
  transform: scale(.5);}
  to {top:150px;left: 200px;
  transform: scale(2.0);
  }
}
@keyframes endnamemymove {
  from {top: 100px;
  left:100px;
  transform: scale(.5);}
  to {top:0px;left: 500px;
  transform: scale(2.0);
  }
}
</style>
<h1>The @keyframes Rule</h1>

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters" id="fadeout">E</span>
          <span class="letters" id="fadeout">F</span>
</div>
<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters" id="fadeout">&nbsp;</span>      
          <span class="letters" id="fadeout">I</span>
          <span class="letters" id="fadeout">J</span>
          
    </h6>
</div>

enter image description here

Santhosh Dhaipule Chandrakanth
  • 1,134
  • 12
  • 26

5 Answers5

1

You can't use same id in several elements. Please use class.

zb'
  • 8,071
  • 4
  • 41
  • 68
1

The method getElementById() will return only the first element with that id. You can use classes and getElementsByClassName(), which returns the list of elements with that class name. Here is the code.

mikelplhts
  • 1,181
  • 3
  • 11
  • 32
1

The error is on repeating id fadeout more than once.

You need to create a new class with the styles you want and put it together with letters: class="letters fadeout". Just a space between.

Read more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors

NaM
  • 11
  • 3
1

Here is the result which can help you.

Steps need to remember

  • HTML attribute ID will be use on single element
  • You can use getElementsByClassName() or querySelectorAll() to apply opacity in multiple elements.

window.onload = function() {
  window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
    document.querySelectorAll('span.fadeout').forEach(el => {
        el.style.display = "none";
    });
}
.startname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: startnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
    justify-content:flex-end;
    padding-right: 10px;
    

}
.fadeout {
  opacity: 1;
  transition: 3s opacity;
}

.endname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: endnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
}

@keyframes startnamemymove {
  from {top: 0px;
  left:0px;
  transform: scale(.5);}
  to {top:150px;left: 200px;
  transform: scale(2.0);
  }
}
@keyframes endnamemymove {
  from {top: 100px;
  left:100px;
  transform: scale(.5);}
  to {top:0px;left: 500px;
  transform: scale(2.0);
  }
}
<h1>The @keyframes Rule</h1>

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters fadeout">E</span>
          <span class="letters fadeout">F</span>
   </h6>
</div>
<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters fadeout">&nbsp;</span>      
          <span class="letters fadeout">I</span>
          <span class="letters fadeout">J</span>
    </h6>
</div>
Nirav Joshi
  • 2,924
  • 1
  • 23
  • 45
  • I tried out the code on the svelte terminal online [here](https://svelte.dev/tutorial/html-tags) altered as you have suggested but the letters don't seem to fade out – Santhosh Dhaipule Chandrakanth Mar 30 '22 at 11:55
  • I was able achieve the same with only with `keyframe` without using `onload` but after the letters fade I want the `startname` and `endname` containers till in the gap created when the letter disappears. How can I do it? – Santhosh Dhaipule Chandrakanth Mar 30 '22 at 12:26
  • @SanthoshDhaipuleChandrakanth i have made some changes please check. Let me know if it is works fine for you or not. – Nirav Joshi Apr 01 '22 at 12:07
1

Here's a solution with these modifications:

  • set the transition class after a timeout via Svelte's use:action (the class has to have the :global() flag so it gets compiled even though the class is not directly used. And both classes are needed :global(.letters.fadeout) so that the specificity is enough to overwrite the setting of the first class, because these elements have the Svelte suffix added .letters.svelte-5nw7mj)
  • get rid of the whitespace between <span> elements by setting display:flex on the <h6> (a question on this)
  • if the width should be animated, it must be set before on the <span> elements. This can be done by giving them display: inline-block; and the desired width

->> a REPL

(I reduced the time to 3s so it was faster to try out...)

<script>
    function handleFadeout(node) {
        setTimeout(() => {
            node.classList.add('fadeout')
        },3000)
    }
</script>

<h1>The @keyframes Rule</h1>

<div class="startname">
    <h6 class="alphabets" >
        <span class="letters">A</span>
        <span class="letters">B</span>
        <span class="letters">C</span>
        <span class="letters">D</span>
        <span class="letters" use:handleFadeout>E</span>
        <span class="letters" use:handleFadeout>F</span>
    </h6>
</div>
<div class="endname">
    <h6 class="alphabets" >
        <span class="letters">G</span>
        <span class="letters">H</span>
        <span class="letters" use:handleFadeout>&nbsp;</span>      
        <span class="letters" use:handleFadeout>I</span>
        <span class="letters" use:handleFadeout>J</span>
    </h6>
</div>

<style>
    .startname {
        width: 150px;
        height: 150px;
        background: red;
        position: relative;
        animation: startnamemymove 3s 1 forwards;
        display: flex;
        align-items: center;
        justify-content:flex-end;

    }

    .endname {
        width: 150px;
        height: 150px;
        background: red;
        position: relative;
        animation: endnamemymove 3s 1 forwards;
        display: flex;
        align-items: center;
    }

    @keyframes startnamemymove {
        from {top: 0px;
            left:0px;
            transform: scale(.5);}
        to {top:150px;left: 200px;
            transform: scale(2.0);
        }
    }
    @keyframes endnamemymove {
        from {top: 100px;
            left:100px;
            transform: scale(.5);}
        to {top:0px;left: 500px;
            transform: scale(2.0);
        }
    }

    .letters {
        display: inline-block;
        width: 12px;
    }

    h6 {
        display:flex;
    }

    :global(.letters.fadeout) {
        opacity: 0;
        width: 0px;
        padding: 0;
        overflow: hidden;
        transition: all 300ms;
    }
</style>
Corrl
  • 6,206
  • 1
  • 10
  • 36
  • Looks more clean + `Svelte` – Santhosh Dhaipule Chandrakanth Mar 31 '22 at 08:13
  • Similarly how to make `handleFadein` that makes character appear after few seconds. I was unable to replicate it – Santhosh Dhaipule Chandrakanth Mar 31 '22 at 08:22
  • Not sure I understand - that's a new logic you would like to implement or what's the problem? – Corrl Mar 31 '22 at 08:25
  • You mean [like this?](https://svelte.dev/repl/e00a1ec101e4433cb46fedd4b15724b7?version=3.46.5) Notice I moved the `transition: all 300ms;` to the `.letters` class (you could add a seperate function for handling the fade use:handleFadein and use:handleFadeout, but in this case i would combine both because they are related – Corrl Mar 31 '22 at 08:29
  • 1
    Reading your comment again I think you want them to be invisible from the beginning and have them appear after the intro animation? This could be done [like this](https://svelte.dev/repl/9c245386a5ee4c4baccf51cbf45bd1bc?version=3.46.5) 1. add the class to the elements from the beginning 2. move transition prop in css to .letters 3. remove the class after the timeout (overall variable naming should be adjusted :-)) – Corrl Mar 31 '22 at 08:36
  • Yes `invisible` in beginning, then `visible` after few seconds, Your second comment was exactly the solution for it. – Santhosh Dhaipule Chandrakanth Mar 31 '22 at 09:24