home : try animation
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
This commit is contained in:
isUnknown
parent
6075322cde
commit
8996e3e194
4 changed files with 143 additions and 11 deletions
|
|
@ -1,10 +1,13 @@
|
|||
[data-template="agenda"] {
|
||||
main {
|
||||
background-color: transparent;
|
||||
margin-top: -2px;
|
||||
|
||||
.dates-container {
|
||||
|
||||
|
||||
border: var(--border);
|
||||
padding-bottom: 2rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color-beige);
|
||||
|
||||
[data-view="events"] {
|
||||
ul {
|
||||
|
|
@ -15,6 +18,8 @@
|
|||
}
|
||||
|
||||
.month-switcher {
|
||||
position: sticky;
|
||||
top: 6.8rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -28,7 +33,6 @@
|
|||
border-radius: var(--radius);
|
||||
background-color: var(--color-beige);
|
||||
|
||||
|
||||
.month-label {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
|
@ -51,7 +55,6 @@
|
|||
border-radius: var(--radius);
|
||||
background-color: var(--color-beige);
|
||||
|
||||
|
||||
&:not(:last-child) {
|
||||
}
|
||||
|
||||
|
|
@ -66,31 +69,28 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dates{
|
||||
|
||||
.dates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.date {
|
||||
margin: 2rem;
|
||||
margin-bottom: 4rem ;
|
||||
margin-bottom: 4rem;
|
||||
font-size: var(--font-size-L);
|
||||
|
||||
.date-range{
|
||||
.date-range {
|
||||
font-size: var(--font-size-XL);
|
||||
line-height: var(--line-height-XL);
|
||||
margin-bottom: var(--line-height-M);
|
||||
}
|
||||
.date-place{
|
||||
.date-place {
|
||||
text-wrap: balance;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,5 +76,17 @@
|
|||
<path id="rc-eye-r-iris" d="M508.39,605.19C506.93,605.19 505.54,605.52 504.22,606.1C503.58,604.82 503.23,603.26 503.29,601.58C503.35,600.09 503.73,598.71 504.33,597.56C502.65,598.82 501.47,601.17 501.36,603.92C501.31,605.2 501.5,606.42 501.88,607.49C501.49,607.79 501.11,608.11 500.75,608.46C499.82,607.31 499.14,605.79 498.87,604.07C498.64,602.59 498.75,601.17 499.12,599.93C497.72,601.49 497.01,604.03 497.43,606.74C497.66,608.2 498.19,609.52 498.91,610.58C498.73,610.84 498.55,611.1 498.38,611.37C496.86,610.45 495.53,608.84 494.77,606.78C494.26,605.38 494.08,603.96 494.2,602.67C493.13,604.47 492.93,607.1 493.87,609.68C494.54,611.52 495.68,613 497,613.95C495.83,616.6 495.15,619.69 495.15,623C495.15,632.84 501.08,640.82 508.39,640.82C515.7,640.82 521.63,632.84 521.63,623C521.63,613.16 515.7,605.18 508.39,605.18L508.39,605.19ZM508.39,608.47C511.95,608.47 514.83,611.05 514.83,614.23C514.83,617.41 511.95,619.99 508.39,619.99C504.83,619.99 501.95,617.41 501.95,614.23C501.95,611.05 504.83,608.47 508.39,608.47ZM508.39,639C502.32,639 497.2,631.68 497.2,623.01C497.2,618.29 498.73,613.97 501.09,611.02C499.19,614.33 498.45,618.99 499.41,623.82C501,631.79 506.76,637.9 512.38,637.89C511.13,638.6 509.78,639.01 508.38,639.01L508.39,639ZM513.13,635.43C511.22,635.43 509.67,634.04 509.67,632.33C509.67,630.62 511.22,629.23 513.13,629.23C515.04,629.23 516.59,630.62 516.59,632.33C516.59,634.04 515.04,635.43 513.13,635.43Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
|
||||
<!-- Overlays no-outfit : paupières + sourcils, masqués par défaut, révélés par GSAP -->
|
||||
<g id="eye-overlays" opacity="0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;">
|
||||
<path id="lc-eye-l-brow" d="M413.54,625.91C413.54,625.91 419.70,620.30 426.70,622.13C431.92,623.49 432.28,624.02 435.97,624.53"/>
|
||||
<path id="lc-eye-l-lid" d="M414.99,632.79C418.98,629.42 425.04,625.28 434.52,632.16"/>
|
||||
<path id="lc-eye-r-brow" d="M465.62,625.91C465.62,625.91 459.46,620.30 452.46,622.13C447.24,623.49 446.88,624.02 443.19,624.53"/>
|
||||
<path id="lc-eye-r-lid" d="M464.17,632.79C460.18,629.42 454.12,625.28 444.64,632.16"/>
|
||||
<path id="rc-eye-l-brow" d="M526.71,616.03C526.71,616.03 531.57,614.79 535.25,612.98C538.67,611.31 542.43,609.03 542.43,609.03C542.43,609.03 546.80,614.47 549.07,615.46"/>
|
||||
<path id="rc-eye-l-lid" d="M530.00,624.44C533.64,621.21 539.31,616.47 547.18,624.97"/>
|
||||
<path id="rc-eye-r-brow" d="M519.62,615.61C519.62,615.61 514.76,614.37 511.08,612.56C507.66,610.89 503.90,608.61 503.90,608.61C503.90,608.61 499.53,614.05 497.26,615.04"/>
|
||||
<path id="rc-eye-r-lid" d="M516.33,624.02C514.22,622.14 511.42,619.76 507.91,619.75C505.37,619.75 502.45,620.98 499.15,624.54"/>
|
||||
</g>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 16 KiB |
63
assets/js/characters/morphEyes.js
Normal file
63
assets/js/characters/morphEyes.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
export function initMorphEyes() {
|
||||
const svg = document.querySelector(".identity svg");
|
||||
if (!svg) return;
|
||||
|
||||
gsap.registerPlugin(MorphSVGPlugin);
|
||||
|
||||
const DURATION = 0.5;
|
||||
const EASE = "power2.inOut";
|
||||
|
||||
// lc-eye-l : composé de plusieurs éléments superposés
|
||||
const lcEyeLIris = svg.querySelector("#lc-eye-l-iris");
|
||||
const lcEyeLBase = svg.querySelector("#lc-eye-l-base");
|
||||
const lcEyeLOverlays = svg.querySelectorAll("#lc-eye-l-sclera, #lc-eye-l-shadow, #lc-eye-l-sparkle");
|
||||
|
||||
// Les trois autres yeux : un seul compound path chacun
|
||||
const lcEyeRIris = svg.querySelector("#lc-eye-r-iris");
|
||||
const rcEyeLIris = svg.querySelector("#rc-eye-l-iris");
|
||||
const rcEyeRIris = svg.querySelector("#rc-eye-r-iris");
|
||||
|
||||
// Paupières + sourcils : révélés en fondu lors du passage en no-outfit
|
||||
const eyeOverlays = svg.querySelector("#eye-overlays");
|
||||
|
||||
if (!lcEyeLIris || !lcEyeRIris || !rcEyeLIris || !rcEyeRIris) return;
|
||||
|
||||
const origins = {
|
||||
lcEyeLIris: lcEyeLIris.getAttribute("d"),
|
||||
lcEyeLBase: lcEyeLBase.getAttribute("d"),
|
||||
lcEyeRIris: lcEyeRIris.getAttribute("d"),
|
||||
rcEyeLIris: rcEyeLIris.getAttribute("d"),
|
||||
rcEyeRIris: rcEyeRIris.getAttribute("d"),
|
||||
};
|
||||
|
||||
function morphToNoOutfit() {
|
||||
// lc-eye-l : iris + base → ovale, overlays blancs → opacity 0
|
||||
gsap.to(lcEyeLIris, { morphSVG: "#lc-eye-l-target", duration: DURATION, ease: EASE });
|
||||
gsap.to(lcEyeLBase, { morphSVG: "#lc-eye-l-target", duration: DURATION, ease: EASE });
|
||||
gsap.to(lcEyeLOverlays, { opacity: 0, duration: DURATION * 0.4, ease: "power1.in" });
|
||||
|
||||
gsap.to(lcEyeRIris, { morphSVG: "#lc-eye-r-target", duration: DURATION, delay: 0.04, ease: EASE });
|
||||
gsap.to(rcEyeLIris, { morphSVG: "#rc-eye-l-target", duration: DURATION, delay: 0.02, ease: EASE });
|
||||
gsap.to(rcEyeRIris, { morphSVG: "#rc-eye-r-target", duration: DURATION, delay: 0.06, ease: EASE });
|
||||
|
||||
// Paupières + sourcils : apparition en fondu
|
||||
gsap.to(eyeOverlays, { opacity: 1, duration: DURATION * 0.8, delay: DURATION * 0.3, ease: "power1.out" });
|
||||
}
|
||||
|
||||
function morphToKawai() {
|
||||
gsap.to(lcEyeLIris, { morphSVG: origins.lcEyeLIris, duration: DURATION, ease: EASE });
|
||||
gsap.to(lcEyeLBase, { morphSVG: origins.lcEyeLBase, duration: DURATION, ease: EASE });
|
||||
gsap.to(lcEyeLOverlays, { opacity: 1, duration: DURATION * 0.6, delay: DURATION * 0.5, ease: "power1.out" });
|
||||
|
||||
gsap.to(lcEyeRIris, { morphSVG: origins.lcEyeRIris, duration: DURATION, delay: 0.04, ease: EASE });
|
||||
gsap.to(rcEyeLIris, { morphSVG: origins.rcEyeLIris, duration: DURATION, delay: 0.02, ease: EASE });
|
||||
gsap.to(rcEyeRIris, { morphSVG: origins.rcEyeRIris, duration: DURATION, delay: 0.06, ease: EASE });
|
||||
|
||||
// Paupières + sourcils : disparition immédiate
|
||||
gsap.to(eyeOverlays, { opacity: 0, duration: DURATION * 0.4, ease: "power1.in" });
|
||||
}
|
||||
|
||||
const identity = document.querySelector(".identity");
|
||||
identity.addEventListener("mouseenter", morphToNoOutfit);
|
||||
identity.addEventListener("mouseleave", morphToKawai);
|
||||
}
|
||||
57
assets/js/characters/morphMouth.js
Normal file
57
assets/js/characters/morphMouth.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
export function initMorphMouth() {
|
||||
const svg = document.querySelector(".identity svg");
|
||||
if (!svg) return;
|
||||
|
||||
const lcMouth = svg.querySelector("#lc-mouth");
|
||||
const rcMouth = svg.querySelector("#rc-mouth");
|
||||
if (!lcMouth || !rcMouth) return;
|
||||
|
||||
gsap.registerPlugin(MorphSVGPlugin);
|
||||
|
||||
const lcMouthOrigin = lcMouth.getAttribute("d");
|
||||
const rcMouthOrigin = rcMouth.getAttribute("d");
|
||||
|
||||
const DURATION = 0.3;
|
||||
const EASE = "power2.inOut";
|
||||
const STAGGER = 0.06;
|
||||
|
||||
function morphToNoOutfit() {
|
||||
gsap.to(lcMouth, {
|
||||
morphSVG: "#lc-mouth-target",
|
||||
fill: "black",
|
||||
stroke: "transparent",
|
||||
duration: DURATION,
|
||||
ease: EASE,
|
||||
});
|
||||
gsap.to(rcMouth, {
|
||||
morphSVG: "#rc-mouth-target",
|
||||
fill: "black",
|
||||
stroke: "transparent",
|
||||
duration: DURATION,
|
||||
delay: STAGGER,
|
||||
ease: EASE,
|
||||
});
|
||||
}
|
||||
|
||||
function morphToKawai() {
|
||||
gsap.to(lcMouth, {
|
||||
morphSVG: lcMouthOrigin,
|
||||
fill: "none",
|
||||
stroke: "black",
|
||||
duration: DURATION,
|
||||
ease: EASE,
|
||||
});
|
||||
gsap.to(rcMouth, {
|
||||
morphSVG: rcMouthOrigin,
|
||||
fill: "none",
|
||||
stroke: "black",
|
||||
duration: DURATION,
|
||||
delay: STAGGER,
|
||||
ease: EASE,
|
||||
});
|
||||
}
|
||||
|
||||
const identity = document.querySelector(".identity");
|
||||
identity.addEventListener("mouseenter", morphToNoOutfit);
|
||||
identity.addEventListener("mouseleave", morphToKawai);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue