초보자 개발자를위한 마이크로 인터랙션 튜토리얼 : CSS 및 JavaScript로 대화 형 “좋아요”버튼을 만드는 방법

초보자를위한 마이크로 인터랙션 튜토리얼


미세한 상호 작용이 멋지다고 말하는 것이 안전하다고 생각합니다. 웹 사용자 – 우리 모두는 보편적으로 그들을 즐깁니다. 알림 여부에 관계없이 사용자 환경이 크게 개선됩니다. 웹 사이트 또는 웹 도구가 미묘하고 친근한 방식으로 생생하게 만들어 사용자가 전체 상호 작용을 조금 더 즐기게합니다..

그 정신에서, 나는 당신에게 빠른 마이크로 상호 작용 자습서를 제공하고 멋진 만드는 방법을 보여주고 싶습니다 "처럼" 귀하의 사이트에 대한 버튼. 최소한의 코드로. 여기 실제로 작동합니다.

엄지 손가락 버튼이 정말 흥미롭지 않습니까? 해보자!

그러나 먼저 :

처음에 마이크로 상호 작용을 방해하는 이유?

여기서 너무 설득 시키려고하지는 않지만 몇 가지만 살펴 보겠습니다..

마이크로 인터랙션은 한동안 존재 해 왔으며 – 전체 책 그들에 대해 쓴. 또한 실제로 얼마나 유용하고 효과적인 지에 대한 많은 실험과 연구가있었습니다..

가장 주목할만한 연구 기관 중 하나 인 Nielsen Norman Group은 미세한 상호 작용을보다 자세히 조사했습니다. 2018 년에 밀접하게. 결론에 따르면, 마이크로 상호 작용은 무엇보다 참여를 장려하고 브랜드 커뮤니케이션을 통해 사용자 경험을 향상시키는 것으로 입증되었습니다.

요컨대, 마이크로 인터랙션은 올바르게 사용하고 너무 많이 사용하지 않으면 실제로 유익 할 수 있습니다. 오늘, 우리는 마이크로 상호 작용의 간단한 예를 보여 드리겠습니다 :

마이크로 인터랙션 튜토리얼 : 엄지 손가락 버튼의 마크 업 및 기본 CSS

�� 참고; 하단에는 직접 코드를 작성하지 않아도되는 몇 가지 옵션이 있습니다..

우선, 우리는 그것을 작동시키기 위해 좋은 오래된 HTML과 CSS 마술이 필요합니다. 구조는 매우 간단합니다.

우리는 like 아이콘 자체에 SVG 태그를 사용할 것입니다. 멋진 글꼴; 당신은 대부분의 아이콘을 찾을 수 있습니다 여기. SVG 태그의 너비 및 높이 속성을 조정하기 위해 아래 HTML을 사용합니다.

이제 CSS의 기초를 다룰 것입니다. 여기서 일어나고 싶은 것은 우리의 버튼처럼보기 좋게하고 모든 것을 화면 중앙에 두는 것입니다. 우리는 이미 클릭 (활성 수업) 할 때 수업을 전환 할 것임을 알고 있으므로이를 고려해야합니다. 활성화되면 아이콘을 파란색으로 채우고 그렇지 않으면 다음과 같이 회색으로 채 웁니다.

신체 {
디스플레이 : 플렉스;
정렬 항목 : 중심;
정당화 내용 : 센터;
높이 : 100vh;
}

.좋아요 버튼 {
디스플레이 : 플렉스;
정렬 항목 : 중심;
정당화 내용 : 센터;
}

.like-button.active {
-웹킷 애니메이션 : 팝 0.9s 둘 다;
애니메이션 : 팝 0.9s 둘 다;
}

.좋아요 버튼 svg {
불투명도 : 1;
}

.버튼처럼 svg 경로 {
채우기 : # 333;
전환 : 채우기 .4 초 여유;
}

.like-button.active svg 경로 {
채우기 : # 2196f3;
}

우리가 원하는 또 다른 것은 버튼이 활성화 될 때 사용되는 팝 애니메이션입니다. 그래서 우리는 이것을 CSS 파일에 추가 할 것입니다.

@ -webkit-keyframes pop {
0 % {
-웹킷 변환 : scale3d (1, 1, 1);
변환 : scale3d (1, 1, 1);
}
30 % {
-웹킷-변형 : scale3d (1.25, 0.75, 1);
변환 : scale3d (1.25, 0.75, 1);
}
40 % {
-웹킷-변환 : scale3d (0.75, 1.25, 1);
변환 : scale3d (0.75, 1.25, 1);
}
50 % {
-웹킷-변형 : scale3d (1.15, 0.85, 1);
변환 : scale3d (1.15, 0.85, 1);
}
65 % {
-웹킷 변환 : scale3d (0.95, 1.05, 1);
변환 : scale3d (0.95, 1.05, 1);
}
75 % {
-웹킷-변환 : scale3d (1.05, 0.95, 1);
변환 : scale3d (1.05, 0.95, 1);
}
100 % {
-웹킷 변환 : scale3d (1, 1, 1);
변환 : scale3d (1, 1, 1);
}
}

@keyframes pop {
0 % {
-웹킷 변환 : scale3d (1, 1, 1);
변환 : scale3d (1, 1, 1);
}
30 % {
-웹킷-변형 : scale3d (1.25, 0.75, 1);
변환 : scale3d (1.25, 0.75, 1);
}
40 % {
-웹킷-변환 : scale3d (0.75, 1.25, 1);
변환 : scale3d (0.75, 1.25, 1);
}
50 % {
-웹킷-변형 : scale3d (1.15, 0.85, 1);
변환 : scale3d (1.15, 0.85, 1);
}
65 % {
-웹킷 변환 : scale3d (0.95, 1.05, 1);
변환 : scale3d (0.95, 1.05, 1);
}
75 % {
-웹킷-변환 : scale3d (1.05, 0.95, 1);
변환 : scale3d (1.05, 0.95, 1);
}
100 % {
-웹킷 변환 : scale3d (1, 1, 1);
변환 : scale3d (1, 1, 1);
}
}

그만큼 "상호 작용" 이 마이크로 인터랙션 튜토리얼의 일부

이제 기본 스타일을 벗어 났으므로 이제 실제 상호 작용을 처리해야합니다. 즉, JavaScript를 의미합니다!

우선, 주어진 간격 (최소 및 최대) 사이에서 임의의 정수를 생성하는 JavaScript 함수가 필요합니다.

함수 randomInt (분, 최대) {
반환 Math.floor (Math.random () * (max-min + 1) + min);
}

다음으로 +1 또는 -1을 무작위로 반환하는 임의의 음수 또는 양수 값을 가질 수있는 다른 함수가 필요합니다.

함수 plusOrMinus () {
Math.random ()을 반환 < 0.5? -1 : 1;
}

이제 실제 상호 작용 처리를 위해; 코드를 살펴보고 올바르게 설명하겠습니다.

  • 먼저, 버튼에 변수를 저장하고 클릭 이벤트 리스너를 추가합니다.
  • 버튼을 클릭하면 preventDefault () 함수를 추가하여 원하지 않는 일이 발생하지 않도록합니다..
  • 그 후에, 우리는 이전에 CSS를 통해 파란색으로 스타일링 된 버튼에 활성 클래스를 추가 할 것입니다.
  • 그런 다음 아직 정의되지 않은 generateClones () 함수를 실행하여 버튼을 매개 변수로 전달합니다..

let 버튼 = document.querySelector (".좋아요 버튼");

button.addEventListener ("딸깍 하는 소리", 함수 (e) {
e.preventDefault ();
this.classList.toggle ("유효한");
generateClones (this);
});

이제 generateClones () 함수를 정의하고 다음 단계를 수행해 보겠습니다.

  1. 먼저 무작위 복제본 수를 결정 해 봅시다. 아이콘의 복제본을 2-4 개 복제합니다. 우리는 이전에 정의 된 randomInt () 함수를 사용할 것입니다.
  2. 그런 다음 각 클론에 대해 버튼 내부의 SVG 태그를 "모델" cloneNode (true) JavaScript 함수를 사용하여 새 변수로 복제하십시오. 또한 랜덤 정수 생성기 함수를 사용하여 클론의 크기를 5에서 16 사이로 정의합니다.
  3. 다음으로 클론을 버튼에 추가하고 이전에 생성 된 숫자로 너비와 높이를 설정하고 버튼과 독립적으로 이동할 수 있도록 위치를 절대 위치로 만듭니다..
  4. 우리가 필요로하는 또 다른 것은 클론의 전환입니다..
  5. 이제 아이콘을 움직일 실제 변형을 추가하기 위해 약간 미쳤습니다. 우리는 클론이 버튼 가운데에서 바깥쪽으로 무작위로 이동하기를 원합니다. randomInt () 및 plusOrMinus () 함수의 조합을 사용하여 translate3d CSS 속성을 사용하여 XY 축에서 클론을 이동합니다. 우리는 또한 "마구 자르기", 다른 방식으로는 적용되지 않기 때문에 간단한 setTimeout () 함수를 추가하면이를 달성하는 데 도움이됩니다. 동시에 불투명도를 0으로 이동시켜 클론을 사라지게합니다.
  6. 클론을 삭제합니다. 모든 재즈 작업이 끝나면 DOM을 정리해야합니다. 따라서 1 초 후에 DOM에서 복제본을 제거 할 또 다른 setTimeout () 함수가 필요합니다..

generateClones (버튼) {
// 1. 클론을 생성하고 설정된 숫자를 반복
복제하자 = randomInt (2, 4);
for (1 =하자; <= 클론; it ++) {
// 2. 변수에 SVG 태그 복제본을 가져 와서 임의 크기 생성
복제 = button.querySelector ("svg"..loneNode (true),
크기 = randomInt (5, 16);
// 3. 클론을 버튼에 추가하고 너비 / 높이 / 위치를 변경합니다
button.appendChild (복제);
clone.setAttribute ("폭", 크기);
clone.setAttribute ("신장", 크기);
clone.style.position = "순수한";
// 4. 화려한 전환 효과 추가
clone.style.transition =
"0.5 초 큐빅 베 지어 변환 (0.12, 0.74, 0.58, 0.99) 0.3 초, 불투명도 1 초 완화";
// 5. CSS가 준수하도록 setTimeout 함수를 사용하여 아이콘을 바깥쪽으로 애니메이션.
let animTimeout = setTimeout (function () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"픽셀, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. 0.9 초 후에 클론 제거
removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (복제);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

그게 다야! 우리는 끝까지 그것을 만들었습니다! 아래에 CodePen 예제가 있습니다.

펜을보십시오
버튼처럼
에 의해 Andrei Băicuș (aba)
의 위에 코드 펜.

이것을 통해 주셔서 감사합니다!

WordPress에 마이크로 상호 작용을 추가하는 다른 옵션

수동으로 코드를 작성하는 것이 전부가 아닌 경우 실제로는 모든 부분에서 작동하는 방식에 대해 걱정할 필요없이 사이트에서 미세한 상호 작용을 얻는 데 사용할 수있는 소수의 WordPress 플러그인이 있습니다..

먼저 그것을 애니메이션! CSS3를 사용하여 페이지의 거의 모든 요소를 ​​애니메이션하는 플러그인.

예를 들어, 단추 나 텍스트를 추가 한 다음 클릭시 특정 방식으로 애니메이션되도록 설정할 수 있습니다..

플러그인이 수행 할 수있는 작업의 예는 다음과 같습니다. 비디오 ��.


그것을 애니메이션!

저자 : eLEOPARD 디자인 스튜디오


100 % 등급


40,000+ 설치


4.7.0 필요

더 많은 정보

animate-it.2.3.7.zip

현재 버전 : 2.3.7

최종 업데이트 : 2020 년 3 월 20 일


100 % 등급


40,000+ 설치


4.7.0 필요

WordPress.org 플러그인 페이지


그것을 애니메이션!

다른 플러그인과 편집자가 가장 좋아하는 플러그인 중 하나는 쇼트 코드 궁극.

다양한 단축 코드 중에서 간단한 애니메이션을위한 코드가 있습니다. 애니메이션의 동작 방식에 대한 사전 설정이 있으며 애니메이션이 될 블록 안에 거의 모든 것을 넣을 수 있습니다.

애니메이션 버튼의 예는 다음과 같습니다 (참고 : 애니메이션이 뷰포트로 처음 스크롤 될 때만 작동합니다. 보이지 않는 경우 페이지를 새로 고침).

클릭 해주세요


워드 프레스 단축 코드 플러그인 — 단축 코드 Ultimate

저자 : 블라디미르 아노 킨


98 % 등급


800,000+ 설치


WP 4.6 이상 필요

더 많은 정보

shortcodes-ultimate.5.9.0.zip

현재 버전 : 5.9.0

최종 업데이트 : 2020 년 5 월 24 일


98 % 등급


800,000+ 설치


WP 4.6 이상 필요

WordPress.org 플러그인 페이지


워드 프레스 단축 코드 플러그인 — 단축 코드 Ultimate

이 두 플러그인은 페이지의 특정 요소에 애니메이션을 적용하고 사용자가 상호 작용할 때 조금 더 크게 보이도록 충분한 옵션을 제공해야합니다. 물론, 당신은 그들과 함께 가고 싶지 않지만 사용자가 주요 행동 유도와 상호 작용할 때 추가로 조금씩 움직여주는 것이 많은 도움이 될 수 있습니다..

마이크로 인터랙션에 대해 어떻게 생각하십니까?이 마이크로 인터랙션 자습서를 잘 활용하고 사이트에 무언가를 추가하는 것을 고려하고 있습니까? 의견에 알려주십시오.

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map