CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Emily
Emily

Reputation: 1151

How to make the text content in a div increase and decrease in font size repeatedly?

I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.

This is my attempt using Javascript to change the font size every second:

<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
   var textdiv = document.getElementById("textdiv");
   textdiv.style.fontSize = "20px";
   textdiv.style.fontSize = "25px";

   setTimeout(zoomtext, 1000);
}
</script>

This isn’t working, and I’m not sure that this code would result in a smooth transition. Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).

I’m worried that method might result in a Javascript function running constantly, which might slow down my page.

Is there a better way to get this effect?

Upvotes: 2

Views: 8745

Answers (5)

G-Cyrillus
G-Cyrillus

Reputation: 106018

if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:

#textdiv {
  -webkit-animation: zoom1-2 infinite 1s;
          animation: zoom1-2 infinite 1s;
  -webkit-transform-origin:0 0 ;
          transform-origin:0 0 ;
  font-size:20px;
}
@-webkit-keyframes zoom1-2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes zoom1-2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>

Upvotes: 2

bmcculley
bmcculley

Reputation: 2088

Instead of javascript you could use CSS animations.

Some example HTML:

<!DOCTYPE html>
    <head>
        <title>keyframes text size animation test</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <p id="textdiv">ZOOM</p>
    </body>
</html>

And the CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
#textdiv {
    -webkit-animation: adjustText 1s infinite alternate;
    -moz-animation:    adjustText 1s infinite alternate;
    -o-animation:      adjustText 1s infinite alternate;
    animation:         adjustText 1s infinite alternate;
}

@keyframes adjustText {
  from {
    font-size: 20px;
  }

  to {
    font-size: 25px;
  }
}

Here's a working codepen of this example

Upvotes: 1

Harmen
Harmen

Reputation: 22436

Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.

.grow { 
    transition: all .2s ease-in-out;
}
.grow:hover {
    transform: scale(1.5);
}

Repetition can be accomplished through CSS3 animations:

.grow {
  width: 100px;
  text-align: center;
  animation: grow-animation 2s linear infinite;
}

@keyframes grow-animation {
  0% { transform: scale(1); }
  50% {transform: scale(2); }
  100% {transform: scale(1); }
}

Upvotes: 8

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.

You need to assign your element the animation property, which you then define.

#textdiv {
   animation: textgrowth 1s infinite alternate;
}

@keyframes textgrowth {
    0% {
    font-size: 20px;
    }
    100% {
    font-size: 25px;
    }
}

Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.

Upvotes: 4

andreasonny83
andreasonny83

Reputation: 1211

Try this one:

function zoomtext(){
   var textdiv = document.getElementById("textdiv");
   var fontSize = textdiv.style.fontSize;
  
   if (fontSize !== '48px') {
     textdiv.style.fontSize = '48px';
   }
   else {
     textdiv.style.fontSize = '21px';
   }

  setTimeout(zoomtext, 1000);
}


zoomtext();
<div id="textdiv">ZOOM</div>

Upvotes: 0

Related Questions