<ul class="bux-factoid bux-animate--reveal-group" data-stagger-step="200" data-stagger-start="0">
<li class="bux-factoid__item">
<span class="bux-factoid__stat bux-animate--reveal">
200+
</span>
<span class="bux-factoid__text">
lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</li>
<li class="bux-factoid__item">
<span class="bux-factoid__stat bux-animate--reveal">
#1
</span>
<span class="bux-factoid__text">
lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</li>
<li class="bux-factoid__item">
<span class="bux-factoid__stat bux-animate--reveal">
9<sup>th</sup>
</span>
<span class="bux-factoid__text">
lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</li>
</ul>
{#
Factoid
Available variables:
- items: Array containing the factoid list items.
- item.stat: Statistic for the item.
- item.text: Descriptive text for the item.
- animate: Set to true to enable animations.
#}
<ul class="bux-factoid {% if animate %}bux-animate--reveal-group{% endif %}"
{%- if animate -%}
data-stagger-step="200" data-stagger-start="0"
{%- endif -%}
>
{% for item in items %}
<li class="bux-factoid__item">
<span class="bux-factoid__stat {% if animate %}bux-animate--reveal{% endif %}">
{{ item.stat }}
</span>
<span class="bux-factoid__text">
{{ item.text }}
</span>
</li>
{% endfor %}
</ul>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
animate: true
items:
- stat: 200+
text: lorem ipsum dolor sit amet, consectetur adipiscing elit
- stat: '#1'
text: lorem ipsum dolor sit amet, consectetur adipiscing elit
- stat: 9<sup>th</sup>
text: lorem ipsum dolor sit amet, consectetur adipiscing elit
.bux-factoid {
@include breakpoint(lg) {
display: flex;
}
}
.bux-factoid__item {
padding: $sp-12 $sp-16;
display: block;
&:last-child {
border-right: none;
}
@include breakpoint(lg) {
border-right: 2px solid $gray-light-60;
padding: 0 $sp-16;
flex: 1 1 0;
}
}
.bux-factoid__stat {
display: block;
color: $scarlet;
font-family: $sans;
font-size: $ts-xxl;
font-weight: 900;
line-height: 4.125rem;
text-align: center;
@include breakpoint(lg) {
font-size: rem-calc(70);
line-height: 6rem;
}
sup {
font-size: 2.5rem;
line-height: 1;
}
}
.bux-factoid__text {
display: block;
color: $gray-dark-80;
font-family: $sans;
font-size: 1.125rem;
font-weight: 400;
line-height: rem-calc(24);
text-align: center;
@include breakpoint(lg) {
font-size: $ts-22;
line-height: rem-calc(28);
}
}
// Assign incremental delays per group, then reveal on entry
(function () {
const groups = document.querySelectorAll('.bux-animate--reveal-group');
groups.forEach(group => {
const step = Number(group.dataset.staggerStep || 100); // ms between items
const start = Number(group.dataset.staggerStart || 0); // initial delay
group.querySelectorAll('.bux-animate--reveal').forEach((el, i) => {
el.style.setProperty('--stagger', `${start + i * step}ms`);
});
});
const items = document.querySelectorAll('.bux-animate--reveal');
if (!('IntersectionObserver' in window)) {
items.forEach(el => el.classList.add('bux-animate--is-visible'));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (isIntersecting) {
target.classList.add('bux-animate--is-visible');
io.unobserve(target); // animate once
}
});
}, { root: null, rootMargin: '0px 0px -10% 0px', threshold: 0.1 });
items.forEach(el => io.observe(el));
})();
No notes defined.