Learn to create a premium animated brochure using HTML, CSS & JavaScript. Interactive, mobile-ready layout with sleek UI. Ideal for modern web projects.
Table of Contents
Brochures are a powerful tool to showcase services, portfolios, or announcements. In today’s digital world, static pages won’t capture attention. A well-animated brochure using HTML, CSS, and JavaScript not only attracts but also retains users by offering a rich, interactive experience.
In this blog, we’ll guide you through creating a responsive, animated brochure template using advanced HTML structure, layered CSS animations, and interactive JavaScript logic. The design will be fluid, responsive, and visually stunning—ideal for professionals.
Prerequisites
To follow along, you should have:
- Basic to intermediate knowledge of HTML, CSS, and JavaScript
- A modern code editor like VS Code
- A browser for preview (Chrome recommended)
- Fonts/Icons (we’ll use Google Fonts and Lucide Icons)
- GSAP
Source Code
Step 1 (HTML Code):
We’ll begin with HTML. Here, we’ll create the basic layout of our brochure. We'll use Tailwind CSS for styling and layout, and integrate the GSAP plugin for smooth animations.
Paste the following code into your index.html file:
Step 2 (CSS Code):
After setting up the HTML, we now move to CSS. While Tailwind handles most of the design work, we’ll add custom CSS for animation control or finer details not covered by utility classes.
Paste the code below into your styles.css file:
:root {
--bg-dark: #0a0a0a;
--bg-light: #1a1a1a;
--text-primary: #f0f0f0;
--text-secondary: #a0a0a0;
--accent: #0abf53;
--accent-hover: #089942;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-dark);
color: var(--text-primary);
cursor: none;
}
.font-serif {
font-family: 'Playfair Display', serif;
}
/* Custom Cursor */
.cursor {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
pointer-events: none;
transition: transform 0.1s ease-out;
}
.cursor-dot {
width: 8px;
height: 8px;
background-color: var(--accent);
border-radius: 50%;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 2px solid var(--accent);
border-radius: 50%;
transform: translate(-16px, -16px);
transition: all 0.2s ease-out;
}
.cursor-outline.hovered {
transform: translate(-16px, -16px) scale(1.5);
background-color: rgba(10, 191, 83, 0.2);
}
.hero-bg-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
#particle-canvas {
width: 100%;
height: 100%;
background: linear-gradient(rgba(10, 10, 10, 0.7), var(--bg-dark)), url('https://images.unsplash.com/photo-1651336492616-4eebfdd995d7?q=80&w=2070&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hero-content {
position: relative;
z-index: 2;
}
.main-content {
position: relative;
z-index: 10;
background-color: var(--bg-dark);
}
.portfolio-image-wrapper {
overflow: hidden;
border-radius: 0.5rem;
}
.testimonial-card::before {
content: '“';
position: absolute;
top: 0;
left: 1rem;
font-size: 6rem;
color: #1f2937;
opacity: 0.5;
z-index: -10;
}
.gsap-reveal {
opacity: 0;
}
@media (pointer: coarse) {
.cursor {
display: none;
}
body {
cursor: auto;
}
} Step 3 (JavaScript Code):
This is our final step. We'll use JavaScript to write a few GSAP animation functions. These will animate the brochure when the page loads and when users scroll.
Paste the code below into your script.js file:
lucide.createIcons();
// --- Mobile Menu Toggle ---
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// --- Custom Cursor Logic ---
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
const magneticElements = document.querySelectorAll('.magnetic');
window.addEventListener('mousemove', e => {
const { clientX: x, clientY: y } = e;
gsap.to(cursorDot, { x, y, duration: 0.3, ease: 'power2.out' });
gsap.to(cursorOutline, { x, y, duration: 0.7, ease: 'power2.out' });
});
magneticElements.forEach(el => {
el.addEventListener('mousemove', (e) => {
cursorOutline.classList.add('hovered');
const rect = el.getBoundingClientRect();
gsap.to(el, {
x: (e.clientX - rect.left - rect.width / 2) * 0.3,
y: (e.clientY - rect.top - rect.height / 2) * 0.3,
duration: 0.5,
ease: 'power2.out'
});
});
el.addEventListener('mouseleave', () => {
cursorOutline.classList.remove('hovered');
gsap.to(el, { x: 0, y: 0, duration: 0.5, ease: 'elastic.out(1, 0.3)' });
});
});
// --- Interactive Particle Background ---
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
let mouse = { x: null, y: null };
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
window.addEventListener('mousemove', e => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 1;
this.speedX = Math.random() * 1 - 0.5;
this.speedY = Math.random() * 1 - 0.5;
this.color = 'rgba(10, 191, 83, 0.5)';
}
update() {
if (mouse.x && mouse.y) {
let dx = mouse.x - this.x;
let dy = mouse.y - this.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
this.x -= dx / 20;
this.y -= dy / 20;
}
}
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function initParticles() {
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
initParticles();
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].size <= 0.2) {
particles.splice(i, 1);
i--;
particles.push(new Particle());
}
}
requestAnimationFrame(animateParticles);
}
animateParticles();
// --- GSAP Animations ---
document.addEventListener('DOMContentLoaded', () => {
gsap.registerPlugin(ScrollTrigger, TextPlugin);
// Header animation
gsap.from("#header", {
y: '0',
duration: 1,
ease: 'power3.out',
delay: 0.5 // Reduced delay for faster visibility
});
// Header scroll background
gsap.to("#header", {
scrollTrigger: {
trigger: "body",
start: "top top",
end: "200px top",
scrub: 1,
},
backgroundColor: "rgba(10, 10, 10, 0.8)",
backdropFilter: "blur(10px)",
});
// Hero animations
const heroTl = gsap.timeline({ delay: 0.5 });
heroTl.to("#hero-title", {
text: "Visionary Digital Craft",
duration: 2,
ease: "power1.inOut"
})
.to("#hero-subtitle", { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }, "-=0.5")
.to("#hero-cta", { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }, "-=0.7");
// About Section Border Animation
gsap.from("#about-border", {
scale: 0.5,
opacity: 0,
duration: 1.5,
ease: 'power3.out',
scrollTrigger: {
trigger: "#about",
start: "top 80%", // Adjusted for better visibility
toggleActions: "play none none none"
}
});
// General section reveal animation
const revealElements = document.querySelectorAll(".gsap-reveal");
revealElements.forEach(el => {
gsap.fromTo(el,
{ y: 70, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 1.5,
ease: "power3.out",
scrollTrigger: {
trigger: el,
start: "top 90%", // Adjusted for better trigger timing
toggleActions: "play none none none"
}
}
);
});
// Portfolio Image Parallax Scroll
const portfolioImages = document.querySelectorAll(".portfolio-image");
portfolioImages.forEach(img => {
gsap.to(img, {
y: "-10%",
ease: "none",
scrollTrigger: {
trigger: img.closest('.group'),
start: "top bottom",
end: "bottom top",
scrub: true
}
});
});
});Final Output:
Conclusion:
With the right mix of HTML layout, CSS animations, and JavaScript interactions, you can create a modern animated brochure that looks sleek and feels premium. It’s perfect for product showcases, agency portfolios, or event invites.
If you're building something creative, this brochure can be your next smart move in front-end design.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
