Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ハンドメイド now loading

9777729de00579e1ce08189f495b84b3?s=47 goma
May 25, 2019

ハンドメイド now loading

2019/05/25 Tech美られでぃ #1

9777729de00579e1ce08189f495b84b3?s=128

goma

May 25, 2019
Tweet

Transcript

  1. ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax

  2. ࣗݾ঺հ • ͝· (@gomaaburamax) • ΤϯδχΞ5೥ੜ • PHP/JS/Perl • ϑϦʔϥϯε

    ݉ ฼ۀ
  3. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ

  4. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋ ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ

    ্ॻ͖ ͞Ε·͍ͬͯͯ͘ ΋͸΍ոจॻ
  5. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋ ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ

    ্ॻ͖ ͞Ε·͍ͬͯͯ͘ ΋͸΍ոจॻ ࢲͷCSSྗ
  6. എܠ • CSSϑϨʔϜϫʔΫ͔͠࢖ͬͯͳ͍ • ->CSS஌͕ࣝখखઌܳɺߏ଄෼ੳͰ͖ͳ͍ • ݕࡧͱ࣮૷ʹଟେͳ࣌ؒΛ͔͚͍ͯΔ • ->ແବͷۃΈ

  7. Αͬ͠Όษڧͬͧ͢

  8. None
  9. None
  10. ৄ͍͠࿩͸ʮ͗ͷΘΜษڧձʯͰൃද͠·ͨ͠

  11. CSSΞχϝʔγϣϯָ͠ ͍!!!!!!!!!!!!!!!!!!!!!!!!!

  12. CSSΞχϝʔγϣϯͰ ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax

  13. Now loading #ͱ͸ • ϩʔσΟϯάΞχϝʔγϣϯ • API௨৴ͳͲʹΑΔ஋औಘதͷ࣌ؒʹϢʔβͷ ཭୤Λ๷͙ͨΊʹग़͢Ξχϝʔγϣϯ ͍ΘΏΔ͜͏͍͏ͷˠ

  14. ࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif

    • gifը૾࡞੒αΠτ
  15. ࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif

    • gifը૾࡞੒αΠτ
  16. CSSΞχϝʔγϣϯ ͷ࡞Γํ

  17. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    !LFZGSBNFT໊લ\ ^
  18. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    !LFZGSBNFT໊લ\ ^ ͲͷλΠϛϯάͰɺ Ͳ͏͍͏ܗʹͳ͍ͬͯΔ͔
 ઃఆ͢Δ
  19. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  20. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    ࢦఆ !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  21. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOMPOHFS

    ࢦఆ !LFZGSBNFTMPOHFS\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  22. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOTIBLF

    !LFZGSBNFTMPOHFS\ ^ มԽʹ͍ͭͯઃఆ ͲΕ͘Β͍ͷ଎͞Ͱʁ ΪϡΠʔϯͬͯมΘΔʁҰఆʹมΘΔʁ ΤϯυϨεͰʁ \ XJEUIQY ^ \ XJEUIQY ^
  23. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOMPOHFSFBTFJOPVUTJOpOJUF;

    !LFZGSBNFTMPOHFS\ ^ -> ΪϡΠʔϯͱ2ඵ͔͚ͯແݶ࠶ੜ ※ৄࡉׂѪ \ XJEUIQY ^ \ XJEUIQY ^
  24. ݟͯΈΑ͏ https://codepen.io/gomayumax/pen/dEmoWJ

  25. ͳΜͱͳ͘෼͔Ε͹OK

  26. ࡞ͬͨ΋ͷ https://codepen.io/gomayumax/pen/KLQgYj https://gomayumax.github.io/markup/loading_css/loading_1.html https://gomayumax.github.io/markup/loading_css/garagara.html

  27. ·ͱΊ • CSSΞχϝʔγϣϯͰ
 ϩʔσΟϯάΞχϝʔγϣϯ͕࡞ΕΔ • animationϓϩύςΟ͸ύϥϝʔλ͕๛෋Ͱ
 Ͱ͖Δ͜ͱ͕ͨ͘͞Μ͋Δ • ͨͷ͍͠ ɹ✌('ω'✌

    )ࡾ✌('ω')✌ࡾ( ✌'ω')✌
  28. ͕࣌ؒ༨ͬͨΒ….

  29. ճస࣠͸ΦϒδΣΫτͷத৺

  30. ճస࣠͸ΦϒδΣΫτͷத৺

  31. ճస࣠͸ΦϒδΣΫτͷத৺ ←ݟ͑ͳ͍

  32. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div>
  33. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •
  34. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •