0
scrool에 한 시작 : http://codepen.io/syedrafeeq/details/rcfsJ/번호 애니메이션은 내 웹 사이트에 다음과 같은 번호 애니메이션을 사용 아래
그러나 애니메이션이 특정 페이지 섹션에서 시작하지 않는다 그러나 나는이 페이지를 새로 고침 경우에만 시작됩니다. 방문자가 해당 페이지 섹션까지 아래로 스크롤하면 트리거를 실행하고 싶습니다.
어떻게하면됩니까?
JQuery와
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function() {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed/settings.refreshInterval),
increment = (settings.to - settings.from)/loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
내 HTML :
<section id="Four" class="wrapper style3">
<div class="inner">
<div class="container">
<div class="row">
<div class="two columns">
<i class="fa fa-truck fa-5x"></i>
<h3>A Fleet of</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
</div>
<p class="text-box">TRUCKS</p>
</div>
<div class="two columns">
<i class="fa fa-users fa-5x"></i>
<h3>Involving</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">EMPLOYEES</p>
</div>
<div class="two columns">
<i class="fa fa-cubes fa-5x"></i>
<h3>Loading</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
</div>
<p class="text-box">FTL LOADS IN 2016</p>
</div>
<div class="two columns">
<i class="fa fa-leaf fa-5x"></i>
<h3>Emissions</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
</div>
<p class="text-box">100% EURO 6</p>
</div>
<div class="two columns">
<i class="fa fa-compress fa-5x"></i>
<h3>Trailers</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
</div>
<p class="text-box">TRAILERS</p>
</div>
<div class="two columns">
<i class="fa fa-calendar fa-5x"></i>
<h3>Since</h3>
<div class="counter col_fourth">
<h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
</div>
<p class="text-box">25 YEARS OF SERVICE</p>
</div>
</div>
</section>
</div>
</div>
</section>**strong text**
죄송하지만 저는 자바에서 완전한 루키이며 HTML/CSS의 큰 전문가는 아닙니다. 필요한 절차를 자세히 자세히 설명해 주실 수 있습니까? – Pumizo
이것은 내가 시도한 것이며, 여러분이 제공 한 스크립트로 js 파일을 만들었고 카운터 자바 스크립트 코드를 넣었다. 그런 다음이 스크립트를 html 스크립트 섹션에 삽입했습니다. ' – Pumizo