CODEWITHSUNDEEP
csscss-transitions
Edwarric
Edwarric

Reputation: 533

Animate CSS Letter spacing with direction

My Plan:
To have some words aligned to the right of the screen with a lot of letter spacing.
When these words are hovered over, the letter spacing reduces.
BUT, when the letter spacing is reduced, the text must still be aligned to the right i.e.

                                                              H  E  L  L  O
                                                              W  O  R  L  D
// When hovered -->
                                                                      HELLO
                                                                      WORLD

So the last letters in each word have a fixed position.

So far: https://jsfiddle.net/ogoo77h8/1/#&togetherjs=QjBe1mjmJe
When I tried the last letters in each word move.

Thank you!

Upvotes: 0

Views: 1055

Answers (2)

Henrik Nielsen
Henrik Nielsen

Reputation: 410

Here is a solution without modifying the HTML:

https://jsfiddle.net/16wgkemj/

It basically just positions the <p> element right (instead of left) then balances out the letter spacing of the last letter with a margin.

.title {
    position: absolute;
    top: 2%;
    right: 0%;
    font-size: 30px;
    text-align: right;
    letter-spacing: 20px;
}

.hello,
.world {
    -webkit-transition: letter-spacing 2s ease, margin-right 2s ease;
    transition: letter-spacing 2s ease, margin-right 2s ease;
    display:block;
    margin-right:0px;

}

.hello:hover,
.world:hover {
    letter-spacing: 0px;
    margin-right:20px;
}

Upvotes: 1

Mahbub Hasan
Mahbub Hasan

Reputation: 451

Little html and css update can solve the issue.

try this

<p class="title">
  <span class="hello">HELL<span>O</span></span>
  <span class="world">WORL<span>D</span></span>
</p>

add css

.hello span,
.world span{
   letter-spacing: 0;
}

Upvotes: 0

Related Questions