手触りの良いUIを 名刺表現の巻

2019/6/12 Sansan社内LT大会用資料です

Transcript

1. 
   -5େձ ख৮Γͷྑ͍6*Λ
   
   ໊ࢗදݱͷר
2. ࣗݾ঺հ Eightࣄۀ෦ ओʹϑϩϯτΤϯυ୲౰ ࠾༻αʔϏε࡞ͬͯ·͢ https://8card.net/p/shuhei-aoyama
3. PC൛Webը໘ ໊ࢗը૾ ද ཪ
4. ͔ͤͬ͘දཪ͋ΔͳΒ ͘Δͬͱճస͍ͤͨ͞
5. ΍ͬͯΈͨ ΞχϝʔγϣϯͳͷͰҎԼϦϯΫͳͲͰݟͯΈ͍ͯͩ͘͞ https://8card.net/p/shuhei-aoyama
6. ͘͠Έ ը૾Λ̎ຕ༻ҙ͠·͢ <div> <img src=‘image-front.png’/> <img src=‘image-back.png’/> </div> image-front.png image-back.png
7. ͘͠Έ ॎํ޲ͷҐஔΛௐ੔ͯ͠ॏͶ·͢ <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’ class=‘back’/> </div> .back { margin-top: -1 * imageHeight; } image-front.png image-front.png
8. ͘͠Έ ยํΛཪฦ͠ʹ͠·͢ image-front.png image-front.png <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’ class=‘back flipped’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
9. ͘͠Έ ཪଆʹͳΔը૾ͷclassΛ੾Γସ͑·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front flipped’/> <img src=‘image-back.png’ class=‘back’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
10. ͘͠Έ ը૾͕ཪଆʹͳͬͨͱ͖ʹඇදࣔʹ͠·͢ ճసͷͨΊͷΞχϝʔγϣϯΛ௥Ճ͠·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’ class=‘back flipped’/> </div> … ུ img { backface-visibility: hidden; transition: transform .3s; } image-front.png
11. ·ͱΊ • දཪ͋ΔΑ͏ͳUIͳΒճస΋͋Γ • ख৮Γͷ͍͍UIΛ࡞͍͖͍ͬͯͨ
12. ͪͳΈʹ ΞϓϦ͸౰વͷ͝ͱ͘࠷ॳ͔Β΍ͬͯΔ ʘ(^o^)ʗ