Как увеличить содержание текста в div и уменьшить размер шрифта?

Мне интересно, возможно ли, чтобы текстовое содержимое div увеличивалось и уменьшалось размер шрифта повторно каждую секунду. Это даст эффект, когда текст, кажется, приближается ближе к зрителю, прежде чем двигаться назад, в идеале это будет плавный переход и не будет выглядеть как 2 кадра gif.Как увеличить содержание текста в div и уменьшить размер шрифта?

Это моя попытка с помощью Javascript, чтобы изменить размер шрифта каждый второй:

<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>

Это не работает, и я не уверен, что этот код приведет к плавному переходу. Возможно, можно сделать плавный переход, изменив шрифт на десятые доли пикселя (например: 20px, 20.1px, 20.2px ... и т. Д. До 25px, а затем уменьшив его до 20px таким же образом).

Я обеспокоен тем, что метод может приводить к постоянной работе Javascript, что может замедлить мою страницу.

Есть ли лучший способ получить этот эффект?

источник

2016-02-24 Emily

является то, предполагают, чтобы толкать вещи вниз каждый раз, когда он увеличивает, или вы хотите, только эффект масштабирования без иметь контейнер расти с текстом? –

Вы можете достичь того же эффекта с помощью CSS Animations. Это тоже довольно просто, и намного лучше, чем использование Javascript для этого.

Вам необходимо присвоить свой элемент свойству animation, которое вы затем определяете.

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

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

Обязательно добавьте alternate в конце вашего правила CSS, чтобы сделать анимацию вернуться назад и вперед.

источник

2016-02-24 16:52:10

Этот ответ очень хорошо подходит к вопросу «Есть ли лучший способ получить этот эффект?». Просто скрипка сделает его лучше: https://jsfiddle.net/1z4kLduf/ (также, хорошая ссылка на caniuse) – briosheje

Использование переходов CSS с преобразованием шкалы. Переходы размера шрифта никогда не являются гладкими, а переходы на transform дешевы.

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

Повторение может быть достигнуто с помощью CSS3 анимации:

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

источник

2016-02-24 16:45:28 Harmen

Попробуйте это:

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>

источник

2016-02-24 16:47:08 andreasonny83

что случилось с моим кодом @Emily? Он делает именно то, что вы просили – andreasonny83

Привет @sonny спасибо за ваш ответ, я не уменьшил его, кто-то еще должен иметь, он работает, но другой ответ имеет более плавный переход, который я ищу. Спасибо за ваш ответ. – Emily

Несомненно, нет проблем – andreasonny83

Вместо javascript вы можете использовать CSS animations.

Некоторые примеры 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>

И 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; 
    } 
}

Вот working codepen этого примера

источник

2016-02-24 17:01:58 bmcculley

если это только увеличение на экране, а не растет контейнер тоже затем scale(); должно быть то, что вы ищете:

#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>

источник

2016-02-24 17:21:03

Как увеличить содержание текста в div и уменьшить размер шрифта?

ответ

Смежные вопросы