text – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:15:09 +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 Text CSS Animation – Wildcats https://thingography.com/css-texta1/ https://thingography.com/css-texta1/#respond Tue, 13 Mar 2018 00:15:32 +0000 http://thingography.com/?p=1986 .ani-box {width: 100%; height: auto; background: #d1f0ff; background: -moz-linear-gradient(top, #d1f0ff 0%, #e5e5e5 100%, #207cca 100%, #207cca 100%); background: -webkit-linear-gradient(top, #d1f0ff 0%,#e5e5e5 100%,#207cca 100%,#207cca 100%); background: linear-gradient(to bottom, #d1f0ff 0%,#e5e5e5 100%,#207cca 100%,#207cca 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f0ff', endColorstr='#207cca',GradientType=0 ); } #words { position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; } .word { padding: 0; margin: 0 auto 0; width: 100%; } .new-word { padding: 0; margin: 0 auto 0; width: 100%; position: absolute; left: 0; top: 0; } /* ===== A in Arizona ===== */ .word div, .new-word div { padding: 2px 5px; font-weight: bold; line-height: 1em; color: #FF0000; font-size: 5em; font-family: JasmineUPC; text-transform: capitalize; text-shadow: 3px 3px 12px black; display:inline-block; position: relative; margin: 0 auto; font-size: 300%; font-size: 8vw; height: auto; } .word div { animation: amazing 20s linear infinite; } .new-word div { animation: amazing2 20s linear infinite; } #letter1a img { height: auto; width: 100%; } /* ===== Image ===== */ #cat { margin: 0em auto 1em; width: 90%; height: auto; text-align: center; } #wc { margin: 0 auto; width: 100%; height: auto; max-width: 450px; animation: amazing3 20s linear infinite; } /* ===== TEXT 1 Animation ===== */ @keyframes amazing { 0% {transform: scale(0); opacity: 1;} 25% {transform: scale(1); opacity: 1;} 50% {transform: scale(0); opacity: 1;} 51% {transform: scale(0); opacity: 0;} 100% {transform: scale(0); opacity: 0;} } @keyframes amazing2 { 0% {transform: scale(0); opacity: 0;} 50% {transform: scale(0); opacity: 0;} 51% {transform: scale(0); opacity: 1;} 75% {transform: scale(1); opacity: 1;} 100% {transform: scale(0); opacity: 1;} } /* ===== Image Animation ===== */ @keyframes amazing3 { 0% {transform: scale(0.1); opacity: 0;} 100%{transform: scale(1); opacity: 1;} }
a
m
a
z
i
n
g

a
r
i
z
o
n
a

AZ-WC

]]> https://thingography.com/css-texta1/feed/ 0 CSS Text Animations – Arizona https://thingography.com/css-texta2/ https://thingography.com/css-texta2/#respond Tue, 13 Mar 2018 00:08:48 +0000 http://thingography.com/?p=2009 .ani-box {width: 100%; height: 600px; background: url(http://thingography.com/my-things/wp-content/uploads/css-img/texta2/gc.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } #mainlogo { margin-right: auto; margin-left: auto; width: 100%; height: 140px; min-width: 700px; margin-top: 300px; position: relative; } #mainlogo { background-image: linear-gradient(top, #E7DFFF, #40C6E8); background-image: -moz-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -webkit-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -o-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -ms-linear-gradient(top, #E7DFFF, #40C6E8); } /* **** Phase 1 **** */ .word { padding: 0; margin: 150px auto 0; height: 120px; width: 700px; opacity: 0; position: relative; top: 0; animation: one 4.2s; } @keyframes one { 0% {z-index: 3; opacity: 1;} 99% {z-index: 3; opacity: 1;} 100%{z-index: -1; opacity: 0;} } #letter1, #letter2, #letter3, #letter4, #letter5, #letter6, #letter7 { padding: 0; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; animation: amazing 4.2s; } @keyframes amazing { 0% {width: 0px; opacity: 0; font: 0;} 10% {width: 0px; opacity: 0;} 80% {width:100px;} 100%{width:100px;} } /* **** Phase 2 **** */ .worda { padding: 0; margin: 0 auto; height: 120px; width: 700px; opacity: 0; position: relative; top: -120px; animation: two 4.2s; animation-delay: 4s; } @keyframes two { 0% {opacity: 1;} 1% {opacity: 1;} 99% {opacity: 1;} 100%{opacity: 0;} } #letter1a, #letter2a, #letter3a, #letter4a, #letter5a, #letter6a, #letter7a { padding: 0; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; } #letter1a, #letter2a, #letter5a, #letter6a, #letter7a { width: 0; opacity:0; animation: lose 4.2s; animation-delay: 4s; } @keyframes lose { 0% {width:100px; opacity: 1;} 1% {width:100px; opacity: 1;} 40% {width:100px; opacity: 0.2;} 80% {width: 0px; opacity: 0;} 100%{width: 0px; opacity: 0;} } /* **** Phase 3 **** */ .wordb { padding: 0; margin: 0 auto; height: 120px; width: 700px; opacity: 1; position: relative; top: -240px; animation: three 12s; } @keyframes three { 0% {opacity: 0;} 66.65% {opacity: 0;} 66.66% {opacity: 1;} 99% {opacity: 1;} 100% {opacity: 1;} } #letter1b, #letter2b, #letter3b, #letter4b, #letter5b, #letter6b, #letter7b { padding: 0px; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; text-shadow: 2px 5px 10px #000000, 0 0 2px #000; animation: shad 4s; animation-delay: 8s; } @keyframes shad { 0% {text-shadow: 0px 0px 0px #000000;} 50% {text-shadow: 2px 5px 10px #000000;} 100%{text-shadow: 2px 5px 10px #000000;} } #letter2b, #letter3b, #letter5b, #letter6b, #letter7b { width: 100px; animation: expand 4s; animation-delay: 8s; } @keyframes expand { 0% {width:0px; opacity: 0;} 20% {width:0px; opacity: 0;} 80% {width:100px; opacity: 1;} 100%{width:100px; opacity: 1;} } /* **** Phase 4 **** */ .logo { width: 400px; font-family: "BernhardFashion BT"; font-size: 24px; color: #FFF; text-align: center; margin:0 auto; position: relative; top: -255px; letter-spacing: 5px; font-weight: bold; text-shadow: 2px 0 4px #000; animation: appear 16s; } @keyframes appear { 0% {opacity: 0;} 70% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;} }

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