How to add letters with animation on Hover with (CSS/HTML/Javascript)-CodePudding

I want to expand various shortened words to the full word on hover (a stylistic choice for a website) - think "p| prkr" and on hover it changes to "p| parker". Once you move away, it reverts back. Example (top left).

I cannot for the life of me figure out how to do this!

Attempting to use display:none and on:hover show, but I think I need some type of javascript to make the animation 'pretty'? Or hide delay? I've found a lot of "typing" animations but nothing like this, but I feel like there should be a way to do this. Also, how do I nest it so that the word is a link? I need to hide the vowels somehow.

 <nav>
    <div class="container">
       <h1><a href="index.html">
        <span class="let-1">p|</span>
        <span class="let-2">p</span>
        <span class="let-4">a</span>
        <span class="let-5">r</span>
        <span class="let-6">k</span>
        <span class="let-7">e</span>
        <span class="let-8">r</span>
      </a></h1>
    </div>
</nav>


nav.addEventListener('hover', function () {
this.classList.toggle('is-active');

I just cannot figure this out, thanks so much for any help! New to this and exhausted my search efforts.

CodePudding user response：

Below snippet should give you an idea of how to accomplish something similar to the reference you sent.

body {
  background: #1d1e21;
  font-family: "Poppins", sans-serif;
}
a{
  text-decoration: none;
}
.logo{
  display: inline-flex;
}
.animated-logo{
  display: flex;
  color: #fff; 
  transition-property: transform;
  transition-duration: .15s;
  font-size: 2rem;
  font-weight: 600;
}
.letter{
  display: inline;
}
.letter.first{
  margin-right: 10px;
}
.letter.first:after{
  content: '|';
  font-weight: 200;
  font-size: 20px;
  margin-left: 10px;
}
.letter-hide {
  transform: scaleX(0);
  opacity: 0;
  transform-origin: 0 50%;
  transition: all .4s ease;
  width: 0;
}
.letter-hide:nth-of-type(3) {
  transition-delay: 50ms;
}
.letter-hide:nth-of-type(6) {
  transition-delay: 75ms;
}
.animated-logo:hover .letter-hide {
  width: 100%;
  opacity: 1;
  transform: scaleX(1);
}

  <a href="#" class="logo">
    <h3 class="animated-logo">
      <span class="letter first">p</span>
      <span class="letter">p</span>
      <span class="letter-hide">a</span>
      <span class="letter">r</span>
      <span class="letter">k</span>
      <span class="letter-hide">e</span>
      <span class="letter">r</span>
    </h3>
  </a>

CodePudding user response：

A fairly simple way of doing this is to hide the full text until hover, showing at first just a before pseudo element whose content is the shortened version which is held in a data- attribute. On hover the full version is revealed by drawing back an opaque after pseudo element.

That way it can be done via CSS and the HTML is a little less cluttered.

[data-full] {
  position: relative;
  display: inline-block;
  color: transparent;
}

[data-full]:hover {
  color: black;
}

[data-full]::before {
  content: attr(data-full);
  color: black;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

[data-full]:hover::before {
  color: transparent;
}

[data-full]::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  transition: width 2s linear;
  z-index: -1;
  display: inline-block;
}

[data-full]:hover::after {
  content: '';
  width: 0;
  z-index: 1;
}

<div class="start">p| <span data-full="prkr">parker</span></div>

Using a bit of Javascript of course you could get the timings more even for any length of word. Also if it is known that the initial character of the word is always what is before the vertical bar that could be extracted by JS and shown without needing to have it in a separate element in the initial HTML. Likewise JS could be used to get rid of the vowels, creating the data- attribute at run time, makin the HTML even simpler.