最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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?

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?

Share Improve this question asked Feb 24, 2016 at 16:41 EmilyEmily 1,1515 gold badges21 silver badges43 bronze badges 1
  • is it suppose to push things down every time it increase, or do you only want the zoom effect without having container to grow with the text ? – G-Cyrillus Commented Feb 24, 2016 at 17:17
Add a ment  | 

5 Answers 5

Reset to default 8

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 acplished 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); }
}

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.

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>

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

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>

发布评论

评论列表(0)

  1. 暂无评论