76 lines
3.0 KiB
PHP
76 lines
3.0 KiB
PHP
<section class="overflow-hidden relative pt-4" id="brand-slider" aria-label="Teknologi yang digunakan">
|
|
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform" id="brand-track">
|
|
|
|
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://brandlogos.net/wp-content/uploads/2023/11/tailwind_css-logo_brandlogos.net_v91ni.png"
|
|
alt="Tailwind CSS" class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://raw.githubusercontent.com/livewire/livewire/main/art/readme_logo.png" alt="Livewire"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://raw.githubusercontent.com/livewire/livewire/main/art/readme_logo.png" alt="Livewire"
|
|
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
<img src="https://brandlogos.net/wp-content/uploads/2023/11/tailwind_css-logo_brandlogos.net_v91ni.png"
|
|
alt="Tailwind CSS" class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
#brand-slider img {
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#brand-slider img:hover {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const track = document.getElementById('brand-track');
|
|
const originalChildren = Array.from(track.children);
|
|
const originalHTML = track.innerHTML;
|
|
|
|
if (originalChildren.length === 0) return;
|
|
|
|
const itemWidth = originalChildren[0].offsetWidth;
|
|
const gapStyle = window.getComputedStyle(track).gap;
|
|
const gap = parseFloat(gapStyle) || 0;
|
|
|
|
const singleSetWidth = (itemWidth + gap) * originalChildren.length;
|
|
|
|
let currentWidth = singleSetWidth;
|
|
while (currentWidth < window.innerWidth + singleSetWidth * 2) {
|
|
track.innerHTML += originalHTML;
|
|
currentWidth += singleSetWidth;
|
|
}
|
|
|
|
let position = 0;
|
|
const speed = 1;
|
|
|
|
function animate() {
|
|
position -= speed;
|
|
|
|
if (Math.abs(position) >= singleSetWidth) {
|
|
position = 0;
|
|
}
|
|
|
|
track.style.transform = `translateX(${position}px)`;
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
});
|
|
</script>
|