CODEWITHSUNDEEP
javascripthtmlcssanimationcentering
dash167
dash167

Reputation: 115

CSS Text Written Out Animation

I'm building a landing page for a client. Their logo is centered with the company slogan directly underneath, and currently the slogan fades in on page load.

They are now asking if the slogan can be animated to look as though it is being written out as opposed to fading in. Does anyone have an idea on how to achieve this effect? I'm stumped.

Any help would be greatly appreciated.

HTML:

<div class="image-wrapper">
 <a href="home.html">
  <img src="images/landing_logo2.png" />
 </a>
 <div id="test">
  <p>enter the sunshine state</p>
 </div>
</div>

CSS:

div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
display: block;
}

#test {
position: absolute;
top: 100%;
width: 100%;
}

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #fff;
margin-top: -40px;
-webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 8s; /* Firefox < 16 */
    -ms-animation: fadein 8s; /* Internet Explorer */
     -o-animation: fadein 8s; /* Opera < 12.1 */
        animation: fadein 8s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

I've attached a JSFiddle:

https://jsfiddle.net/1r3fuk27/

Upvotes: 1

Views: 162

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 2031

you can do so using pure JavaScript as follows -

function type() {
    var el = document.getElementById('test').querySelector(' p');
    var slogan = el.innerHTML;
    el.innerHTML = '';
    var i = 0;
    setInterval(function() {
        var char = slogan.substr(i, 1);
        el.innerHTML += char;
        i++;
    }, 250); // change 250 as per typing speed you need
}
type(); // call the function whenever you need

JSFiddle

Upvotes: 0

Aruna Tebel
Aruna Tebel

Reputation: 1466

Without using external libraries, you can simply do it with this approach.

var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
  (function(i) {
    setTimeout(function() {
      $('#test > p').text(slogan.substring(0, i + 1));
    }, 100 * i);
  }(i));
}
@font-face {
  font-family: segoe;
  src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
  display: block;
}
#test {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-top: -40px;
  -webkit-animation: fadein 8s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 8s;
  /* Firefox < 16 */
  -ms-animation: fadein 8s;
  /* Internet Explorer */
  -o-animation: fadein 8s;
  /* Opera < 12.1 */
  animation: fadein 8s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-wrapper">
  <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

If the text is not visible in the snippet here is the fiddle

Upvotes: 1

Related Questions