Retour aux projets
Termine
Creation de vos envies
Site vitrine elegant pour une entreprise de decoration interieure. Le projet met en avant le savoir-faire du client a travers des animations fluides realisees avec GSAP, un design responsive soigne et une navigation intuitive. L'objectif etait de creer une experience visuelle premium qui reflete la creativite de l'entreprise.
Stack technique
Technologies utilisees
HTML5
Structure semantique
CSS3
Animations & layout
JavaScript
Interactivite
GSAP
Animations avancees
Responsive
Mobile-first
Performance
Optimisation images
Fonctionnalites
Points cles
Animations GSAP
Transitions et effets visuels avances
Galerie portfolio
Showcase des realisations
Design responsive
Adapte mobile/tablette/desktop
Navigation fluide
Smooth scroll et transitions
Formulaire devis
Demande de devis en ligne
Optimisation images
Lazy loading et compression
Approche
Processus de developpement
Brief client
Comprehension des besoins, moodboard, arborescence
Maquettage
Design Figma, choix typographiques et colorimetriques
Integration
HTML/CSS mobile-first, animations GSAP
Tests & Livraison
Cross-browser, responsive, performance
Code
Apercu technique
animations.js
1// animations.js - GSAP Timeline Animations
2import { gsap } from 'gsap';
3import { ScrollTrigger } from 'gsap/ScrollTrigger';
4
5gsap.registerPlugin(ScrollTrigger);
6
7const heroTimeline = gsap.timeline({
8 defaults: { duration: 0.8, ease: 'power3.out' }
9});
10
11heroTimeline
12 .from('.hero__title', {
13 y: 60, opacity: 0, skewY: 3
14 })
15 .from('.hero__subtitle', {
16 y: 40, opacity: 0
17 }, '-=0.4')
18 .from('.hero__cta', {
19 y: 30, opacity: 0, scale: 0.95
20 }, '-=0.3');
21
22// Parallax sur les sections
23gsap.utils.toArray('.parallax-section').forEach(section => {
24 gsap.to(section.querySelector('.parallax-bg'), {
25 yPercent: -20,
26 scrollTrigger: {
27 trigger: section,
28 start: 'top bottom',
29 end: 'bottom top',
30 scrub: true
31 }
32 });
33});