Prijs doorhalen New
On a sale price an orange line strikes through the old price, which turns grey, after which the new price slides up and the amount saved appears. Plays once when the card enters the viewport. For webshops and offers; screen readers hear "old price" and "now" instead of just a strikethrough.
Eetkamerstoel Vik, massief eiken
Oude prijs € 229
Nu € 179
U bespaart € 50
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Prijs doorhalen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pdh">
<div class="pdh__kaart">
<img class="pdh__img" src="https://neddev.com/lab-media/prijs-doorhalen-1.webp" alt="Eiken eetkamerstoel met een okergele plaid over de leuning" width="360" height="360" loading="lazy">
<div class="pdh__info">
<h3 class="pdh__naam">Eetkamerstoel Vik, massief eiken</h3>
<p class="pdh__meta">Op voorraad in Utrecht, morgen in huis</p>
<p class="pdh__prijzen">
<s class="pdh__oud"><span class="pdh__sr">Oude prijs </span>€ 229</s>
<span class="pdh__nieuw"><span class="pdh__sr">Nu </span>€ 179</span>
</p>
<p class="pdh__bespaar">U bespaart € 50</p>
<button class="pdh__knop" type="button">Opnieuw afspelen</button>
</div>
</div>
</div>
</div>/* Prijs doorhalen · NedDev · eigen werk. */
.pdh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left}
.pdh__kaart{display:flex;gap:14px;width:100%;max-width:380px;padding:10px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.pdh__img{flex:none;width:42%;max-width:150px;aspect-ratio:1;height:auto;object-fit:cover;border-radius:4px;background:#efedea}
.pdh__info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:2px}
.pdh__naam{margin:0;font-size:14px;font-weight:600;line-height:1.25}
.pdh__meta{margin:4px 0 0;font-size:12px;line-height:1.35;color:#5b5b5b}
.pdh__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pdh__prijzen{display:flex;align-items:baseline;gap:10px;margin:10px 0 0;font-variant-numeric:tabular-nums}
.pdh__oud{position:relative;text-decoration:none;font-size:16px;font-weight:600;color:#0a0a0a;transition:color .3s ease .45s,font-size .3s ease .45s}
.pdh__oud::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:#F5480F;transform:scaleX(0) rotate(-6deg);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.pdh__nieuw{font-size:24px;font-weight:700;letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity .35s ease .6s,transform .45s cubic-bezier(.2,.8,.2,1) .6s}
.pdh__bespaar{margin:6px 0 0;padding:3px 7px;border-radius:4px;background:#F5480F;color:#0a0a0a;font-size:12px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s ease .95s,transform .3s ease .95s}
.pdh.is-af .pdh__oud{color:#6b6b6b;font-size:13px}
.pdh.is-af .pdh__oud::after{transform:scaleX(1) rotate(-6deg)}
.pdh.is-af .pdh__nieuw,.pdh.is-af .pdh__bespaar{opacity:1;transform:none}
.pdh.is-reset *,.pdh.is-reset *::after{transition:none!important}
.pdh__knop{margin-top:auto;min-height:28px;padding:5px 9px;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.pdh__knop:hover{border-color:#0a0a0a}
.pdh__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (max-width:420px){.pdh__kaart{gap:10px}.pdh__img{width:38%}}
@media (prefers-reduced-motion:reduce){.pdh *,.pdh *::after{transition:none!important}.pdh__knop{display:none}}// Prijs doorhalen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.pdh'); if (!w) return;
const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (rm) { w.classList.add('is-af'); return; }
let t = 0;
const speel = () => {
w.classList.add('is-reset'); w.classList.remove('is-af'); void w.offsetWidth; w.classList.remove('is-reset');
clearTimeout(t); t = setTimeout(() => w.classList.add('is-af'), 300);
};
if ('IntersectionObserver' in window) {
const io = new IntersectionObserver(e => { if (e[0].isIntersecting) { speel(); io.disconnect(); } }, { threshold: .5 });
io.observe(w);
} else w.classList.add('is-af');
w.querySelector('.pdh__knop').addEventListener('click', speel);
}
init(document.querySelector('.jouw-container'));More text animations
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →