CSS Variable をもっと活用する / Kyoto.js 18

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

Transcript

1. CSS Variable Λ΋ͬͱ׆༻͢Δ
   2023/02/03 Kyoto.js 18
   @spring-raining
   

   View Slide

2. ࣗݾ঺հ
   • HN: @spring-raining / ͸Δ͞Ί
   
   
   • ؔ੢ग़਎ 2019೥ब৬ͯ͠౦ژ΁ 2022೥໊ݹ԰ʹҾӽ͠
   

   View Slide

3. Kyoto.js͕
   
   
   ։࠵͞Εͳ͔ͬͨ3೥ؒ
   
   
   ͍Ζ͍Ζͳ͜ͱ͕͋ͬͨ
   

   View Slide

4. ϑϩϯτΤϯυͷਐԽ
   

   View Slide

5. View Slide

6. Ͱ͸CSSͷਐԽ͸ʁ
   

   View Slide

7. ɹɹɹɹɹɹɹͷొ৔ͰมΘͬͨʁ
   • Tailwind CSS͕ීٴͨ͜͠ͱͰɺ͔֬ʹCSSʹରͯ͜͠Ε·Ͱͱ͸ҟ
   ͳΔߟ͑ํ͕Ͱ͖ͨ (utility-
   fi
   rst)
   
   
   • ͨͩɺCSSࣗମ͕มΘͬͨΘ͚Ͱ͸ͳ͍
   
   
   • CSSࣗମͷมԽͱ͍͑͹ʁ
   

   View Slide

8. CSS Variable
   

   View Slide

9. CSS VariableͷՄೳੑ
   • ීஈCSS Variable͸ͲͷΑ͏ʹ࢖͍ͬͯ·͔͢ʁ
   
   
   • ͋Γ͕ͪͳ࢖͍ํˠ
   
   
   • ࢲ͸·ͩ·ͩCSS Variable͸े෼׆༻͞Ε͍ͯͳ͍Α͏ʹࢥ͍·͢
   

   View Slide

10. ࠷େͷಛ௃
    
    
    CSS Variable͸
    
    
    ಺༰Λಈతʹม͑ΒΕΔ
    

    View Slide

11. ׆༻ྫΛ2ͭ঺հ
    

    View Slide

12. ׆༻ྫ1
    
    
    Pointer eventͱͷ࿈ܞ
    

    View Slide

13. Pokémon Cards Holographic e
    ff
    ect in CSS
    • https://poke-holo.simey.me/
    
    
    • Breakdown: https://www.joshdance.com/100/day50/
    
    
    • Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ
    

    View Slide

14. ϗϩάϥϜͷ࢓૊Έ
    • Ұ௨Γ༡ΜͰ΋Βͬͨͱ͜ΖͰ…
    
    
    • ҰମͲͷΑ͏ʹ੍ޚ͍ͯ͠Δͷ͔ʁ
    

    View Slide

15. มΘ͍ͬͯΔͷ͸
    
    
    ͜ͷ෦෼͚ͩ
    

    View Slide

16. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ
    pointermove event
    Svelte/motion ͷ
    
    
    SpringετΞʹΑΔ
    Πʔδϯά
    --pointer-x/y
    --rotate-x/y
    
    
    --translate-x/y
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    

    View Slide

17. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ
    pointermove event
    Svelte/motion ͷ
    
    
    SpringετΞʹΑΔ
    Πʔδϯά
    --pointer-x/y
    --rotate-x/y
    
    
    --translate-x/y
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JS CSS
    

    View Slide

18. ैདྷͷCSS-in-JSͷߟ͑ํ
    pointermove event
    Svelte/motion ͷ
    
    
    SpringετΞʹΑΔ
    Πʔδϯά
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JavaScriptΛ࢖ͬͯ
    
    
    ৭ʑ͕Μ͹Δ
    CSSΛఘΊͯ
    

    WebGLͰ࣮૷
    

    View Slide

19. ैདྷͷCSS-in-JSͷߟ͑ํ
    pointermove event
    Svelte/motion ͷ
    
    
    SpringετΞʹΑΔ
    Πʔδϯά
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JavaScriptΛ࢖ͬͯ
    
    
    ৭ʑ͕Μ͹Δ
    CSSΛఘΊͯ
    

    WebGLͰ࣮૷
    JS CSS
    

    View Slide

20. JS/CSSؒͷڥքͱͯ͠ͷCSS Variable
    • CSS Variableͷ಺༰ΛखͰॻ͘ʮఆ਺ʯͱͯ͠ͷ࢖͍ํ͸ɺͦΕ͸ͦ
    ΕͰϝϦοτ͕͋Δ͚ͲͦΕ͚ͩͰ͸ͳ͍
    
    
    • JSͷ೚ҙͷ৘ใΛCSSͷੈքʹ࣋ͪࠐΉʮม਺ʯͱͯ͠ͷ໾ׂ
    
    
    • ͔͠΋ɺCSS Variable͸஋Λม͑Δͱଈ࠲ʹ൓ө͞ΕΔϦΞΫςΟ
    ϒͳม਺
    

    View Slide

21. JSͷ஋ΛCSSʹ࣋ͪࠐΉϝϦοτ
    • σόοά͕༰қʹͳΔ
    
    
    • CSS͸εςʔτϨε; ஋Λม͑Ε͹೚ҙͷঢ়ଶΛ࠶ݱͰ͖Δ
    
    
    • खܰʹύϑΥʔϚϯεͷྑ͍Ξχϝʔγϣϯ͕࣮૷Ͱ͖Δ
    
    
    • CSSࣗମ͸ݶΒΕͨؔ਺͚ͩΛ࢖͏ͷͰɺύϑΥʔϚϯεʹ͍ͭͯ
    ߟྀ͢Δ͜ͱ͕গͳ͍
    

    View Slide

22. Ͳͷ৘ใΛCSSʹ࣋ͪࠐΉ͔ʁ
    • ʮcalc()ͰܭࢉͰ͖Δ͔Ͳ͏͔ʯ͕Ұͭͷ໨҆
    
    
    • ࡾ֯ؔ਺ (sin(), atan2()) ͳͲͷ௥ՃʹΑΓɺܭࢉͰ͖Δ஋͸૿͑ͯ
    ͍Δ
    

    View Slide

23. ׆༻ྫ2
    
    
    ύϥϥοΫεεΫϩʔϧ
    

    View Slide

24. ύϥϥοΫεεΫϩʔϧ
    • ͜͜Ͱݴ͏ύϥϥοΫεεΫϩʔϧͱ͸ɺεΫϩʔϧͨ͠େ͖͞ʹԠ
    ͯ͡ཁૉ͕มܗ͢Δԋग़ͷ͜ͱ
    
    
    • https://www.apple.com/jp/iphone-14-pro/ తͳ
    
    
    • εΫϩʔϧҐஔΛͦͷ··CSSʹ࣋ͪࠐΊ͹ྑ͍ͷͰ͸ʁ
    

    View Slide

25. εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ
    • ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖׵͑ΔJS
    const cb = () => {
    document.body.style.setProperty('--scroll-position', window.scrollY);
    };
    document.addEventListener('scroll', () => {
    requestAnimationFrame(cb);
    });
    

    View Slide

26. σϞ
    
    
    https://codepen.io/spring-raining/
    pen/PoBxmNG
    

    View Slide

27. CSS VariableΛ࢖ͬͨ
    
    
    ελΠϧͷকདྷ
    

    View Slide

28. CSS Painting API
    • CSS Houdiniͱݺ͹ΕΔAPIͷҰͭ
    
    
    • JSͰ࣮૷ͨ͠Paint workoutͱݺ͹ΕΔඳըϓϩάϥϜΛCSS͔Βར༻
    ͢ΔͨΊͷAPI
    

    View Slide

29. CSS Painting API
    registerPaint(
    '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;
    }
    

    View Slide

30. ͭ·ΓͲ͏͍͏͜ͱʁ
    DOM Events
    ϦονͳCSSදݱ
    JavaScriptͰ
    
    
    ࠷௿ݶͷ࣮૷
    Paint WorkletͰ
    

    ΑΓߴ౓ͳඳը
    CSS Variables
    paint()
    

    View Slide

31. ͭ·ΓͲ͏͍͏͜ͱʁ
    DOM Events
    ϦονͳCSSදݱ
    JavaScriptͰ
    
    
    ࠷௿ݶͷ࣮૷
    Paint WorkletͰ
    

    ΑΓߴ౓ͳඳը
    CSS Variables
    paint()
    JS CSS
    JS
    

    View Slide

32. ·ͱΊ
    • Pure CSSͷදݱྗ͸࣮֬ʹ্͕͍ͬͯΔ
    
    
    • CSS Variable͸JSͱCSSΛͭͳ͙ڮ౉͠
    
    
    • CSSݏ͍ͳਓ΋Ͱ͖Ε͹৮ͬͯ΄͍͠ ָ͍͠Αʂ
    

    View Slide

33. Appendix
    
    
    ະདྷͷCSS
    
    
    ͜͏ͳ͍ͬͯͯ΄͍͠
    

    View Slide

34. ཁ๬1: @keyframes ΁ͷϚοϐϯά
    • CSS Animation͸جຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢Δ࢓૊Έ
    
    
    • Web Animations API΋ pause() ΍ reverse() ఔ౓͔͠ͳ͍
    
    
    • Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆
    ༻ൣғ͕޿͕Γͦ͏
    

    View Slide

35. ཁ๬2: CSS Variableͷ஋ʹ΋ͱͮ͘৚݅෼ذ
    • ৚݅ʹԠͯ͡ϓϩύςΟΛग़͠෼͚ΔΠϝʔδ
    
    
    • display: if-else(var(--condition), block, none);
    
    
    • ৭ʑࢼ͚ͨ͠Ͳࢥ͍͔ͭͳ͔ͬͨ…
    
    
    • ͍͍Ҋ͕͋Ε͹ڭ͍͑ͯͩ͘͞
    

    View Slide