Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Codepen Not Working (Preprocessors causing it?)


kppsean

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

Use HTML


<section class="counters">
  <h3 class="counter" aria-label="$65.3M">$65.3M</h3>
  <h3 class="counter" aria-label="872K">872K</h3>
  <h3 class="counter" aria-label="$491">$491</h3>
  <h3 class="counter" aria-label="9875">9875</h3>
</section>

CSS

@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,700&display=swap");
html {
  display: -webkit-box;
  display: flex;
  min-height: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  box-sizing: border-box;
}
html * {
  font-family: inherit;
}
html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 50px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(transparent)), -webkit-gradient(linear, right bottom, left top, from(lime), to(transparent)), -webkit-gradient(linear, left bottom, right top, from(blue), to(transparent));
  background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: screen;
}

.counters {
  display: -webkit-box;
  display: flex;
  background: rgba(255, 255, 255, 0.75);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.counter {
  letter-spacing: 0.125rem;
  line-height: 1;
  position: relative;
  display: -webkit-box;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
          align-items: center;
  height: 3.125rem;
  font-size: 3.125rem;
  margin: 0 1.25rem;
  font-weight: 400;
}
.counter > span {
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 100%;
  -webkit-transition: -webkit-transform 2s ease;
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  line-height: 1;
}
.counter > span span {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  height: 100%;
}
.counter:nth-child(1) > span {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.counter:nth-child(2) > span {
  -webkit-transition-delay: 0.375s;
          transition-delay: 0.375s;
}
.counter:nth-child(3) > span {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.counter:nth-child(4) > span {
  -webkit-transition-delay: 1.125s;
          transition-delay: 1.125s;
}
.counter:nth-child(5) > span {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.counter:nth-child(6) > span {
  -webkit-transition-delay: 1.875s;
          transition-delay: 1.875s;
}
.counter:nth-child(7) > span {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.counter:nth-child(8) > span {
  -webkit-transition-delay: 2.625s;
          transition-delay: 2.625s;
}
.counter:nth-child(9) > span {
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}
.counter:nth-child(10) > span {
  -webkit-transition-delay: 3.375s;
          transition-delay: 3.375s;
}
.counter:nth-child(11) > span {
  -webkit-transition-delay: 3.75s;
          transition-delay: 3.75s;
}
.counter:nth-child(12) > span {
  -webkit-transition-delay: 4.125s;
          transition-delay: 4.125s;
}
.counter:nth-child(13) > span {
  -webkit-transition-delay: 4.5s;
          transition-delay: 4.5s;
}
.counter:nth-child(14) > span {
  -webkit-transition-delay: 4.875s;
          transition-delay: 4.875s;
}
.counter:nth-child(15) > span {
  -webkit-transition-delay: 5.25s;
          transition-delay: 5.25s;
}
.counter:nth-child(16) > span {
  -webkit-transition-delay: 5.625s;
          transition-delay: 5.625s;
}
.counter:nth-child(17) > span {
  -webkit-transition-delay: 6s;
          transition-delay: 6s;
}
.counter:nth-child(18) > span {
  -webkit-transition-delay: 6.375s;
          transition-delay: 6.375s;
}
.counter:nth-child(19) > span {
  -webkit-transition-delay: 6.75s;
          transition-delay: 6.75s;
}
.counter:nth-child(20) > span {
  -webkit-transition-delay: 7.125s;
          transition-delay: 7.125s;
}

.counter:nth-child(1) {
  color: #EF8354;
}

.counter:nth-child(2) {
  color: #0EB1D2;
}

.counter:nth-child(3) {
  color: #2D3142;
}

.counter:nth-child(4) {
  color: #698F3F;
}

JavaScript

<script>
  const stats = document.querySelectorAll(".counter");

stats.forEach(stat => {
	// pattern used to seperate input number from html into an array of numbers and non numbers. EX $65.3M -> ["$65.3M", "$", "65", ".", "3", "M"]
	const patt = /(\D+)?(\d+)(\D+)?(\d+)?(\D+)?/;
	const time = 1000;
	let result = [...patt.exec(stat.textContent)];
	let fresh = true;
	let ticks;

	// Remove first full match from result array (we dont need the full match, just the individual match groups).
	result.shift();
	// Remove undefined values from result array where they didnt have a match in one of the optional regex groups
	result = result.filter(res => res != null);

	while (stat.firstChild) {
		stat.removeChild(stat.firstChild);
	}

	for (let res of result) {
		if (isNaN(res)) {
			stat.insertAdjacentHTML("beforeend", `<span>${res}</span>`);
		} else {
			for (let i = 0; i < res.length; i++) {
				stat.insertAdjacentHTML(
					"beforeend",
					`<span data-value="${res[i]}">
						<span>&ndash;</span>
						${Array(parseInt(res[i]) + 1)
							.join(0)
							.split(0)
							.map(
								(x, j) => `
							<span>${j}</span>
						`
							)
							.join("")}
					</span>`
				);
			}
		}
	}

	ticks = [...stat.querySelectorAll("span[data-value]")];

	let activate = () => {
		let top = stat.getBoundingClientRect().top;
		let offset = window.innerHeight * 3 / 4;

		setTimeout(() => {
			fresh = false;
		}, time);

		if (top < offset) {
			setTimeout(() => {
				for (let tick of ticks) {
					let dist = parseInt(tick.getAttribute("data-value")) + 1;
					tick.style.transform = `translateY(-${dist * 100}%)`;
				}
			}, fresh ? time : 0);
			window.removeEventListener("scroll", activate);
		}
	};
	window.addEventListener("scroll", activate);
	activate();
});

</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...