Skip to content

Added Counter Along with Animation #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 14, 2018
Merged

Added Counter Along with Animation #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56553b2
Added Counter
im-gozmit Jun 13, 2018
edeaad6
Counter Added with animation
im-gozmit Jun 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3998,4 +3998,38 @@
padding: 0;
}

}
}


/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper1 { width: 1480px; margin: 50px auto; position: relative;}
.counter { background-color: cadetblue; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
99 changes: 99 additions & 0 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,105 @@

$banner
._parallax();
//counter
(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);
}
});

});

Expand Down
32 changes: 29 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h2>How it Works</h2>
<header>
<h2>About Us</h2>
<p>Well, it’s been long that we have been spreading the word “Open Source” across the globe but now it’s time to put are saying on Actions. So, we are currently running up an Organisation named as “FOSSWORLD” after interacting with lots of people including potential contributors around the world. It is a non-profit organisation that helps to bring amazing people together to create, develop, design and make things with Open Technologies and share work for the benefit of all.</p>
</header>
</header></div>
</section>

<!-- Projects -->
Expand All @@ -97,9 +97,35 @@ <h3>Contributor Tracker</h3>
</footer>
</div>
</section>
<!-- Counter -->
<section id="counter" class="wrapper1 style1 special fade-up">
<div class="wrapper1">
<div class="counter col_fourth">
<i class="fa fa-code fa-2x"></i>
<h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
<p class="count-text ">SomeText GoesHere</p>
</div>

<div class="counter col_fourth">
<i class="fa fa-coffee fa-2x"></i>
<h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
<p class="count-text ">SomeText GoesHere</p>
</div>


<div class="counter col_fourth">
<i class="fa fa-lightbulb-o fa-2x"></i>
<h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
<p class="count-text ">SomeText GoesHere</p>
</div>

<div class="counter col_fourth end">
<i class="fa fa-bug fa-2x"></i>
<h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
<p class="count-text ">SomeText GoesHere</p>
</div>
</div>
</section>
<div></div>

<!-- Footer -->
<footer id="footer">
Expand All @@ -114,7 +140,7 @@ <h3>Contributor Tracker</h3>
</ul>
</footer>

</div>
</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
Expand Down