Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 16.09.2018, 13:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

анимация чисел в зоне видимости гистограмма jquery
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .meter {
      width: 100%;
      height: 8px;
      color: #fff ;
      text-align: center;
      margin: 30px 0;
      position: relative;
  }
  .meter:after {
      font-size: 18px;
      content: attr(data-max);
      color: #000;
      position: absolute;
      right: 5px;
      top: -20px;
  }
  .meter:before {
      font-size: 18px;
      content: attr(data-title);
      color: #000;
      position: absolute;
      left: 5px;
      top: -20px;
  }
  p {
      height: 2000px;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    jQuery.easing.easeOutQuart =  function(x, t, b, c, d) {
				return -c * (t /= d) * (t - 2) + b
			};
    var num = $(".meter");
    var duration = 1200;
    num.each(function(indx, el) {
        var max = $(el).data("max");
        var color = $(el).data("color");
        var visibility = checkViewport(el);
        $(el).on("animeNum", function() {
            $({
                n: 0
            }).animate({
                n: max
            }, {
                easing: "easeOutQuart",
                duration: duration,
                step: function(now, fx) {
                    now |= 0;
                    now += "%";
                    var gradient = "linear-gradient(to right, " + color + " , " + color + "  " + now + ", #FFFFFF " + now + ")";
                    $(el).attr("data-max", now).css({
                        "backgroundImage": gradient
                    })
                }
            })
        }).data("visibility", visibility);
        visibility && $(el).trigger("animeNum")
    });

    function checkViewport(elem) {
        var rect = elem.getBoundingClientRect();
        var y = rect.bottom / (innerHeight + rect.bottom - rect.top);
        var isInView = y > 0 && y < 1;
        return isInView
    }
    jQuery.fn.scrollComplete = function(fn, ms) {
        var timer = null;
        this.scroll(function() {
            if (timer) clearTimeout(timer);
            timer = setTimeout(fn, ms)
        })
    };
    $(window).scrollComplete(function() {
            num.each(function(indx, el) {
                var visibility = checkViewport(el);
                el = $(el);
                var old = el.data("visibility");
                old != visibility && el.data("visibility", visibility) && !old && el.trigger("animeNum")
            })
        },
        100)
});
  </script>
</head>

<body>
<p></p>
<div class="meter" data-max="98" data-title="Оптимизация" data-color="#464c5c"></div>
<div class="meter" data-max="100" data-title="Кроссплатформенность" data-color="#6d747a"></div>
<div class="meter" data-max="99" data-title="Удобство" data-color="#8c8274"></div>
<div class="meter" data-max="99" data-title="Дизайн" data-color="#d2c6b4"></div>
<p></p>
</body>
</html>
Ответить с цитированием
  #22 (permalink)  
Старый 16.09.2018, 15:12
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

рони,
мне в этом варианте не нравится, что скрипт с анимацией каждый раз заново запускается при прокрутке "вверх-вниз"...мне бы хотелось что бы один раз после попадания в зону видимости сработала анимация и все... или я может недопонимаю чего-то опять
Ответить с цитированием
  #23 (permalink)  
Старый 16.09.2018, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Igorsrt
один раз после попадания в зону видимости сработала анимация и все...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .meter {
      width: 100%;
      height: 8px;
      color: #fff ;
      text-align: center;
      margin: 30px 0;
      position: relative;
  }
  .meter:after {
      font-size: 18px;
      content: attr(data-max);
      color: #000;
      position: absolute;
      right: 5px;
      top: -20px;
  }
  .meter:before {
      font-size: 18px;
      content: attr(data-title);
      color: #000;
      position: absolute;
      left: 5px;
      top: -20px;
  }
  p {
      height: 2000px;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    jQuery.easing.easeOutQuart =  function(x, t, b, c, d) {
				return -c * (t /= d) * (t - 2) + b
			};
    var num = $(".meter");
    var duration = 1200;
    num.each(function(indx, el) {
        var max = $(el).data("max");
        var color = $(el).data("color");

        $(el).on("animeNum", function() {
            $({
                n: 0
            }).delay(indx * 200).animate({
                n: max
            }, {
                easing: "easeOutQuart",
                duration: duration,
                step: function(now, fx) {
                    now |= 0;
                    now += "%";
                    var gradient = "linear-gradient(to right, " + color + " , " + color + "  " + now + ", #FFFFFF " + now + ")";
                    $(el).attr("data-max", now).css({
                        "backgroundImage": gradient
                    })
                }
            })
        })

    });

    function checkViewport(elem) {
        var rect = elem.getBoundingClientRect();
        var y = rect.bottom / (innerHeight + rect.bottom - rect.top);
        var isInView = y > 0 && y < 1;
        return isInView
    }

    function visibility()
    {
      return $.makeArray(num).some(checkViewport)
    }

    visibility() ?  num.trigger("animeNum") :

    $(window).scroll(function anime() {
            visibility() &&  num.trigger("animeNum")  &&  $(window).off("scroll", anime)
        })
});
  </script>
</head>

<body>
<p></p>
<div class="meter" data-max="98" data-title="Оптимизация" data-color="#464c5c"></div>
<div class="meter" data-max="100" data-title="Кроссплатформенность" data-color="#6d747a"></div>
<div class="meter" data-max="99" data-title="Удобство" data-color="#8c8274"></div>
<div class="meter" data-max="99" data-title="Дизайн" data-color="#d2c6b4"></div>
<p></p>
</body>
</html>

Последний раз редактировалось рони, 16.09.2018 в 17:00.
Ответить с цитированием
  #24 (permalink)  
Старый 16.09.2018, 15:51
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

рони,
благодарю, именно так и хотел )
Ответить с цитированием
  #25 (permalink)  
Старый 16.09.2018, 16:38
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

рони,
блин, только я хочу еще что бы полоски с задержкой анимировались (т.е. первая полоска сразу, вторая через 0.2s, третья через 0.4s и т.д.)... в прошлом варианте я через css это смог сделать (transition-delay)... А здесь как?
Ответить с цитированием
  #26 (permalink)  
Старый 16.09.2018, 16:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Igorsrt
А здесь как?
строка 52
}).delay(indx * 200).animate({
Ответить с цитированием
  #27 (permalink)  
Старый 16.09.2018, 17:49
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

супер! спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Циклический список с анимацией на сайте. Shrederr Javascript под браузер 1 31.03.2018 19:56
Подскажите пожалуйста пример приложения с анимацией elly Общие вопросы Javascript 1 25.04.2015 09:18
Проблема с анимацией сдвига изображения по оси y Alyona97 Общие вопросы Javascript 3 13.01.2015 23:34
Проблема с анимацией flytracer jQuery 1 31.03.2012 02:20
Помогите оптимизировать скрипт смены изображений с анимацией Khmelevsky Элементы интерфейса 5 06.03.2010 19:02