File size: 3,969 Bytes
f13cb95 541ed25 f13cb95 541ed25 f13cb95 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
document.addEventListener('DOMContentLoaded', function() {
// Animate timeline items on scroll
const timelineItems = document.querySelectorAll('.timeline-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
timelineItems.forEach(item => {
observer.observe(item);
});
// Download as PNG
document.getElementById('downloadPng').addEventListener('click', function() {
const container = document.getElementById('timeline-container');
html2canvas(container, {
scale: 2,
backgroundColor: '#F9FAFB',
logging: false,
useCORS: true
}).then(canvas => {
const link = document.createElement('a');
link.download = 'huggingface-timeline.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
});
// Generate GIF
document.getElementById('generateGif').addEventListener('click', function() {
const preview = document.getElementById('gif-preview');
const gifResult = document.getElementById('gif-result');
const downloadGif = document.getElementById('downloadGif');
const button = this;
button.disabled = true;
button.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...';
feather.replace();
// Initialize GIF.js
const gif = new GIF({
workers: 2,
quality: 10,
width: 1200,
height: 500,
workerScript: 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js'
});
// Capture frames for the GIF
const timelineContainer = document.getElementById('timeline-container');
const items = timelineContainer.querySelectorAll('.timeline-item');
// Reset animation
items.forEach(item => item.classList.remove('visible'));
// Capture each frame as items appear
items.forEach((item, index) => {
setTimeout(() => {
item.classList.add('visible');
setTimeout(() => {
html2canvas(timelineContainer, {
scale: 1,
backgroundColor: '#F9FAFB',
logging: false,
useCORS: true
}).then(canvas => {
gif.addFrame(canvas, {delay: 500});
// If last frame, render the GIF
if (index === items.length - 1) {
gif.on('finished', function(blob) {
const url = URL.createObjectURL(blob);
gifResult.src = url;
preview.classList.remove('hidden');
downloadGif.onclick = function() {
const a = document.createElement('a');
a.href = url;
a.download = 'huggingface-timeline.gif';
a.click();
};
button.disabled = false;
button.innerHTML = '<i data-feather="film" class="mr-2"></i> Generate GIF';
feather.replace();
});
gif.render();
}
});
}, 600); // Wait for animation to complete
}, index * 1000);
});
});
}); |