Simple animation spacing out letters in an centred phrase

 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice.


There is an example on 'codepen.io':


    'codepen.io/Bert-Beckwith/pen/myVBZdw'


This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 



Comments

Post a Comment

Popular posts from this blog

Replacing 'bare' URL's from the text of links

Image
 I have been changing the text label of links to have words rather than 'bare' URL's.  It seems screen-readers 'say' each character in the URL. I have a lot of links to 'openclipart.org' on my 'credits' page. The text labels of the links were all bare URL's. But these bare URL's describe the 'SVG'. I will have to add more words to the text label of the links to make each description unique. In fact, content on 'openclipart.org' is in the 'public domain' and does not need attribution Also I found out that the symbols for links to Facebook, X, LinkedIn and so on on the first page of my game are too small for some disabilities. Instead I could have used words like 'Facebook'. Also a long link might be better than the big fat links I use for mobiles.
Read more

Starting to use a CSS minifier

Image
 I have started using the 'CSSO' CSS minifier It only reduces the size of my game by 2%. I already used shell and Perl scripts to remove comments and remove some spaces. 'CSSO' additionally removes spaces around '{' and '}' and removes semi-colons after the last property in a rule. Sometimes 'CSSO' combines similar rules and combines properties into a 'shorthand' rule. CSS makes up about 20% of my game. (JavaScripts makes up about 65%). This is after my game is minimised. The size of the CSS is halved when minimised. The minified JavaScript is about 15% of the original size. JavaScript variable names can be shortened but CSS property names cannot be easily shortened. I remove some vendor-prefixed properties. 'CSSO' wrongly changes a small stylesheet to nothing. The stylesheet is:     #navigationSettings {         display: block;     } I had to hide some empty CSS rules from 'CSSO' as it removes them. These rules have prope...
Read more

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...
Read more