CSS애니메이션 2

css Animation을 만들어주는 무료 라이브러리 모음

Animation.css npm으로 간단히 설치가 가능하며 설치된 이후 해당 css를 CDN혹은 파일로 import 해놓으면 class 를 통해서 Animation을 이용할 수 있다. 위 사이트에서 실제로 제공되는 애니메이션 효과도 모두 확인해볼 수 있다. 간단하지만 매우 강력한 라이브러리 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-..

FrontEnd/css 2022.03.30

UX 향상을 위한 micro-interactions(마이크로인터랙션)의 필요성과 Vue.js로 만든 마이크로인터랙션 예시 코드

🎉 마이크로 인터랙션 요즘 SNS에서 흔히 볼 수 있는 인스타그램의 "좋아요", 트위터의 경우 리트윗은 사용자들이 작은 동작으로 해당 게시물에 피드백을 주는 좋은 방법이다. 마이크로 인터랙션은 사용자들이 홈페이지에서 하는 작은 행동들을 어떠한 변화를 주었는지를 사용자 경험으로써 느낄 수 있게 해 준다. 자신이 행한 특정 행동에 자연스러운 UI 피드백을 주어 구구절절한 설명이 없이도 사용자는 변화를 알아차릴 수 있도록 시각화하며 오류 및 다음 행동들을 지시할 수 있게 한다. 왜 마이크로 인터랙션을 사용해야 하는가? 마이크로 인터랙션으로 우리는 사용자에게 어떠한 일이 지금 일어나고 있는지 다음 목표를 위해 어떠한 일을 진행해야 하는지 기다림 동안 페이지 이탈을 방지시켜주는 등의 기능을 제공할 수 있습니다. ..

FrontEnd/Vue.js 2021.03.01