Lichin

contact: [email protected]

I am

學校近日在寫NCTU online-judge的平台,我有幸能參與其中的前端設計。以下是我製作的 sign-in form,以及幾個小技巧分享。


# form上使用的技巧

  1. Sign-in/sign-out 標籤: hover animation,以及轉換登入註冊時的animation。
  2. Input: 輸入時 focus animation , jquery tab keycode ignore。
  3. Form: button hover & click animation , slide effect。

# 技巧分享

  1. 利用css :hover 搭配 transition 可以做出更多動畫。
  2. 利用 transitioncubic-bezier() timing-function 動畫會更有趣。
  3. sign in/out 其實是一個 width 200% 的 div,其動畫是利用 parent element 的 overflow:hidden,搭配左右移100%來呈現 slide animation。
  4. 在用tab來跳至下一個 input 時,會發生 slide animation bug,因此找到 jquery keycode event,ignore 使用者按下的tab鍵來解決問題。

See the Pen NCTUOJ-form by lichin-lin (@lichin-lin) on CodePen.

# 參考

  1. NCTUOJ
  2. jquery tab keycode ignore - Stackoverflow
  3. CSS Form design


blog comments powered by Disqus

Published

26 February 2016

Tags

title

yo! trying to alert