A Pen by Kristy Sullivan

Thumbnail
This awesome code was written by ksullivan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ksullivan ©
  • HTML
  • CSS
  • JavaScript
    <div class="results">

<section class="intro">
  <header>
    <h4>Your Total Debt</h4>
    <h1 class="timer total-debt" id="count-number" data-to="100000" data-speed="1500"></h1>
  </header>
</section>

<section class="withfpu">
  <header>
    <h4>Debt payoff time without Financial Peace</h4>
    <h1>16 yrs</h1>
  </header>
  <div class="shape-1"></div>
</section>
  
</div>

/*Downloaded from https://www.codeseek.co/ksullivan/a-pen-by-kristy-sullivan-ZKKZVg */
    body {
  text-align: center;
}

.results {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 80%;
  overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 5em;
}
h4 {
  font-size: 1.5em;
}

.intro,
.withfpu {
  height: 800px;
  position: relative;
  text-align: center;
}
.intro {background-color: #eee;}
.withfpu {background-color:#ccc;}

header {
  //position: fixed;
  text-align: center;
  display: block;
}

.shape-1 {
  background-color: #000;
  height: 5em;
  width: 0;
  position: fixed;
  top: 150px;
  
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
}

.transform100 {
  width: 100%;
}

.total-debt::before {
  content:'$';
}


/*Downloaded from https://www.codeseek.co/ksullivan/a-pen-by-kristy-sullivan-ZKKZVg */
    $(function() {
    //caches a jQuery object containing the header element
    var header = $(".shape-1");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.removeClass('transform100').addClass("transform100");
        } else {
            header.removeClass("transform100").addClass('');
        }
    });
});


(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: 1500,           // 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);
  }
});



Comments