/** * WS Booster - Transitions d'apparition style montage video. * * Chaque classe .ws-anim-{type} definit un `mask` (ou clip-path) pilote par : * --ws-reveal-p : progression 0 -> 1 (tweenee par le JS playMaskReveal) * --ws-reveal-size : taille du motif (bandes / cases), reglee par le * controle "Taille du motif". Defaut par effet en fallback. * * FAIL-SAFE : --ws-reveal-p vaut 1 par defaut (element visible). Le JS le * met a 0 puis l'anime. Sans JS, l'element reste visible normalement. * * Types : blinds-h, blinds-v, iris, clock, mosaic, slide-bands, * barn-doors, knife, wave, diamond, cross. */ /* ===== STORES VENITIEN HORIZONTAL ===== */ .ws-anim-blinds-h { --ws-reveal-p: 1; -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent var(--ws-reveal-size, 28px)); mask-image: repeating-linear-gradient(to bottom, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent var(--ws-reveal-size, 28px)); } /* ===== STORES VENITIEN VERTICAL ===== */ .ws-anim-blinds-v { --ws-reveal-p: 1; -webkit-mask-image: repeating-linear-gradient(to right, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent var(--ws-reveal-size, 28px)); mask-image: repeating-linear-gradient(to right, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 28px)), transparent var(--ws-reveal-size, 28px)); } /* ===== IRIS / TACHE (cercle doux qui s'agrandit) ===== */ .ws-anim-iris { --ws-reveal-p: 1; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--ws-reveal-p) * 130%), transparent calc(var(--ws-reveal-p) * 130% + 14%)); mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--ws-reveal-p) * 130%), transparent calc(var(--ws-reveal-p) * 130% + 14%)); } /* ===== VOLET HORLOGE (balayage circulaire) ===== */ .ws-anim-clock { --ws-reveal-p: 1; -webkit-mask-image: conic-gradient(from -90deg, #000 calc(var(--ws-reveal-p) * 360deg), transparent calc(var(--ws-reveal-p) * 360deg)); mask-image: conic-gradient(from -90deg, #000 calc(var(--ws-reveal-p) * 360deg), transparent calc(var(--ws-reveal-p) * 360deg)); } /* ===== MOSAIQUE (cases qui se composent) ===== */ .ws-anim-mosaic { --ws-reveal-p: 1; -webkit-mask-image: radial-gradient(circle, #000 calc(var(--ws-reveal-p) * 118%), transparent calc(var(--ws-reveal-p) * 118%)); mask-image: radial-gradient(circle, #000 calc(var(--ws-reveal-p) * 118%), transparent calc(var(--ws-reveal-p) * 118%)); -webkit-mask-size: var(--ws-reveal-size, 32px) var(--ws-reveal-size, 32px); mask-size: var(--ws-reveal-size, 32px) var(--ws-reveal-size, 32px); -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* ===== BANDES GLISSANTES (revele en bandes diagonales) ===== */ .ws-anim-slide-bands { --ws-reveal-p: 1; -webkit-mask-image: repeating-linear-gradient(115deg, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 34px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 34px)), transparent var(--ws-reveal-size, 34px)); mask-image: repeating-linear-gradient(115deg, #000 0, #000 calc(var(--ws-reveal-p) * var(--ws-reveal-size, 34px)), transparent calc(var(--ws-reveal-p) * var(--ws-reveal-size, 34px)), transparent var(--ws-reveal-size, 34px)); } /* ===== PORTES QUI S'OUVRENT (revele du centre vers les bords) ===== */ .ws-anim-barn-doors { --ws-reveal-p: 1; -webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--ws-reveal-p) * 60%), #000 calc(50% - var(--ws-reveal-p) * 60%), #000 calc(50% + var(--ws-reveal-p) * 60%), transparent calc(50% + var(--ws-reveal-p) * 60%)); mask-image: linear-gradient(to right, transparent calc(50% - var(--ws-reveal-p) * 60%), #000 calc(50% - var(--ws-reveal-p) * 60%), #000 calc(50% + var(--ws-reveal-p) * 60%), transparent calc(50% + var(--ws-reveal-p) * 60%)); } /* ===== COUPURE DIAGONALE (une fente diagonale qui s'ouvre) ===== */ .ws-anim-knife { --ws-reveal-p: 1; -webkit-mask-image: linear-gradient(135deg, transparent calc(50% - var(--ws-reveal-p) * 75%), #000 calc(50% - var(--ws-reveal-p) * 75%), #000 calc(50% + var(--ws-reveal-p) * 75%), transparent calc(50% + var(--ws-reveal-p) * 75%)); mask-image: linear-gradient(135deg, transparent calc(50% - var(--ws-reveal-p) * 75%), #000 calc(50% - var(--ws-reveal-p) * 75%), #000 calc(50% + var(--ws-reveal-p) * 75%), transparent calc(50% + var(--ws-reveal-p) * 75%)); } /* ===== VAGUE (bord ondule qui monte depuis le bas) ===== */ .ws-anim-wave { --ws-reveal-p: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 H100 V24 C70,48 30,0 0,24 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 H100 V24 C70,48 30,0 0,24 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: left bottom; mask-position: left bottom; /* Largeur d'une vague = 100% / nombre de vagues (controle "Nombre de vagues"). 1 vague = une seule grande ondulation ; 3 = defaut. */ -webkit-mask-size: calc(100% / var(--ws-wave-count, 3)) calc(var(--ws-reveal-p) * 135%); mask-size: calc(100% / var(--ws-wave-count, 3)) calc(var(--ws-reveal-p) * 135%); /* La vague ondule en continu (defilement horizontal). Vitesse reglee par le controle "Vitesse de l'ondulation" via --ws-wave-anim-speed. */ animation: wsAnimWaveMove var(--ws-wave-anim-speed, 3s) linear infinite; } /* mask-position 0% -> 100% deplace le motif d'un nombre ENTIER de tuiles (count - 1) => boucle parfaitement sans couture des que "Nombre de vagues" vaut 2 ou plus. A 1 vague la tuile fait toute la largeur : pas de defilement. Valeurs simples (0% / 100%, sans calc ni keyword) pour que le navigateur interpole bien -- le melange `left`/`calc()` ne s'animait pas. */ @keyframes wsAnimWaveMove { from { -webkit-mask-position: 0% bottom; mask-position: 0% bottom; } to { -webkit-mask-position: 100% bottom; mask-position: 100% bottom; } } @media (prefers-reduced-motion: reduce) { .ws-anim-wave { animation: none; } } /* ===== CROIX (revele en croix depuis le centre) ===== */ .ws-anim-cross { --ws-reveal-p: 1; -webkit-mask-image: linear-gradient(to bottom, transparent calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% + var(--ws-reveal-p) * 62%), transparent calc(50% + var(--ws-reveal-p) * 62%)), linear-gradient(to right, transparent calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% + var(--ws-reveal-p) * 62%), transparent calc(50% + var(--ws-reveal-p) * 62%)); mask-image: linear-gradient(to bottom, transparent calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% + var(--ws-reveal-p) * 62%), transparent calc(50% + var(--ws-reveal-p) * 62%)), linear-gradient(to right, transparent calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% - var(--ws-reveal-p) * 62%), #000 calc(50% + var(--ws-reveal-p) * 62%), transparent calc(50% + var(--ws-reveal-p) * 62%)); }