Javascript.RU

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

Гмстограмма с анимацией
Здравствуйте!
Пытаюсь вытащить из работающего сайта на wordpress блок с горизонтальной диаграммой:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>		
		<style>
.digram-line-box {    background-color: #f4f6f7;}
.diagram-wrapper.style-1 .digram-line-box .skill-line {margin-right: 0px;}
.diagram-wrapper.style-1 .digram-line-box  .skill-amount  {margin-top: -30px;}
.diagram-wrapper.style-1 .digram-line-box .skill-element {padding-top: 14px;}
.diagram-item{margin-bottom:1.421em}
.skill-element+.skill-element{margin:8px 0 0 0}
.skill-title{font-size:89.5%;line-height:1.421;margin:0 0 5px 0}
.skill-amount{float:right;font-size:126.3%;margin-top:-11px}
.skill-line{font-size:0;line-height:1;height:10px;margin-right:55px}
.skill-line div{display:inline-block;font-size:0;line-height:1;height:10px}
.skill-line div.animation{-moz-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);transition:width 1.6s cubic-bezier(0.165,0.84,0.44,1)}
.diagram-summary{font-size:89.5%;line-height:1.471;margin:0 0 0.766667em 0}
.widget .diagram-summary{font-size:100%}
.diagram-summary-text{margin:0 0 0.766667em 0}
		</style>	
	</head>
	<body>
<div class="diagram-item">
	<div class="diagram-wrapper style-1">
		<div class="" >
			<div class="digram-line-box " >
				<div class="skill-element">
					<div class="skill-title">Оптимизация </div>
					<div class="clearfix">
						<div style="color:#464c5c" class="skill-amount">0%</div>
						<div class="skill-line">
							<div data-amount="98" style="background: #464c5c;"></div>
						</div>
					</div>
				</div>
				<div class="skill-element">
					<div class="skill-title">Кроссплатформенность </div>
					<div class="clearfix">
						<div style="color:#6d747a" class="skill-amount">0%</div>
						<div class="skill-line">
							<div data-amount="100" style="background: #6d747a;">
							</div>
						</div>
					</div>
				</div>
				<div class="skill-element">
					<div class="skill-title">Удобство </div>
					<div class="clearfix">
						<div style="color:#8c8274" class="skill-amount">0%</div>
						<div class="skill-line">
							<div data-amount="99" style="background: #8c8274;">
							</div>
						</div>
					</div>
				</div>
				<div class="skill-element">
					<div class="skill-title">Дизайн </div>
					<div class="clearfix">
						<div style="color:#d2c6b4" class="skill-amount">0%</div>
						<div class="skill-line">
							<div data-amount="99" style="background: #d2c6b4;">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
(function($) {
	var prefixes = 'Webkit Moz ms Ms O'.split(' ');
    var docElemStyle = document.documentElement.style;

    function getStyleProperty( propName ) {
        if ( !propName ) {
            return;
        }

        // test standard property first
        if ( typeof docElemStyle[ propName ] === 'string' ) {
            return propName;
        }

        // capitalize
        propName = propName.charAt(0).toUpperCase() + propName.slice(1);

        // test vendor specific properties
        var prefixed;
        for ( var i=0, len = prefixes.length; i < len; i++ ) {
            prefixed = prefixes[i] + propName;
            if ( typeof docElemStyle[ prefixed ] === 'string' ) {
                return prefixed;
            }
        }
    }

    var transitionProperty = getStyleProperty('transition');
    var transitionEndEvent = {
        WebkitTransition: 'webkitTransitionEnd',
        MozTransition: 'transitionend',
        OTransition: 'otransitionend',
        transition: 'transitionend'
    }[ transitionProperty ];

	function LineDiagram(element) {
		this.el = element;
		this.$el = jQuery(element);
		this.start();
	}

	LineDiagram.prototype = {
		start: function() {
			if (!this.$el.hasClass('digram-line-box')) return;
			this.initTimer();
			var diagram_lines_queue = [];
			jQuery('.skill-element', this.$el).each(function () {
				diagram_lines_queue.push(jQuery(this));
			});
			this.showLine(diagram_lines_queue, true);
		},

		showLine: function(queue, first) {
			var self = this,
				$skill = queue.shift();

			if ($skill == null || $skill == undefined) {
				return;
			}

			function thegem_show_digram_line_animation() {
				var $progress = $('.skill-line div', $skill),
					$skillAmount = $('.skill-amount', $skill),
					amount = parseFloat($progress.data('amount'));

				$progress.addClass('animation').css('width', amount + '%');
				jQuery({countNum: 0}).animate({countNum: amount}, {
					duration: 1600,
					easing:'easeOutQuart',
					step: function() {
						var count = parseFloat(this.countNum);
						var pct = Math.ceil(count) + '%';
						$skillAmount.html(pct);
					}
				});
				self.showLine(queue, false);
			}

			if (first) {
				thegem_show_digram_line_animation();
			} else {
				this.startTimer(thegem_show_digram_line_animation);
			}
		},

		initTimer: function() {
			var self = this;

			this.timer = this.$el.data('timer');
			this.timerCallback = function() {};
			$(this.timer).bind(transitionEndEvent, function(event) {
				self.timerCallback();
			});
		},

		startTimer: function(callback) {
			var self = this;
			this.timerCallback = callback;
			if (this.timer.className.indexOf('start-timer') != -1) {
				this.timer.className = this.timer.className.replace(' start-timer', '');
			} else {
				this.timer.className += ' start-timer';
			}
		}
	};

	jQuery.fn.thegem_start_line_digram = function() {
		return new LineDiagram(this.get(0));
	}
})(jQuery);

function thegem_show_diagram_line_mobile($box) {
	jQuery('.skill-element', $box).each(function () {
		jQuery('.skill-line div', this).width(jQuery('.skill-line div', this).data('amount') + '%');
	});
}

function thegem_start_line_digram(element) {
	jQuery(element).thegem_start_line_digram();
}

jQuery('.digram-line-box').each(function () {
	var self = this;

	var timer = document.createElement('div');
	timer.className = 'diagram-line-timer-element';
	document.body.appendChild(timer);
	timer.className += ' start-timer';
	jQuery(this).data('timer', timer);

	//jQuery('.skill-element .skill-amount', this).html('0%');

	jQuery(document).ready(function() {
		if (!jQuery(self).hasClass('lazy-loading-item') || window.gemSettings.lasyDisabled)
			jQuery(self).thegem_start_line_digram();
	});
});	
</script>	
	</body>
</html>

Но что-то не получается... в консоле вижу ошибку "Uncaught TypeError: jQuery.easing[this.easing] is not a function"... Где ошибка? (
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2018, 16:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

easing Ключевое слово (строка), которое определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2018, 16:43
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

По умолчанию в jquery нет такой функции 'easeOutQuart', там встроены только 'swing' и 'linear', остальные добавляются плагином jquery-ui.
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2018, 16:49
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

да, я сейчас добавил
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

заработала только первая диаграма из четырех... и анимации линии даже на ней нет (но это я возможно с scc "недотумкал")
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2018, 17:14
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Igorsrt,
К какому/каким объектам вы применяете анимацию?
jQuery({countNum: 0}).animate(
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2018, 22:11
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от Dilettante_Pro Посмотреть сообщение
Igorsrt,
К какому/каким объектам вы применяете анимацию?
jQuery({countNum: 0}).animate(
Затрудняюсь ответить, в js так толком не разобрался пока (
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2018, 22:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Igorsrt
и анимации линии даже на ней нет
добавить от чего плясать
.skill-line div{display:inline-block;font-size:0;line-height:1;height:10px;width : 0;}
Ответить с цитированием
  #8 (permalink)  
Старый 14.09.2018, 22:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Igorsrt
заработала только первая диаграма из четырех
строка 150
self.showLine(queue, true);
Ответить с цитированием
  #9 (permalink)  
Старый 14.09.2018, 22:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
и того
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>
   jQuery.easing.easeOutQuart =  function(x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b
    }
 </script>

        <style>
.digram-line-box {    background-color: #f4f6f7;}
.diagram-wrapper.style-1 .digram-line-box .skill-line {margin-right: 0px;}
.diagram-wrapper.style-1 .digram-line-box  .skill-amount  {margin-top: -30px;}
.diagram-wrapper.style-1 .digram-line-box .skill-element {padding-top: 14px;}
.diagram-item{margin-bottom:1.421em}
.skill-element+.skill-element{margin:8px 0 0 0}
.skill-title{font-size:89.5%;line-height:1.421;margin:0 0 5px 0}
.skill-amount{float:right;font-size:126.3%;margin-top:-11px}
.skill-line{font-size:0;line-height:1;height:10px;margin-right:55px}
.skill-line div{display:inline-block;font-size:0;line-height:1;height:10px;width : 0;}
.skill-line div.animation{-moz-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition:width 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);transition:width 1.6s cubic-bezier(0.165,0.84,0.44,1)}
.diagram-summary{font-size:89.5%;line-height:1.471;margin:0 0 0.766667em 0}
.widget .diagram-summary{font-size:100%}
.diagram-summary-text{margin:0 0 0.766667em 0}
        </style>
    </head>
    <body>
<div class="diagram-item">
    <div class="diagram-wrapper style-1">
        <div class="" >
            <div class="digram-line-box " >
                <div class="skill-element">
                    <div class="skill-title">Оптимизация </div>
                    <div class="clearfix">
                        <div style="color:#464c5c" class="skill-amount">0%</div>
                        <div class="skill-line">
                            <div data-amount="98" style="background: #464c5c;"></div>
                        </div>
                    </div>
                </div>
                <div class="skill-element">
                    <div class="skill-title">Кроссплатформенность </div>
                    <div class="clearfix">
                        <div style="color:#6d747a" class="skill-amount">0%</div>
                        <div class="skill-line">
                            <div data-amount="100" style="background: #6d747a;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="skill-element">
                    <div class="skill-title">Удобство </div>
                    <div class="clearfix">
                        <div style="color:#8c8274" class="skill-amount">0%</div>
                        <div class="skill-line">
                            <div data-amount="99" style="background: #8c8274;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="skill-element">
                    <div class="skill-title">Дизайн </div>
                    <div class="clearfix">
                        <div style="color:#d2c6b4" class="skill-amount">0%</div>
                        <div class="skill-line">
                            <div data-amount="99" style="background: #d2c6b4;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function($) {
    var prefixes = 'Webkit Moz ms Ms O'.split(' ');
    var docElemStyle = document.documentElement.style;

    function getStyleProperty( propName ) {
        if ( !propName ) {
            return;
        }

        // test standard property first
        if ( typeof docElemStyle[ propName ] === 'string' ) {
            return propName;
        }

        // capitalize
        propName = propName.charAt(0).toUpperCase() + propName.slice(1);

        // test vendor specific properties
        var prefixed;
        for ( var i=0, len = prefixes.length; i < len; i++ ) {
            prefixed = prefixes[i] + propName;
            if ( typeof docElemStyle[ prefixed ] === 'string' ) {
                return prefixed;
            }
        }
    }

    var transitionProperty = getStyleProperty('transition');
    var transitionEndEvent = {
        WebkitTransition: 'webkitTransitionEnd',
        MozTransition: 'transitionend',
        OTransition: 'otransitionend',
        transition: 'transitionend'
    }[ transitionProperty ];

    function LineDiagram(element) {
        this.el = element;
        this.$el = jQuery(element);
        this.start();
    }

    LineDiagram.prototype = {
        start: function() {
            if (!this.$el.hasClass('digram-line-box')) return;
            this.initTimer();
            var diagram_lines_queue = [];
            jQuery('.skill-element', this.$el).each(function () {
                diagram_lines_queue.push(jQuery(this));
            });
            this.showLine(diagram_lines_queue, true);
        },

        showLine: function(queue, first) {
            var self = this,
                $skill = queue.shift();

            if ($skill == null || $skill == undefined) {
                return;
            }

            function thegem_show_digram_line_animation() {
                var $progress = $('.skill-line div', $skill),
                    $skillAmount = $('.skill-amount', $skill),
                    amount = parseFloat($progress.data('amount'));

                $progress.addClass('animation').css('width', amount + '%');
                jQuery({countNum: 0}).animate({countNum: amount}, {
                    duration: 1600,
                    easing:'easeOutQuart',
                    step: function() {
                        var count = parseFloat(this.countNum);
                        var pct = Math.ceil(count) + '%';
                        $skillAmount.html(pct);
                    }
                });
                self.showLine(queue, true);
            }

            if (first) {
                thegem_show_digram_line_animation();
            } else {
                this.startTimer(thegem_show_digram_line_animation);
            }
        },

        initTimer: function() {
            var self = this;

            this.timer = this.$el.data('timer');
            this.timerCallback = function() {};
            $(this.timer).bind(transitionEndEvent, function(event) {
                self.timerCallback();
            });
        },

        startTimer: function(callback) {
            var self = this;
            this.timerCallback = callback;
            if (this.timer.className.indexOf('start-timer') != -1) {
                this.timer.className = this.timer.className.replace(' start-timer', '');
            } else {
                this.timer.className += ' start-timer';
            }
        }
    };

    jQuery.fn.thegem_start_line_digram = function() {
        return new LineDiagram(this.get(0));
    }
})(jQuery);

function thegem_show_diagram_line_mobile($box) {
    jQuery('.skill-element', $box).each(function () {
        jQuery('.skill-line div', this).width(jQuery('.skill-line div', this).data('amount') + '%');
    });
}

function thegem_start_line_digram(element) {
    jQuery(element).thegem_start_line_digram();
}

jQuery('.digram-line-box').each(function () {
    var self = this;

    var timer = document.createElement('div');
    timer.className = 'diagram-line-timer-element';
    document.body.appendChild(timer);
    timer.className += ' start-timer';
    jQuery(this).data('timer', timer);

    //jQuery('.skill-element .skill-amount', this).html('0%');

    jQuery(document).ready(function() {
        if (!jQuery(self).hasClass('lazy-loading-item') || window.gemSettings.lasyDisabled)
            jQuery(self).thegem_start_line_digram();
    });
});
</script>
    </body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 14.09.2018, 22:52
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от рони Посмотреть сообщение
Igorsrt,
и того
Спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Циклический список с анимацией на сайте. 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