Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Плавное увеличение числа

Всем привет. Необходимо реализовать функцию плавного увеличения числа от 0 до какого-нибудь, за определенное время.

Самому не дошло, прошу совета у профессионалов!
Ответ: Мой небольшой рабочий пример, сам новичок пишу всякую ерунду иногда), но тут перемешка js и jquery, так что не забудьте подключить jquery.
<span class="number-count__red">0</span>

var cikl = false;       //функция выполняется один раз
    window.onscroll = function scroll() {
            var scrollHeight = Math.max(
                document.body.scrollHeight, document.documentElement.scrollHeight,
                document.body.offsetHeight, document.documentElement.offsetHeight,
                document.body.clientHeight, document.documentElement.clientHeight
            );                                                                              //получаю высоту страницы
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;       //получаю цифру, на сколько прокручин элемент
            var scrollTopElemParent = $('.category__header').height();                      //высота header
            var scrollTopElem = $('#promos').offset();                                      //высота от header до нужного мне блока $('#promos')
            var start = 0, end = 135;                                                       // начало анимации конец анимации
            if (scrollTopElem.top < scrollTop + scrollTopElemParent + 400) {                // после того как мы докрутили до эелмента начинаем выполнять
                if (!cikl) {
                var element = $('.number-count__red')                                       //получаем наш селектор
                if (start <= end) {
                    var intervlal = setInterval(function () {                               //увеличиваем значение на 1 каждый1 0,2 сек.
                        element.innerHTML = start;                                          // записываем число в наш селектор
                        start += 1;
                        if (start == end) {                                                 //когда начальное значение и конечно будут равны оставнавливаем функцию
                            clearInterval(intervlal);
                            element.innerHTML = end;
                        }
                    }, 20);
                }
                    cikl = true;
            }
        }
    }
    }
Вопрос: Плавное увеличение / уменьшение картинки. Бесконечный цикл.

Всем привет:
Сделал плавное увеличение / уменьшение картинки на сss.

.slider{
-webkit-transition:all 4000ms linear;
-moz-transition:all 4000ms linear;
-o-transition:all 4000ms linear;
-ms-transition:all 4000ms linear;
transition:all 4000ms linear;
}
.slider:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

Однако такой код только увеличивает картинку при наведении, а есть ли возможность через jQuery сделать бесконечный цикл, чтобы после того, как картинка достигла своего максимума за заданный промежуток времени - после этого начала уменьшаться, а после достижения минимума - наоборот. и так в бесконечном цикле???
Ответ: LLIypuk,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:500px;
    height:300px;
    overflow: hidden;
    position: relative;
    background-image: url(http://s1.fotokto.ru/photo/full/401/4019083.jpg);

  }
  div:hover{
    position: absolute;
    top:0;
   -webkit-animation: up 5s ease-in-out infinite;
	-moz-animation: up 5s ease-in-out infinite;
	-o-animation: up 5s ease-in-out infinite;
	animation: up 5s ease-in-out infinite;

  }
  @keyframes up {
	50% {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
	}
}
@-webkit-keyframes up {
	50% {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
	}
}


  </style>
</head>

<body>
<div></div>

</body>

</html>
Вопрос: Увеличивающиеся числа

Гуглил, не нашёл точного ответа на интересующую меня задачку :
три разных числа, которые одновременно увеличиваются от 0 до своего конечного значения, процесс начинается тогда, когда пользователь видит эти числа, т.е. не сразу после открытия страницы и не по таймингу, а именно когда человек долистает до них. Пример: где-то на http://themes.mokaine.com/beetle-wp/
Как это сделать?
Ответ: Всё верно, нашёл решение.
Вопрос: Увеличение отступа на число

Доброго времени суток, необходимо увеличить отступ с лева по формуле: отступ с лева + тысяча. Какой должен быть синтаксис что-бы сложить css свойство с числом?
Javascript
1
2
3
4
5
6
7
$(document).ready(function(){
    $('#frstslid .right').click(function(event){
        var content = $('#frstslid .content');
        var y = content.css('margin-left')+1000;
        content.css('margin-left',y);
    });
});
Ответ: logik444, также может принимать относительные значения - строки начинающиеся с += и -=, конкретно в вашем примере можно записать так:
Javascript
1
content.css('margin-left', '+=1000');
Вопрос: Анимация числа, при изменении ширина HTML элемента

Здравствуйте! Помогите разобраться с динамической анимацией числа в блоке, интересует решение только на чистом javascript.

Имеется блок с размерами 25 на 25px, в блоке находится число (0%), при клике по этому блоку происходит событие, которое задает блоку величину (в данном случае 75%), после чего его ширина плавно увеличивается на заданную величину. Но как привязать это динамическое увеличение и к числу, чтобы увеличение числа так же происходило синхронно при увеличении ширины блока до заданного числа, то есть до 75%?

Вот пример

Может есть какое то событие, которое отслеживает состояние блока?

Буду благодарен, если подтолкнете в нужном направлении
Ответ: Ой, html стилями менять не выйдет, не внимательно посмотрел.

<div style="background: green; width: 0%">0%</div>

<script>

var animate = function (options) {
        var start = Date.now(); // сохранить время начала

        requestAnimationFrame(function tick() {
            var timePassed = Date.now() - start;
            var progress = timePassed / options.duration;
            var timeFunction = options.timeFunction || function (progress) {
                        return progress;
                    };
            progress = progress > 1 ? 1 : progress;

            options.step(timeFunction(progress));

            if (progress === 1) {
                options.complete();
            } else {
                requestAnimationFrame(tick);
            }

        });
    };

var div = document.querySelector('div');

animate({
   duration: 5000,
   step: function (progress) {
      var percent = Math.round(75 * progress) + '%';
      div.innerHTML = percent;
      div.style.width = 75 * progress + '%';
   },
   complete: function () {}
});

</script>
Вопрос: Почему не работает счетчик на увеличение

Здравствуйте. Помогите разобраться, почему не работает скрипт. Ситуация следующая: на старом, разработанным неизвестно кем сайте висел скрипт счетчика чисел на увеличение. Скрипт работал, три цифры на экране увеличивались с разным интервалом времени. Сейчас сайт новый, но скрипт решили сохранить. Вроде и вызывается он просто, и сам по себе простой, но на новом сайте он не работает. Второй день пытаюсь понять почему и не могу. Вот, собственно, как это выглядит:
Код HTML5
1
2
3
4
<script src="/js/code-counter.js" type="text/javascript"></script>
<p>Первое число: <span id="counter"></span></p>
<p>Второе число: <span id="counter_two"></span></p>
<p>Третье число: <span id="counter_three"></span></p>
А это скрипт в файле "code-counter.js"
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$(document).ready(function(counter){
 
   var start = 59777682;
   var result = start.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
   document.getElementById("counter").innerHTML = result;
   setInterval(function(){ 
    start++;
    var result = start.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
    document.getElementById("counter").innerHTML = result;
   }, 32000)
 
 
   var start2 = 46951188;
   var result2 = start2.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
   document.getElementById("counter_two").innerHTML = result2;
   setInterval(function(){ 
    start2++;
    var result2 = start2.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
    document.getElementById("counter_two").innerHTML = result2;
   }, 32000)
 
 
   var start3 = 9196;
   var result3 = start3.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
   document.getElementById("counter_three").innerHTML = result3;
   setInterval(function(){ 
    start3++;
    var result3 = start3.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
    document.getElementById("counter_three").innerHTML = result3;
   }, 32000)
 
    updateClock();
    updateClock2();
    updateClock3();
    setInterval('updateClock()',0);
    setInterval('updateClock2()',0);
    setInterval('updateClock3()',0);
});
 
function updateClock() {
    var ts = Math.round(((new Date().getTime() / 1000) - 1136073600) / 4);
    var tsQ = ts.formatMoney(0, "", " ");
    document.getElementById("counter").innerHTML = tsQ;
}
 
function updateClock2() {
    var ts2 = Math.round((((new Date().getTime() / 1000) - 1136073600) / 4) * 0.78543);
    var ts2Q = ts2.formatMoney(0, "", " ");
    document.getElementById("counter_two").innerHTML = ts2Q;
}
 
function updateClock3() {
    var ts3 = Math.round((((new Date().getTime() / 1000) - 1136073600) / 4) / 6500);
    var ts3Q = ts3.formatMoney(0, "", " ");
    document.getElementById("counter_three").innerHTML = ts3Q;
}
 
Number.prototype.formatMoney = function(c, d, t){
    var n = this,
        c = isNaN(c = Math.abs(c)) ? 2 : c,
        d = d == undefined ? "." : d,
        t = t == undefined ? "," : t,
        s = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
Прошу, помогите заставить этот скрипт работать.
Ответ: в принципе три разных айдишника для трёх спанов - это излишество, достаточно будет одного для общего внешнего контейнера

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
onload = function ()
{
// для каждого из трёх спанов задаёте:
 
numb = [ 10,   5,  12]; // начальное число
plus = [  2,   1,   5]; // величину инкремента
time = [123, 234, 345]  // интервал в миллисекундах
 
cnt = document.getElementById ('counters').getElementsByTagName ('span');
setInterval ('cnt [0].innerHTML = numb [0] += plus [0]', time [0]);
setInterval ('cnt [1].innerHTML = numb [1] += plus [1]', time [1]);
setInterval ('cnt [2].innerHTML = numb [2] += plus [2]', time [2]);
}
</script>
 
<div id="counters">
<p>Первое число: <span></span>
<p>Второе число: <span></span>
<p>Третье число: <span></span>
</div>
ну и наслаждаетесь, пока стек не переполнится
Вопрос: Сделать статичными блоки при увеличении размера блока

Есть несколько блоков div, идущие подряд сверху вниз. Каждый содержит некоторый текст. При событии hover на div текст увеличивается с 11 px до 13 px, при этом высота div немного увеличивается, из-за чего все нижестоящие div съезжают вниз, но это некрасиво, так как получается, что вся страница прыгает.
Как можно сделать, чтобы нижестоящие блоки не съезжали вниз? Задать фиксированную высоту div я не могу, т.к. все div разной высоты. Может быть можно как-то задать блоку div заранее высоту, которую он принимает при увеличении текста внутри div?
Ответ: mathsik, ну значит не вариант с увеличением, что я ещё могу сказать... Только абсолютное позиционирование и то с костылями...
Вопрос: Плавное изменение высоты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="elegant-top-rates">
 
    <div class="elegant-top-rate">
        <p class="rate-name">Start Up</p>
        <p class="rate-for-who">For beginners</p>
        <p class="rate-descr">More than what you have dreamed with</p>
    </div>
 
    <div class="elegant-top-rate">
        <p class="rate-name">Standard</p>
        <p class="rate-for-who">For beginners</p>
        <p class="rate-descr">More than what you have dreamed with</p>
    </div>
 
    <div class="elegant-top-rate">
        <p class="rate-name">Professional</p>
        <p class="rate-for-who">For smart people</p>
        <p class="rate-descr">More than what you have dreamed with</p>
    </div>
                    
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
* {
  margin: 0;
  padding: 0;
}
 
.elegant-top-rates {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex-flow: row wrap;
  margin-top: 77px;
}
 
.elegant-top-rates .elegant-top-rate {
  flex-basis: 300px;
  padding: 20px 30px 25px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  background: #fff;
}
 
.elegant-top-rates .elegant-top-rate p.rate-name {
  margin-bottom: 15px;
  color: #616161;
  font-size: 40px;
  letter-spacing: 2.5px;
  transition: 1s;
}
 
.elegant-top-rates .elegant-top-rate p.rate-for-who {
  color: #eb4f4e;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}
 
.elegant-top-rates .elegant-top-rate p.rate-descr {
  display: none;
  color: #232324;
  font-size: 20px;
  font-weight: 600;
}
 
.elegant-top-rates .elegant-top-rate:hover p.rate-name {
  color: #eb4f4e;
}
 
.elegant-top-rates .elegant-top-rate:hover p.rate-for-who {
  display: none;
}
 
.elegant-top-rates .elegant-top-rate:hover p.rate-descr {
  display: block;
}


Как сделать, чтобы при добавлении текста, при наведении, высота блока увеличивалась плавно?
Ответ: Нужно, чтобы высота увеличивалась плавно
Вопрос: Плавное увеличение и уменьшение изображения

Вечер добрый, есть такой код:

CSS
1
2
3
4
5
6
.entry-thumbnail:hover{
    transform: scale(1.1);
    overflow: hidden;
    filter: contrast(10%);
    transition: 2s;
}
Он плавно увеличивает изображение, но когда мышь убираешь, оно резко уменьшается.
Подскажите, как сделать, чтобы в обратную сторону было тоже плавно, а то не могу сформулировать запрос и загуглить
Ответ: Likabort, Если вы только в hover добавляете transition то оно срабатывает в момент наведения по этому и плавно, а т.к для основнго блока(без hover) transition не указан, то оно мгновенно возвращается.
Для примера
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.slow{
  transition:3s all ease-in;
}
.slow:hover{
  color:red;
}
 
.fast:hover{
  color:red;
  transition:3s;
  border:1px solid red;
}
HTML5
1
2
3
4
<div class="slow">Transition в основном блоке</div>
<br>
<br>
<div class="fast">Transition в hover</div>
Вопрос: Плавное заполнение текста цветом

Доброго времени суток, подскажите, пожалуйста, как реализовать анимацию заполнения текста цветом сверху вниз. Интересует например плавная смена цвета с белого на синий, но только не проявлением, а, как бы, выездом синего цвета сверху.
Ответ:
Сообщение от ReSone
плавная смена цвета с белого на синий, но только не проявлением, а, как бы, выездом синего цвета сверху
Если с использованием JS, то например так:
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>https://jsfiddle.net/1j82sdoq/3/</title>
        <style type="text/css">
            body { background-color: #aaa; }
            .slider-color { font-size: 64px; font-weight: bold; position: relative; }
            .slider-color > span { position: absolute; }
 
            .color1 {
                color: white;
            }
            .color2 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <b>Плавное заполнение текста цветом:</b>
        <div class="slider-color">
            <span class="color1">Slider Color</span>
        </div>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script language="javascript">
            $(function() {
                var sliderReplaceClass = 'color2'; // второй цвет
                var $sliderColor = $('.slider-color'); // селектор для анимации текста
                var sliderDuration = 3000; // продолжительность анимации в мс
                
                var childrenTagName = $sliderColor.children().prop("tagName");
                var initialClass = $sliderColor.children().attr('class');
                
                $('<div/>').css('background-color', getBackground($sliderColor.children()))
                           .css('width', '100%')
                           .css('position', 'absolute')
                           .css('z-index', '1')
                           .css('height', 0)
                           .appendTo($sliderColor);
                var heightDivpx = $sliderColor.css('font-size');
                var heightDiv = heightDivpx.substr(0, heightDivpx.length-2);
                heightDiv = heightDiv * 1.15;
                $sliderColor.children('div').animate({ height: heightDiv + 'px' }, sliderDuration);
                
                $sliderColor.children(childrenTagName).clone()
                            .toggleClass(initialClass + ' ' + sliderReplaceClass)
                            .css('z-index', '2')
                            .hide()
                            .appendTo($sliderColor);
                
                $sliderColor.children(childrenTagName).last().slideDown(sliderDuration, function() {
                    $(this).parent().find('.' + initialClass).remove();
                });
            });
 
            function getBackground(jqueryElement) {
                var color = jqueryElement.css("background-color");
                if (color !== 'rgba(0, 0, 0, 0)') 
                    return color;
                if (jqueryElement.is("body"))
                    return false;
                else
                    return getBackground(jqueryElement.parent());
            }
        </script>
    </body>
</html>