| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-sf-wrapper').forEach(function (wrapper) { |
| 5 |
var grid = wrapper.querySelector('.bkbg-sf-grid'); |
| 6 |
if (!grid) return; |
| 7 |
|
| 8 |
/* Responsive columns from data attrs */ |
| 9 |
var colsTablet = grid.getAttribute('data-cols-tablet') || '2'; |
| 10 |
var colsMobile = grid.getAttribute('data-cols-mobile') || '1'; |
| 11 |
|
| 12 |
var styleEl = document.createElement('style'); |
| 13 |
styleEl.textContent = [ |
| 14 |
'@media(max-width:900px){.bkbg-sf-grid[data-cols-tablet="' + colsTablet + '"]{grid-template-columns:repeat(' + colsTablet + ',1fr)}}', |
| 15 |
'@media(max-width:600px){.bkbg-sf-grid[data-cols-mobile="' + colsMobile + '"]{grid-template-columns:repeat(' + colsMobile + ',1fr)}}', |
| 16 |
].join(''); |
| 17 |
document.head.appendChild(styleEl); |
| 18 |
|
| 19 |
/* Staggered entrance animation */ |
| 20 |
var cards = grid.querySelectorAll('.bkbg-sf-card'); |
| 21 |
if (!cards.length || !('IntersectionObserver' in window)) return; |
| 22 |
|
| 23 |
cards.forEach(function (card) { |
| 24 |
card.style.opacity = '0'; |
| 25 |
card.style.transform = 'translateY(18px)'; |
| 26 |
card.style.transition = 'opacity 0.48s ease, transform 0.48s ease'; |
| 27 |
}); |
| 28 |
|
| 29 |
var io = new IntersectionObserver(function (entries) { |
| 30 |
entries.forEach(function (entry) { |
| 31 |
if (!entry.isIntersecting) return; |
| 32 |
var card = entry.target; |
| 33 |
var idx = Array.prototype.indexOf.call(cards, card); |
| 34 |
setTimeout(function () { |
| 35 |
card.style.opacity = '1'; |
| 36 |
card.style.transform = 'translateY(0)'; |
| 37 |
}, idx * 70); |
| 38 |
io.unobserve(card); |
| 39 |
}); |
| 40 |
}, { threshold: 0.12 }); |
| 41 |
|
| 42 |
cards.forEach(function (card) { io.observe(card); }); |
| 43 |
}); |
| 44 |
})(); |
| 45 |
|
