effect – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:12:41 +0000 en-US hourly 1 CSS Text Effect Animation https://thingography.com/css-text-effect/ https://thingography.com/css-text-effect/#respond Tue, 13 Mar 2018 00:38:17 +0000 http://thingography.com/?p=2019 .ani-box { width: 100%; height: auto; overflow: hidden; background-color: #FCFFE5;} .thewords { overflow: hidden; margin: 0em auto 2em auto; width: 70%; position: relative; animation: spread-box 25s infinite; padding-bottom: 2em; } .thewords p { width: 100%; font-size: 1.2em; color: #000; font-weight: bold; letter-spacing: 0.2em; word-spacing: 0.2em; text-align: left; line-height: 1.1em; animation: spread 25s infinite; } /* ===== Move the Paragraph ===== */ @keyframes spread-box { 0% {width:26000px; margin-left:-1800px; transform: rotateZ(-30deg);} 20% {width: 80%; margin-left: auto; margin-right: auto; transform: rotateZ( 0deg);} 80% {width: 80%; margin-left: auto; margin-right: auto; transform: rotateZ( 0deg);} 100%{width:26000px; margin-left:-1800px; transform: rotateZ(-30deg);} } /* ===== Spread the lettering ===== */ @keyframes spread { 0% {letter-spacing: 20em; line-height:400px;} 20% {letter-spacing:0.2em; line-height: 22px;} 80% {letter-spacing:0.2em; line-height: 22px;} 100%{letter-spacing: 20em; line-height:400px;} }

 This text animation is played relatively slow to show the effect. The speed can be adjusted to fit your needs. Originally created to be used as a video text effect like the scrolling Star Wars text effect.

 The text will play forward and stop for 5-10 seconds then reverse direction and replay infinitely. So if you want you can finish reading next replay if desired.

 This is just one of many text animations that can be created with CSS. Using font-size, font-color, letter spacing, word spacing and other CSS properties can render hundred of different effects to suite your needs.

 Letter-spacing is not commonly used for CSS animation, that I have observed in my browsing, and can be used for other effects. One I have toyed with is “The Matrix” screen-saver effect with pure CSS.

 Thank You for reading this far, I needed text to fill this page, I did not want to use “Lorem Ipsum” random text.

]]>
https://thingography.com/css-text-effect/feed/ 0