CODEWITHSUNDEEP
htmlcssanimation
JoSch
JoSch

Reputation: 990

Web Design/CSS: Animated logo with CSS?

For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:

enter image description here

The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.

<div id="logo" class="lma">
    <a href="http://ourplace.studio" class="animaition-link">
        <span>Our</span>&nbsp;<span>Place</span>
    </a>
</div>

It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.

Upvotes: 1

Views: 1997

Answers (3)

Jonathan
Jonathan

Reputation: 2063

You can achieve this using css3 transitions:

  transition: width 1s;

I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/

Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.

The transition attribute combines all transition-properties, which you could also separate e. g.

transition: width;
transition-duration: 1s;
...

See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp

Upvotes: 1

Jenti Dabhi
Jenti Dabhi

Reputation: 880

Hi please check this demo here https://jsfiddle.net/JentiDabhi/83auj9v8/

HTML:

<div id="logo">
            <a href="#" class="animsition-link">
                <span>Demo</span><span>Logo</span>
            </a>
        </div>

CSS:

#logo {
  width:210px;
  font-size: 40px;
}
#logo span {
  display: inline-block;
  float: left;
  margin-right: 0;
  overflow: hidden;
}
#logo span {
  transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
  padding-top: 1px;
  width: 28px;
}
#logo span:nth-child(2) {
  padding-top: 1px;
  width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
  padding-top: 1px;
  width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
  padding-top: 1px;
  width: 100px;
}

Upvotes: 1

Awsme Sandy
Awsme Sandy

Reputation: 1408

i have made a fiddle for you, i hope that works for you

<div id="logo" class="lma">
  <a href="http://ourplace.studio" class="animsition-link">
  <span>O<i>ur&nbsp;</i></span><span>P<i>lace</i></span>
  </a>
</div>


div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}

div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}

Upvotes: 1

Related Questions