CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EimisB
EimisB

Reputation: 23

Making an expanding text on mouseEnter

I would like to make an expanding menu text like in this webpage: example

Below is my JavaScript code which works but not as i want. The problem is that this type of code is very long, unprofessional and not responsive. For example: if I reduce the screen resolution most of the letters expands out of the screen.

I made that each letter would be in a separate div element.

Question: Maybe there is an option to put all the 'div's' into array and make it expanding by paternal div width (in this case 'NavPersonalBlog')?

Thank you for answers and sorry for my english :)

$(".NavPersonalBlog").on("mouseenter", function() {
  $(".charTopP").animate({
    right: '36%'
  }, 500);
  $(".charTopE").animate({
    right: '28%'
  }, 500);
  $(".charTopR").animate({
    right: '22%'
  }, 500);
  $(".charTopS").animate({
    right: '16%'
  }, 500);
  $(".charTopO").animate({
    right: '8%'
  }, 500);
  $(".charTopN").animate({
    right: '2%'
  }, 500);
  $(".charTopA").animate({
    right: '-2%'
  }, 500);
  $(".charTopL").animate({
    right: '-8%'
  }, 500);
  $(".charTopB").animate({
    right: '-16%'
  }, 500);
  $(".charTopL2").animate({
    right: '-22%'
  }, 500);
  $(".charTopO2").animate({
    right: '-28%'
  }, 500);
  $(".charTopG").animate({
    right: '-36%'
  }, 500);
});
$(".NavPersonalBlog").on("mouseleave", function() {
  $(".charTopP, .charTopE, .charTopR, .charTopS, .charTopO, .charTopN, 
    .charTopA, .charTopL, .charTopB, .charTopL2, .charTopO2,
    .charTopG ").stop(true, true).animate({
    right: 0
  }, 500);
});

Upvotes: 2

Views: 89

Answers (3)

Daniel Beck
Daniel Beck

Reputation: 21485

The CSS letter-spacing property will (mostly) do what you want.

But as @chazsolo correctly points out in his answer, this technique isn't exactly centered. Adding a non-breaking space to the beginning of the string as I've done here helps somewhat, by adding another character for there to be letter-spacing between -- but even this still causes the spacing to be centered based on the number of characters, not on the character width. (Less noticeably, it also offsets the unhovered string's centering by half a space, of course.) Note that the X remains fixed because there are three letters on each side, even though the width of those letters is as different as possible:

div {
  text-align:center; 
  transition: letter-spacing 1s;
}

div:hover {
  letter-spacing: 20px
}
<div>SAMPLE</div>
<div>&nbsp;MMMXIII</div>

This way is simple and may be close enough, but if precision is important go with chazsolo's answer.

Upvotes: 3

chazsolo
chazsolo

Reputation: 8439

The provided answers are great, but they caught my design eye: they aren't exactly centered. Notice in the accepted answer, the center is between the D and the I, and in the answer with "SAMPLE", the P is the center. The following code will give you a much nicer center but it does come with little more structure (extra HTML) and setup.

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  text-align: center;
  flex: 1;
  transition: all 1s ease-in-out 0s;
  max-width: 3%;
}

div:hover span {
  max-width: 7%;
}
<div>
  <span>H</span>
  <span>E</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

There's no need for and jQuery code here - or even JS. You can achieve the effect using a CSS transition on the letter-spacing:

div {
  font: bold 2em arial;
  text-align: center;
  transition: letter-spacing 0.5s;
}
div:hover {
  letter-spacing: 2em;
}
<div>HEADING</div>

Upvotes: 3

Related Questions