Presentation at Kyoto.js 18, Feb. 3, 2023
* Pokémon Cards Holographic effect in CSS - https://poke-holo.simey.me/ - Breakdown: https://www.joshdance.com/100/day50/ * デモ - https://codepen.io/spring-raining/pen/PoBxmNG
CSS Variable Λͬͱ׆༻͢Δ2023/02/03 Kyoto.js 18@spring-raining
View Slide
ࣗݾհ• HN: @spring-raining / Δ͞Ί• ؔग़ 2019ब৬ͯ͠౦ژ 2022໊ݹʹҾӽ͠
Kyoto.js͕։࠵͞Εͳ͔ͬͨ3͍ؒΖ͍Ζͳ͜ͱ͕͋ͬͨ
ϑϩϯτΤϯυͷਐԽ
ͰCSSͷਐԽʁ
ɹɹɹɹɹɹɹͷొͰมΘͬͨʁ• Tailwind CSS͕ීٴͨ͜͠ͱͰɺ͔֬ʹCSSʹରͯ͜͠Ε·ͰͱҟͳΔߟ͑ํ͕Ͱ͖ͨ (utility-first)• ͨͩɺCSSࣗମ͕มΘͬͨΘ͚Ͱͳ͍• CSSࣗମͷมԽͱ͍͑ʁ
CSS Variable
CSS VariableͷՄೳੑ• ීஈCSS VariableͲͷΑ͏ʹ͍ͬͯ·͔͢ʁ• ͋Γ͕ͪͳ͍ํˠ• ࢲ·ͩ·ͩCSS Variableे׆༻͞Ε͍ͯͳ͍Α͏ʹࢥ͍·͢
࠷େͷಛCSS Variable༰Λಈతʹม͑ΒΕΔ
׆༻ྫΛ2ͭհ
׆༻ྫ1Pointer eventͱͷ࿈ܞ
Pokémon Cards Holographic effect in CSS• https://poke-holo.simey.me/• Breakdown: https://www.joshdance.com/100/day50/• Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ
ϗϩάϥϜͷΈ• Ұ௨Γ༡ΜͰΒͬͨͱ͜ΖͰ…• ҰମͲͷΑ͏ʹ੍ޚ͍ͯ͠Δͷ͔ʁ
มΘ͍ͬͯΔͷ͜ͷ෦͚ͩ
ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕpointermove eventSvelte/motion ͷSpringετΞʹΑΔΠʔδϯά--pointer-x/y--rotate-x/y--translate-x/yϗϩάϥϜͷݟͨΛ੍ޚ͢ΔελΠϧΧʔυͷҐஔɾճసΛ੍ޚ͢ΔελΠϧ
ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕpointermove eventSvelte/motion ͷSpringετΞʹΑΔΠʔδϯά--pointer-x/y--rotate-x/y--translate-x/yϗϩάϥϜͷݟͨΛ੍ޚ͢ΔελΠϧΧʔυͷҐஔɾճసΛ੍ޚ͢ΔελΠϧJS CSS
ैདྷͷCSS-in-JSͷߟ͑ํpointermove eventSvelte/motion ͷSpringετΞʹΑΔΠʔδϯάϗϩάϥϜͷݟͨΛ੍ޚ͢ΔελΠϧΧʔυͷҐஔɾճసΛ੍ޚ͢ΔελΠϧJavaScriptΛͬͯ৭ʑ͕ΜΔCSSΛఘΊͯ WebGLͰ࣮
ैདྷͷCSS-in-JSͷߟ͑ํpointermove eventSvelte/motion ͷSpringετΞʹΑΔΠʔδϯάϗϩάϥϜͷݟͨΛ੍ޚ͢ΔελΠϧΧʔυͷҐஔɾճసΛ੍ޚ͢ΔελΠϧJavaScriptΛͬͯ৭ʑ͕ΜΔCSSΛఘΊͯ WebGLͰ࣮JS CSS
JS/CSSؒͷڥքͱͯ͠ͷCSS Variable• CSS Variableͷ༰ΛखͰॻ͘ʮఆʯͱͯ͠ͷ͍ํɺͦΕͦΕͰϝϦοτ͕͋Δ͚ͲͦΕ͚ͩͰͳ͍• JSͷҙͷใΛCSSͷੈքʹ࣋ͪࠐΉʮมʯͱͯ͠ͷׂ• ͔͠ɺCSS VariableΛม͑Δͱଈ࠲ʹө͞ΕΔϦΞΫςΟϒͳม
JSͷΛCSSʹ࣋ͪࠐΉϝϦοτ• σόοά͕༰қʹͳΔ• CSSεςʔτϨε; Λม͑Εҙͷঢ়ଶΛ࠶ݱͰ͖Δ• खܰʹύϑΥʔϚϯεͷྑ͍Ξχϝʔγϣϯ͕࣮Ͱ͖Δ• CSSࣗମݶΒΕ͚ͨؔͩΛ͏ͷͰɺύϑΥʔϚϯεʹ͍ͭͯߟྀ͢Δ͜ͱ͕গͳ͍
ͲͷใΛCSSʹ࣋ͪࠐΉ͔ʁ• ʮcalc()ͰܭࢉͰ͖Δ͔Ͳ͏͔ʯ͕Ұͭͷ҆• ࡾ֯ؔ (sin(), atan2()) ͳͲͷՃʹΑΓɺܭࢉͰ͖Δ૿͍͑ͯΔ
׆༻ྫ2ύϥϥοΫεεΫϩʔϧ
ύϥϥοΫεεΫϩʔϧ• ͜͜Ͱݴ͏ύϥϥοΫεεΫϩʔϧͱɺεΫϩʔϧͨ͠େ͖͞ʹԠͯ͡ཁૉ͕มܗ͢Δԋग़ͷ͜ͱ• https://www.apple.com/jp/iphone-14-pro/ తͳ• εΫϩʔϧҐஔΛͦͷ··CSSʹ࣋ͪࠐΊྑ͍ͷͰʁ
εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ• ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖͑ΔJSconst cb = () => {document.body.style.setProperty('--scroll-position', window.scrollY);};document.addEventListener('scroll', () => {requestAnimationFrame(cb);});
σϞhttps://codepen.io/spring-raining/pen/PoBxmNG
CSS VariableΛͬͨελΠϧͷকདྷ
CSS Painting API• CSS HoudiniͱݺΕΔAPIͷҰͭ• JSͰ࣮ͨ͠Paint workoutͱݺΕΔඳըϓϩάϥϜΛCSS͔Βར༻͢ΔͨΊͷAPI
CSS Painting APIregisterPaint('boxbg',class {static get contextOptions() {return { alpha: true };}static get inputProperties() {return ['--boxColor'];}paint(ctx, size, props) {ctx.fillStyle = props.get('--boxColor');ctx.fillRect(0, 0, size.width, size.height);}});li {background-image: paint(boxbg);--boxColor: blue;}
ͭ·ΓͲ͏͍͏͜ͱʁDOM EventsϦονͳCSSදݱJavaScriptͰ࠷ݶͷ࣮Paint WorkletͰ ΑΓߴͳඳըCSS Variablespaint()
ͭ·ΓͲ͏͍͏͜ͱʁDOM EventsϦονͳCSSදݱJavaScriptͰ࠷ݶͷ࣮Paint WorkletͰ ΑΓߴͳඳըCSS Variablespaint()JS CSSJS
·ͱΊ• Pure CSSͷදݱྗ࣮֬ʹ্͕͍ͬͯΔ• CSS VariableJSͱCSSΛͭͳ͙ڮ͠• CSSݏ͍ͳਓͰ͖Ε৮ͬͯ΄͍͠ ָ͍͠Αʂ
AppendixະདྷͷCSS͜͏ͳ͍ͬͯͯ΄͍͠
ཁ1: @keyframes ͷϚοϐϯά• CSS Animationجຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢ΔΈ• Web Animations API pause() reverse() ఔ͔͠ͳ͍• Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆༻ൣғ͕͕Γͦ͏
ཁ2: CSS Variableͷʹͱͮ݅͘ذ• ݅ʹԠͯ͡ϓϩύςΟΛग़͚͠ΔΠϝʔδ• display: if-else(var(--condition), block, none);• ৭ʑࢼ͚ͨ͠Ͳࢥ͍͔ͭͳ͔ͬͨ…• ͍͍Ҋ͕͋Εڭ͍͑ͯͩ͘͞