Css эффект с числом

Random Numbers in CSS

I stumbled into an interesting problem the other day. I wanted to animate an element with a random animation-duration . This was the non-randomized starting point: See the Pen Random numbers CSS #1 by Robin Rendle (@robinrendle) on CodePen. This is the CSS I wrote to make the animation:

@keyframes flicker < 0% < opacity: 1; >100% < opacity: 0; >> #red

So far so good. But no randomization happening there, that’s a fixed 2 seconds. I wanted that animation time of 2 seconds to be random. I wanted to essentially write:

Where $randomNumber is randomized programatically. CSS preprocessors like Sass do offer a random() function.

$randomNumber: random(5); .thing

• You can use them without the need of a preprocessor.
• They cascade. You can set a variable inside any selector to set or override its current value.
• When their values change (e.g. media query or other state), the browser repaints as needed.
• You can access and manipulate them in JavaScript.

That last bit is what’s important to us. We’re going to generate the random number in JavaScript, then move it over to CSS via custom properties.

Set one is to create the CSS custom property we need, with a default value (useful in case the JavaScript we write in a moment fails for any reason):

/* set the default transition time */ :root

Now we can use that variable in our CSS like this:

Undramatically, we’re exactly where we started. But although this demo now looks exactly the same as our previously animated SVG, this one is using CSS variables instead. You can test that everything is working by just changing the variable in the CSS and watch as the animation updates.

Now we’re all set up to access and manipulate that custom property via JavaScript.

From here we can find the red circle in the SVG and change the —animation-time CSS variable via the setProperty method:

var red = document.querySelector('#red'); red.style.setProperty('--animation-time', time +'s');

And here it is! A randomly generated number in CSS which is being applied to an SVG animation:

This is a step forward because the random number is generated when the JavaScript runs, so it’s different every time. That’s pretty close to what we wanted, but let’s make this a little bit more difficult still: let’s randomize that animation-duration periodically as it’s running.

Fortunately, we have JavaScript to work with now, so we can update that custom property whenever we want to. Here’s an example where we update the animation-duration every second:

var red = document.querySelector('#red'); function setProperty(duration) < red.style.setProperty('--animation-time', duration +'s'); >function changeAnimationTime() < var animationDuration = Math.random(); setProperty(animationDuration); >setInterval(changeAnimationTime, 1000);

That’s exactly what I was after:

It’s useful to remember that CSS variables (custom properties) support is still a little patchy, so beware. Although what we could do is progressively enhance this animation like so:

If CSS variables aren’t supported then we’ll still get some kind of animation being shown, even if it isn’t precisely what we want.

It’s worth noting that CSS variables aren’t the only possible way to randomize the animation-duration. We could access the DOM element via JavaScript and apply the random value directly into the style :

var red = document.querySelector('#red'); red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";

We could even wait for the animation to finish before setting a new duration, if we wanted:

var red = document.querySelector('#red'); function setRandomAnimationDuration() < red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s"; >red.addEventListener("animationiteration", setRandomAnimationDuration);

Just to sprinkle one more possibility in here, you could also do this with EQCSS.

var rand = Math.random(); EQCSS.apply();

Do you wish randomization was available right in CSS itself? I’m not sure if there is any talk of that. Even if there was, we would likely have to wait quite a while to actually use it. Along those lines, Philip Walton recently wrote how difficult it would be to write a true polyfill for random numbers in CSS. Much easier to handle in JavaScript!

Источник

Animating Number Counters

Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful when designing something like a dashboard, to bring a little pizazz to the numbers. Amazingly, this can now be done in CSS without much trickery. You can jump right to the new solution if you like, but first let’s look at how we used to do it. One fairly logical way to do number animation is by changing the number in JavaScript. We could do a rather simple setInterval , but here’s a fancier answer with a function that accepts a start, end, and duration, so you can treat it more like an animation:

Keeping it to CSS, we could use CSS counters to animate a number by adjusting the count at different keyframes:

Another way would be to line up all the numbers in a row and animate the position of them only showing one at a time:

Some of the repetitive code in these examples could use a preprocessor like Pug for HTML or SCSS for CSS that offer loops to make them perhaps easier to manage, but use vanilla on purpose so you can see the fundamental ideas.

The New School CSS Solution

With recent support for CSS.registerProperty and @property , we can animate CSS variables. The trick is to declare the CSS custom property as an integer; that way it can be interpolated (like within a transition) just like any other integer.

@property --num < syntax: ''; initial-value: 0; inherits: false; > div < transition: --num 1s; counter-reset: num var(--num); >div:hover < --num: 10000; >div::after

Important Note: At the time of this writing, this @property syntax is only supported in Chrome ( and other Chromium core browsers like Edge and Opera), so this isn’t cross-browser friendly. If you’re building something Chrome-only (e.g. an Electron app) it’s useful right away, if not, wait. The demos from above are more widely supported. The CSS content property can be used to display the number, but we still need to use counter to convert the number to a string because content can only output values.

See how we can ease the animations just like any other animation? Super cool! Typed CSS variables can also be used in @keyframes :

One downside? Counters only support integers. That means decimals and fractions are out of the question. We’d have to display the integer part and fractional part separately somehow.

1. Register an CSS variable ( e.g. —integer ), with the initial-value specified
2. Then use calc() to round the value: —integer: calc(var(—number))

In this case, —number will be rounded to the nearest integer and store the result into —integer .

@property --integer < syntax: ""; initial-value: 0; inherits: false; > --number: 1234.5678; --integer: calc(var(--number)); /* 1235 */

Sometimes we just need the integer part. There is a tricky way to do it: —integer: max(var(—number) — 0.5, 0) . This works for positive numbers. calc() isn’t even required this way.

/* @property --integer */ --number: 1234.5678; --integer: max(var(--number) - 0.5, 0); /* 1234 */

We can extract the fractional part in a similar way, then convert it into string with counter (but remember that content values must be strings). To display concatenated strings, use following syntax:

content: "string1" var(--string2) counter(--integer) . 

Here’s a full example that animates percentages with decimals:

Because we’re using CSS counters, the format of those counters can be in other formats besides numbers. Here’s an example of animating the letters “CSS” to “YES”!

Oh and here’s another tip: we can debug the values grabbing the computed value of the custom property with JavaScript:

getComputedStyle(element).getPropertyValue('--variable')

That’s it! It’s amazing what CSS can do these days.

Источник

8 CSS Animated Counters

Collection of hand-picked free HTML and pure CSS animated counter code examples from Codepen and other resources.

Related Articles

Author

Links

Made with

About a code

CSS Binary Counter

Auto-incrementing binary counter with decimal output, made with CSS animations and no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Counter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animated counter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

3D Flip Clock Counter in Pure CSS

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

SVG Counter

CSS based SVG Path animation.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Counter

Time counter made in CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animated Counter Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Counter

Counting up with ::before & ::after content. A pure CSS counter is probably completely useless. but it is possible.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Источник

Анимация чисел при прокрутке страницы

Всем — привет. Сегодня поговорим о том, как сделать анимацию чисел на сайте, и реализуем этот эффект таким образом, чтобы он сработал только в тот момент, когда пользователь видит его.

То есть находиться в так называемой «активной области».

Недавно реализовывал подобный эффект на одном из сайтов, а также заметил комментарий на блоге с вопросом:

Мб глупый вопрос, но….
Если мне нужно определенное действие js, то могу ли я как-то подключить wow.js для этого? Например, у меня есть скрипт, который увеличивает значение счетчика от 0 до нужного числа. И как подвязать wow.js, чтобы скрипт начал работать только когда пользователь доскроллит до счетчика?

Этой статьей я и покажу, как реализовать запуск скрипта, который реализует анимацию чисел от 0 до нужного значения в момент, когда пользователь доскроллил до этого блока на сайте. Только без wow.js, так как нет смысла подключать целый плагин для этих целей. Обойдемся небольшим самописным скриптом.

На самом деле решение не мое (подсмотрел на блоге webcareer), но ничего сложно, можно и самому было разобраться. Если скрипт рабочий, то почему им не воспользоваться? Итак, приступим.

Анимация цифр и чисел

Давайте начнем с того, что реализуем блок с анимацией чисел. Для этого нам нужно подключить jquery, плагин spincrement и файл, в котором вы пишите все свои скрипты. Конечно, для более быстрой загрузки лучше размещать их в конце документа и объединять все js и css файлы в 1, но это совсем другая история.

Вот так выглядит разметка блока с числами, которую быстренько набросал для примера:

Где .benefits__number — класс элемента, в котором расположены цифры. ThousandSeparator — это символ, который будет разделять тысячи. Duration — продолжительность анимации. У скрипта есть и другие настройки (обратный отсчет, начало анимации с заданного числа и т.д.), подробнее с которыми можно ознакомиться перейдя на страницу проекта по ссылке выше.

.benefits < width: 100%; background: #151d2d; >.benefits__inner < display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 1140px; margin: 0 auto; padding: 60px 0; >.benefits__header < width: 100%; text-align: center; line-height: 1.3; padding: 0 15px 60px; color: #e2e2e2; font-size: 2rem; text-transform: uppercase; >.benefits__element < width: 30%; >.benefits__icon < display: block; width: 60px; height: 50px; margin: 0 auto; margin-bottom: 20px; >.benefits__element p < color: #cdcdcd; text-align: center; line-height: 1.3; >.benefits__number < font-size: 2.5rem; font-weight: 700; margin-bottom: 20px >.benefits__title

Теперь наш блок с цифрами выглядит так:

Пока не обращаем внимания на то, что он срабатывает сразу после загрузки страницы. Сейчас мы это поправим воспользовавшись тем самым скриптом, о котором шла речь вначале статьи:

var show = true; var countbox = ".benefits__inner"; $(window).on("scroll load resize", function () < if (!show) return false; // Отменяем показ анимации, если она уже была выполнена var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа var w_height = $(window).height(); // Высота окна браузера var d_height = $(document).height(); // Высота всего документа var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками if (w_top + 500 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) < // // скрипт который должен выполниться // show = false; >>);

В принципе комментарии подробные, кто захочет разобраться — разберется. Единственное что поясню, так это то, что цифра 500 указывает на каком расстоянии от верха окна браузера сработает наш скрипт с анимацией. Можете менять его на свое усмотрение. А .benefits__inner — блок с цифрами.

Если собрать вместе, то скрипт будет выглядеть так:

$(document).ready(function () < var show = true; var countbox = ".benefits__inner"; $(window).on("scroll load resize", function () < if (!show) return false; // Отменяем показ анимации, если она уже была выполнена var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа var w_height = $(window).height(); // Высота окна браузера var d_height = $(document).height(); // Высота всего документа var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками if (w_top + 500 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) < $('.benefits__number').css('opacity', '1'); $('.benefits__number').spincrement(< thousandSeparator: "", duration: 1200 >); show = false; > >); >);

Для того, чтобы реализовать эффект более красиво, давайте зададим блоку с цифрами полную прозрачность:

А в тот момент, когда должна произойти анимация изменим непрозрачность на 100% этой строкой:

('.benefits__number').css('opacity', '1');

P.S.: Если понравился эффект анимации чисел, то обратите внимание и на статью в которой рассказывалось об анимации текста, ведь это тренд на landing page.

Похожие публикации

18 комментариев

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

Источник