I’d like to make an animated logo for my site’s header, similar to these two sites’ logos (hold the mouse-pointer over their top-left logo): https://bootsnipp.com/ and http://www.hostco.com/
I also want the logo to animate on its own without any user-interaction (i.e. without doing a mouser-over). I haven’t yet decided on when kind of animation I want without user-interaction and what should be done on its own, but this also depends on if multiple animated images are used or just one, and if the start/end points in the animation sequence can be selected or not. I have a general idea of what my logo should look like and the type of animations I’m looking for.
What kind of format is this done in, what the usual size (for a Bootstrap header, and being able to resize according to the screen size in question), and what’s the usual technique for doing this?
Is it something that can be done in Photoshop or do I need other tools?
The Bootsnip animation is using CSS transition and transform properties. The < and > characters are inserted using ::before and ::after CSS pseudo elements.
The Hostco animation is created using the Raphaël JavaScript library. It’s an SVG element with animated contents.
Cool!
It looked a little daunting at first, but from various examples I see that CSS animation isn’t as hard as it looks. The Raphaël stuff appears more complex though.
I’ve been searching for more info on the subject and understand there’s also the use of Adobe illustrator vector images (.SVG) in multiple layers, with CSS controlling the actual animation. And standard animated GIFs, but I suppose they’re not ideal for responsive websites because they don’t rescale very well. Maybe they’re more suited for favicons?
My idea is to make a text-based logo, similar to the one found at Glyphicons.com:
In my case I’d want the red/white cross inside the letter “O” to rotate at certain intervals while the rest of the title-name would be static. In addition the animation should start with a mouse-over.
How would something like this be best achieved? A multi-layered SVG file with “GLYPHICON” rendered from a font on its own layer, and the red/white cross in various rotating positions on their own layers, then have the CSS set up a sequence of which layers to show, when and for how long?
I have used CSS animation to rotate the graphic. It is started by JavaScript event listener detecting paragraph (inline-block) mouseover and then adding the “go” class to the graphic. After 10 seconds the JavaScript timeout removes the “go” class.
Code is:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<style>
p {
display: inline-block;
font: bold 40px Arial;
}
@keyframes car {
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
.go {
animation: car 5s linear infinite;
}
</style>
</head>
<body>
<div>
<p>T<img src="taxi.png">XI</p>
</div>
<script>
let p = document.querySelector("p");
let c = document.querySelector("img");
p.addEventListener("mouseover", function () {
c.classList.add("go");
setTimeout(function () {
c.classList.remove("go");
}, 10000);
});
</script>
</body>
</html>
Very nice! Clean, simple and not too much. And I see the whole logo resizes up/down equally too!
I hope you don’t mind borrowing your code, but I copied it over to my pen to try to understand it better.
I noticed that the graphic image (replacing the letter “O”) gets messed up/flickers when rotating. I tried to give it some more space by putting a space after and before but that apparently wasn’t the reason.
I see that CSS can be used to create some nice animations, but what if I want the rotating graphic to be contained inside the letter “O” without replacing it as in the above example and yours? Obviously first selecting a font that has a perfectly round “O” (not oval as in many fonts).
Would such an animation best be done in Adobe Illustrator using multiple layers?
The animation appears nice a smooth with no flicker on my PC. Are you using a smartphone?
If the ‘O’ is perfectly round, wouldn’t it be easier to incorporate the ‘O’ into the graphic? That way you wouldn’t have to find a font with a round ‘O’.
I cannot comment on this as I have not used Adobe Illustrator, PhotoShop or Canva. However you could consider using CSS position:relative or position:absolute to overlay the graphic element over the text within HTML.
Are you resizing the font and resizing the image (by the same proportion)?
My code may need modifying so it works as required if hover occurs two or more times within the 10 seconds. I have not investigated this.
Yes, agreed. I have a logo on a client’s website that animates for 2 seconds after page load. Perhaps that should be frowned upon but it’s only on the home page. I don’t see that animating a logo on hover improves a website. However I do think animation can be added for some fun. I once created a CSS animation where a spider ran around a text block. It was for the website of a childrens’ author. With all 8 legs independently animated, I expect my PC’s processor would have grumbled if it could .
I can get may ‘TAXI’ animation to start on hover with pure CSS but I think JavaScript is required to keep the animation running for a specific time after the cursor is removed from the logo. Anyway I see no issue with using JavaScript provided the web page looks OK if JavaScript is disabled.
There’s no JavaScript but as a result the animation stops and resets as soon as hover is removed from the logo. You could include JavaScript as before.
