PikaPika

簡報於前端魔法師八月份小聚

====
簡介
====

這場 talk 分享我用 CSS 畫皮卡丘的
小品故事！

============
簡報中參考連結
============

我的皮卡丘：
https://codepen.io/shiningjason1989/details/NALzYQ/

啟發這個作品的作品：
1. https://www.facebook.com/groups/f2e.tw/permalink/1039954716041893/
2. https://www.facebook.com/groups/f2e.tw/permalink/1042466265790738/
3. 小智與皮卡丘 - https://codepen.io/kevinjannis/pen/GyCgn
4. 小智與皮卡丘 - https://dribbble.com/shots/2565803-Pika

相關工具：
1. https://github.com/pixelass/to-pixels
2. https://github.com/buzzfeed/libgif-js
3. https://github.com/jvalen/pixel-art-react

=======
工商連結
=======

React Quick Tutorial：
https://github.com/shiningjason1989/react-quick-tutorial

「24 小時，快速入門 React」線上課程：
https://4cats.teachable.com/courses/24hrs-react-101

===========
我的聯絡方式
===========

Email：
shiningjason1989@gmail.com

Website：
https://shiningjason1989.github.io

GitHub：
https://github.com/shiningjason1989

Transcript

1. Pika~Pika
2. Pika~Pika~Chu!
3. ⯓铞穡锸
4.  
 ➛㣔剚ⴕ❧䧮欽
   $44
   殥淼⽓⚊涸
 㼭ㅷ佦✲
5.  
 淼⽓⚊來䧮涸✲䧴鏪⡹⦛鿪剚✫
6.  
 䨾⟃鸏⦐
   UBML
   剓㣐涸湡垦僽
7.  
 劍劆䧮〳⟃㉬涮㣐㹻
   㔐㹻䖕⨞❉剤馱涸✲
8. 㼭佦✲涸饱彂
11. 雊䧮䟝欽
    $44
    殥
    CJU
    涸牟㣼㼂頺
12. 雊䧮䟝欽
    $44
    殥
    CJU
    涸牟㣼㼂頺
    剓㥪〳⟃殥ⴀ爫⦛鹎⻋涸⹛殥
13. 齡랃
    䧮〳腋銴⯓濼麥㥶⡦欽
    $44
    殥
    CJU
14. http://codepen.io/kevinjannis/pen/GyCgn
15. 鸏僽䧮痧♧妄濼麥
16. 鸏僽䧮痧♧妄濼麥
 CPYTIBEPX
    〳⟃䭭⢵殥
    1JYFM
    "SU
17. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2); animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
18. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2); animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
19. .box { width: 10px; height: 10px; }
20. .box { width: 10px; height: 10px; box-shadow: 0 10px 0 #a6aaa9; }
21. .box { width: 10px; height: 10px; box-shadow: 0 10px 0 #a6aaa9, 10px 0 0 #a6aaa8; }
22. .box { width: 10px; height: 10px; box-shadow: 0 10px 0 #a6aaa9, 10px 0 0 #a6aaa8, 20px 20px 0 #ffffff; }
23. 罜㸐饥騟涸⹛殥
24. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2); animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
25. #pikachu { &:after, &:before { animation: the-animation .4s infinite steps(2); animation-duration: .2s; } &:before { box-shadow: …; } &:after { box-shadow: …; animation-direction: reverse; } } @keyframes the-animation { 0% { margin-left: 0; } 100% { margin-left: $size * 30; } }
26. %SJCCCMF
    ⛳剤䖎㢵剤馱涸⡲ㅷ
27. https://dribbble.com/shots/2565803-Pika
28. ⵹䎙㣔䧮⿶溏ⵌ
30. 䧮佖隶䟝岁✫
    䧮⯓雊淼⽓⚊ㄤ㼭兰
 〳⟃♳♴䊩〸饥⹛
31. 䧮꨾銴⯓欽
    $44
    殥ⴀ淼⽓⚊
    ぢ⵹饥⹛涸⹛殥
32. 荈䊹ⵠ
    CJU
    䥰鑪剚泇䱈
    䨾⟃䧮㖈䟝僽や〳⟃
    KQHQOH
    ̔
    CJU
    ̔
    $44
33. https://github.com/pixelass/to-pixels UPQJYFMT
    DPOWFSU
    JNBHFT
    UP
    QJYFM
    BSU
    BOE
    IBWF
    GVO
34. var canvas = document.createElement('canvas'); var context = canvas.getContext(‘2d'); 
 context.drawImage(img, 0, 0, width, height); const imageData = context.getImageData(0, 0, width, height); imageData.data; // [r,g,b,a,r,g,b,a…]
35. 齡
    (JG
    銴䙦랃
    鱲䧭㢵⦐
    GSBNF
    涸
    $44
    ヤ
36. https://github.com/buzzfeed/libgif-js MJCHJGKT
    +BWB4DSJQU
    (*'
    QBSTFS
    BOE
    QMBZFS
37. 灇瑖✫鏪⛉
38. 㔮ꨈ涸僽
 
    +1(1/(
    涸♧呔倰呔銴䫌㢵㣐
39. 㔮ꨈ涸僽
 
    +1(1/(
    涸♧呔倰呔銴䫌㢵㣐
 
    䪪♶ⵌ➃㹻殥㥪涸淼⽓⚊
    (*'
40. https://github.com/jvalen/pixel-art-react QJYFMBSUSFBDU
    1JYFM
    BSU
    BOJNBUJPO
    BOE
    ESBXJOH
    XFC
    BQQ
    QPXFSFE
    CZ
    3FBDU+4
41. 䨾⟃
 
    䧮♴鯺
    1PLFNPO
    :FMMPX
    ㄤ
    (BNFCPZ
    垸亼㐼
42. 䨾⟃
 
    䧮♴鯺
    1PLFNPO
    :FMMPX
    ㄤ
    (BNFCPZ
    垸亼㐼
 
    欽
    (JQIZ
    DBQUVSF
    䫌⹛殥
43. 䨾⟃
 
    䧮♴鯺
    1PLFNPO
    :FMMPX
    ㄤ
    (BNFCPZ
    垸亼㐼
 
    欽
    (JQIZ
    DBQUVSF
    䫌⹛殥
 
    .BD
    갸鏤Ꟛ
    (*'
    剚ⴗ
    'SBNF
44. 䨾⟃
 
    䧮♴鯺
    1PLFNPO
    :FMMPX
    ㄤ
    (BNFCPZ
    垸亼㐼
 
    欽
    (JQIZ
    DBQUVSF
    䫌⹛殥
 
    .BD
    갸鏤Ꟛ
    (*'
    剚ⴗ
    'SBNF
 
    欽
    QJYFMBSUSFBDU
    殥嫦♧⦐
    'SBNF
45. 䨾⟃
 
    䧮♴鯺
    1PLFNPO
    :FMMPX
    ㄤ
    (BNFCPZ
    垸亼㐼
 
    欽
    (JQIZ
    DBQUVSF
    䫌⹛殥
 
    .BD
    갸鏤Ꟛ
    (*'
    剚ⴗ
    'SBNF
 
    欽
    QJYFMBSUSFBDU
    殥嫦♧⦐
    'SBNF
    
    欴ⴀ
    $44
46. #pika { animation: walk 1s infinite; } @keyframes walk { 0%, 25% { box-shadow: …; } 25.01%, 50% { box-shadow: …; }
 50.01%, 75% { box-shadow: …; } 75.01%, 100%{ box-shadow: …; } }
47. #pika { animation: walk 1s infinite; animation-timing-function: step-end; } @keyframes walk { 0%, 50%, 100% { box-shadow: …; } 25 { box-shadow: …; }
 75% { box-shadow: …; } }
48. http://codepen.io/shiningjason1989/pen/NALzYQ
49. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
50. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
 
    ⸈Ⰵ㼭兰ㄤ䍲➮⦛♳蒀
51. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
 
    ⸈Ⰵ㼭兰ㄤ䍲➮⦛♳蒀
 
    (*'
    鱲䧭
    $44
    僽♶僽〳⟃⨞䧭䊨Ⱘ
52. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
 
    ⸈Ⰵ㼭兰ㄤ䍲➮⦛♳蒀
 
    (*'
    鱲䧭
    $44
    僽♶僽〳⟃⨞䧭䊨Ⱘ
 
    牟㣼㼂頺鹎⻋涸麕玑⨞䧭
    $44
    ⹛殥
53. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
 
    ⸈Ⰵ㼭兰ㄤ䍲➮⦛♳蒀
 
    (*'
    鱲䧭
    $44
    僽♶僽〳⟃⨞䧭䊨Ⱘ
 
    牟㣼㼂頺鹎⻋涸麕玑⨞䧭
    $44
    ⹛殥
    
    ⢪欽
    "OZ1JYFMKT
    ⨞刿麕剤馱涸✽⹛
54. ⛓䖕䟝⨞涸✲
 
    雊淼⽓⚊〳⟃♳♴䊩〸獵⹛
 
    ⸈Ⰵ㼭兰ㄤ䍲➮⦛♳蒀
 
    (*'
    鱲䧭
    $44
    僽♶僽〳⟃⨞䧭䊨Ⱘ
 
    牟㣼㼂頺鹎⻋涸麕玑⨞䧭
    $44
    ⹛殥
    
    ⢪欽
    "OZ1JYFMKT
    ⨞刿麕剤馱涸✽⹛
    
    ⢪欽
    "'SBNF
    ⨞
    CJU
    涸
    73
    ✽⹛
55. 穡锸
56.  
 ⢪欽
    CPY
    TIBEPX
    殥
    CJU
    涸㕮
57.  
 $44
    涸
    "OJNBUJPO
    溫涸䖎㥪梖
58.  
 䧮剤㉬涮ⵌ⡹⦛㌨
59. 䊨㉂儘꟦
60. 㥶卓⡹㼩
    3FBDU
    剤莇馱
 
    3FBDU
    2VJDL
    5VUPSJBM
    俒㶶來勞
    
 
    3FBDU
    䘰鸠ⰅꟌ箁♳铭玑
    https://github.com/shiningjason1989/react-quick-tutorial https://4cats.teachable.com/courses/24hrs-react-101
61. 㥶卓⡹꨾銴⵹畮䊨玑䌌
    
    畮䊨玑䌌
62. 㥶卓⡹꨾銴⵹畮䊨玑䌌
    
    畮䊨玑䌌
    䧮姻㖈䪪䊨⡲㈢
63. 姹鵔⡹鷴麕⟃♴倰䒭澗鍑䧮
    &NBJM
    8FCTJUF
    (JU)VC shiningjason1989@gmail.com https://shiningjason1989.github.io https://github.com/shiningjason1989