Гмстограмма с анимацией
Здравствуйте!
Пытаюсь вытащить из работающего сайта на 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"... Где ошибка? ( |
easing Ключевое слово (строка), которое определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
|
да, я сейчас добавил
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> заработала только первая диаграма из четырех... и анимации линии даже на ней нет (но это я возможно с scc "недотумкал") |
Igorsrt,
К какому/каким объектам вы применяете анимацию?
jQuery({countNum: 0}).animate(
|
Цитата:
|
Цитата:
.skill-line div{display:inline-block;font-size:0;line-height:1;height:10px;width : 0;} |
Цитата:
self.showLine(queue, true); |
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>
|
Цитата:
|
Еще один вопрос возник: Как заставить анимацию этой диаграммы срабатывать при прокрутке страницы (она у меня оказалась ниже первого экрана)?
|
| Часовой пояс GMT +3, время: 04:34. |