/* ============================================================ Բալենու ծաղիկների (sakura) ֆիքսված շրջանակը և ընկնող թերթիկները ------------------------------------------------------------ Ամեն ինչ SVG է ու CSS — ոչ մի նկար չի ներբեռնվում։ Զարդանախշերը երբեք չեն խանգարում. pointer-events: none և aria-hidden, ուստի էկրանընթերցիչները նույնպես անտեսում են դրանք։ Ամբողջը անջատելու համար՝ index.html-ում ջնջեք տողը։ ============================================================ */ .sk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- ծաղիկների գույները ---------- */ .sk-front { fill: var(--blossom); } .sk-back { fill: var(--blossom-deep); opacity: .85; } .sk-center { fill: var(--blossom-center); } .sk-leaf-fill { fill: var(--leaf); opacity: .75; } .sk-branch { fill: none; stroke: var(--branch); stroke-linecap: round; opacity: .8; } /* ---------- ֆիքսված շրջանակը ---------- */ /* ԿԱՐԵՎՈՐ. այս փոփոխականները պետք է լինեն :root-ում, ոչ թե .floral-frame-ի վրա։ Շղարշը (.floral-scrim) շրջանակի ներսում չէ, այլ նրա քույրն է՝ ուղիղ -ի տակ, և CSS փոփոխականները ժառանգվում են միայն ներքև։ Շրջանակի վրա հայտարարելու դեպքում շղարշի բոլոր var()-երն անվավեր են դառնում, և տարրը ընդհանրապես չի նկարվում։ */ :root { /* Ամբողջ շերտի լայնությունը՝ միշտ էկրանից լայն, որ աջ եզրին ոչ մի ծաղիկ չկիսվի։ Այստեղ px-ով սահմանափակում ՉԻ ԿԱՐԵԼԻ դնել — հենց դա էր պատճառը, որ լայն մոնիտորին ճյուղի աջ ծայրը կտրվում էր։ */ --band-w: 104vw; --band-x: -2vw; /* որքան ձախ դուրս գա */ /* Քանի պատճեն է շարվում այդ լայնության մեջ։ Որքան շատ, այնքան փոքր են ծաղիկները։ 2-ը համակարգչի համար է, հեռախոսում՝ 1 (տես ներքևում)։ Փոխելիս index.html-ում svg-ների քանակը փոխելու կարիք չկա. ավելորդը ինքնաբերաբար թաքցվում է։ */ --band-cols: 2; /* viewBox-ը 1200x240 է, ուրեմն մեկ պատճենի բարձրությունը իր լայնության 1/5-ն է։ Շղարշն էլ է սա օգտագործում։ */ --band-h: calc(var(--band-w) / var(--band-cols) / 5); /* Որքան վեր դուրս գա շղարշը էկրանի եզրից։ iOS-ում ֆիքսված տարրերի top: 0-ն միշտ չէ, որ էկրանի իրական վերևն է — երբեմն այն ընկնում է կարգավիճակի գոտուց ցածր, և վերևում բաց է մնում։ Այս պաշարը փակում է այդ բացը՝ անկախ նրանից, թե որտեղ է ընկել top: 0-ը։ Էկրանից դուրս մնացած մասը պարզապես չի նկարվում։ */ --overshoot: 200px; } .floral-frame { position: fixed; top: 0; left: 0; width: 100%; /* Բարձրությունը միայն վերևի ճյուղի ու շղարշի համար է. ներքևի ճյուղն ինքն է fixed և կապված է էկրանի ներքևին (տես .floral-band--bottom)։ */ height: 100vh; height: 100lvh; z-index: 30; /* կոնտենտից վերև */ pointer-events: none; /* visible, ոչ թե clip — այլապես շղարշի վերևի պաշարը կկտրվեր։ Հորիզոնական սքրոլից պաշտպանությունն արդեն html-ի վրա է՝ style.css-ում։ */ overflow: visible; } /* Ճյուղի շերտը՝ ձախից աջ։ Վերևում ու ներքևում նույն ձևն է, ներքևինը պարզապես ուղղահայաց շրջված է։ */ .floral-band { position: absolute; display: flex; align-items: flex-start; left: var(--band-x); width: var(--band-w); height: var(--band-h); /* Թեթև փափկություն, որ եզրերը «ջրաներկի» պես մեղմ լինեն */ filter: drop-shadow(0 6px 14px rgba(180, 130, 135, .12)); } /* Պատճենները հավասար կիսում են շերտի լայնությունը */ .floral-band > svg { display: block; flex: 1 1 0; min-width: 0; height: var(--band-h); } /* Հայելային է ԱՌԱՋԻՆ պատճենը։ Այդպես երկուսի խիտ ծայրերը հանդիպում են մեջտեղում, իսկ բարակ ծայրերը մնում են էկրանի եզրերին։ Ուզեք հակառակը (խիտը եզրերին) — տեղափոխեք scaleX(-1)-ը nth-child(2)-ի վրա։ */ .floral-band > svg:nth-child(1) { transform: scaleX(-1); } .floral-band--top { top: -26px; } /* ԿԱՐԵՎՈՐ. ներքևինը ինքն է fixed, ոչ թե շրջանակի ներսում absolute։ Շրջանակի top: 0-ն iOS-ում էկրանի վերևը չէ, այլ բրաուզերի հասցեի տողից ցածր (երևում է վերևի ճյուղից՝ այն սկսվում է հասցեի տակից)։ Ուրեմն «շրջանակի սկիզբ + 100lvh»-ը ընկնում է էկրանից ցածր, և ճյուղը ընդհանրապես չէր նկարվում։ bottom: 0-ն ուղիղ էկրանի ներքևն է՝ անկախ նրանից, թե որտեղ է սկսվում շրջանակը։ Գինը՝ վահանակը թաքցնելիս Safari-ն տեսանելի մասը մեծացնում է, և ճյուղը մի ակնթարթում սահում է նոր ներքևին։ Փոխարենը այն միշտ երևում է՝ երկու վիճակում էլ։ */ .floral-band--bottom { position: fixed; top: auto; bottom: -26px; transform: scaleY(-1); } /* ---------- շղարշ ճյուղերի տակ ---------- Ճյուղը թափանցիկ SVG է. առանց սրա էջի տեքստը երևում է ծաղիկների արանքներից և ճյուղից վերև՝ էկրանի հենց եզրին։ Շղարշը վերևում լրիվ անթափանց է, ներքև՝ աստիճանաբար մարում, որ կտրուկ եզր չստացվի։ Գույնը միջինն է --ivory-ի ու --sand-ի միջև, որպեսզի բոլոր բաժինների ֆոների վրա աննկատ լինի (դրանք իրարից ընդամենը մի քանի տոկոսով են տարբերվում)։ */ /* ԿԱՐԵՎՈՐ. fixed, ոչ թե absolute։ Շղարշը -ի ուղիղ երեխան է, և absolute-ի դեպքում այն կապվում է փաստաթղթի սկզբին, ոչ թե էկրանին — սքրոլելիս հեռանում է վեր, և կոնտենտը մնում է բաց։ Հենց դա էր պատճառը, որ վերևում տեքստը երևում էր միայն սքրոլած վիճակում։ */ .floral-scrim { position: fixed; left: 0; width: 100%; z-index: 28; /* կոնտենտից վերև, թերթիկներից (29) ու ճյուղից (30) ցածր */ pointer-events: none; /* առանց սրա շղարշը կլանում է հպումները իր տակ */ } /* Վերևինը ավելի երկար է անթափանց մնում, քան ներքևինը։ Պատճառը՝ հեռախոսում սքրոլվող տեքստը հենց վերևից է դուրս գալիս, և եթե մարումը շուտ սկսվի, տառերը երևում են ծաղիկների արանքից։ Շղարշը ծաղիկների *տակ* է, ուստի երկար անթափանց մասը ոչինչ չի ծածկում։ */ .floral-scrim--top { top: calc(var(--overshoot) * -1); height: calc(var(--band-h) + var(--overshoot)); background: linear-gradient( to bottom, var(--scrim) 0, var(--scrim) calc(var(--overshoot) + var(--band-h) * .30), rgba(251, 245, 241, .6) calc(var(--overshoot) + var(--band-h) * .30), rgba(251, 245, 241, 0) 100%); } /* Ներքևում շղարշ չկա միտումնավոր։ Ճյուղը lvh-ի ներքևին է կպած, այսինքն արդեն էկրանի եզրին — ծածկելու բաց տեղ չի մնում։ Առանձին շղարշ ավելացնելը միայն լղոզում էր իրական բովանդակությունը (քարտեզը, հասցեն)։ */ /* ---------- ընկնող թերթիկներ ---------- */ .petal-field { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* նույն պատճառով, ինչ .floral-frame-ում */ height: 100lvh; z-index: 29; pointer-events: none; overflow: clip; } .petal { position: absolute; top: 0; left: var(--x, 50%); width: var(--w, 14px); opacity: 0; animation: petal-fall var(--dur, 22s) linear var(--delay, 0s) infinite; } .petal svg { display: block; width: 100%; height: auto; fill: var(--blossom); /* Երկրորդ անիմացիան՝ թերթիկը պտտվում և «շրջվում» է օդում */ animation: petal-spin var(--spin, 7s) ease-in-out var(--delay, 0s) infinite; } .petal:nth-child(3n) svg { fill: var(--blossom-deep); } .petal:nth-child(4n) svg { opacity: .7; } @keyframes petal-fall { 0% { transform: translate3d(0, -10vh, 0); opacity: 0; } 10% { opacity: .55; } 25% { transform: translate3d(calc(var(--sway, 60px) * .6), 22vh, 0); opacity: .55; } 50% { transform: translate3d(calc(var(--sway, 60px) * -.25), 50vh, 0); opacity: .55; } 75% { transform: translate3d(calc(var(--sway, 60px) * .85), 78vh, 0); opacity: .5; } 90% { opacity: .35; } 100% { transform: translate3d(var(--sway, 60px), 112vh, 0); opacity: 0; } } @keyframes petal-spin { 0%, 100% { transform: rotate(-14deg) scaleX(1); } 50% { transform: rotate(196deg) scaleX(.35); } } /* ---------- ադապտիվ ---------- */ @media (max-width: 780px) { /* Հեռախոսում մեկ պատճեն է և այն էկրանից լայն. այդպես ծաղիկները բավական մեծ են երևում, աջ բարակ ծայրը դուրս է մնում էկրանից։ :root-ում է, ոչ թե .floral-frame-ում — տես վերևի բացատրությունը։ */ :root { --band-w: 165vw; --band-x: -8vw; --band-cols: 1; } /* Հեռախոսում մեկ պատճեն է, և այն շրջված չէ — ճյուղը գնում է ձախից աջ, խիտ ծայրը ձախում, ինչպես նախկինում էր։ */ .floral-band > svg:nth-child(1) { transform: none; } .floral-band > svg:nth-child(2) { display: none; } .floral-band { filter: none; } .floral-band--top { top: -14px; } .floral-band--bottom { bottom: -14px; } /* Հեռախոսում ավելի քիչ թերթիկ՝ որ էջը թեթև մնա */ .petal:nth-child(2n) { display: none; } } /* ---------- եթե օգտատերը անջատել է շարժումը ---------- */ @media (prefers-reduced-motion: reduce) { .petal-field { display: none; } }