Slick UI 애니메이션 만들기

Sep 17, 2025

어떻게

점점 더 자주, 디자이너 및 개발자는 맥락에서 모션 디자인의 중요성을 인정합니다. 사용자 경험 ...에 웹에서의 애니메이션은 더 이상 사용자를 기쁘게하고 와우 로우는 방법이 아니라 쉽고 재미 있고 기억에 남는 경험을 만드는 기능 도구입니다. 그리고 사용할 수있는 여러 가지 도구와 접근 방식이 있습니다. CSS 애니메이션 부트 스트랩 또는 HTML을 사용하는 기술을 사용하십시오.

사용자 인터페이스의 컨텍스트에서 애니메이션은 여전히 매우 새로운 필드입니다. 최상의 관행을 가르치거나 따를 수있는 UI 애니메이션의 일반적인 패턴을 보이는 많은 자원이 많지 않습니다. 대부분의 경우 실험에 관한 것입니다. 사용자 테스트 아마도 아마도 조금의 시련과 오류가 발생할 것입니다.

15 반응 형 웹 디자인 자습서

따라서이 튜토리얼에서는 혼동하지 않는 무언가를 만들고 일반적인 패턴을 따르고 세련된 것입니다. 이것은 회사 웹 사이트에서 자주 보는 팀 프로필 섹션이 될 것입니다. 이 아이디어는 각각이 가리가 나올 때 팀 / 직원에게 조금 더 많은 정보를 제공하는 것입니다. 튜토리얼 전역에서 우리는 Codepen을 사용하고 있지만 물론 자신의 즐겨 찾는 편집기 및 개발 환경을 대신 사용할 수 있습니다. 더 복잡한 사이트를 만드는 것을 기억하십시오. 웹 호스팅 당신이 당신을 위해 일하는 서비스를 가지고 있기를 확신해야합니다.

사이트를 만드는 직접적인 도구를 원하십니까? 훌륭한 것을 사용하십시오 웹 사이트 빌더 ...에

01. 설정하십시오

코드 쌍을 열고 새 펜을 만드는 것으로 시작하십시오. 우리는 부트 스트랩 4와 SASS (.scss)를 사용하고 있으므로 부트 스트랩 CSS와 JS를 리소스 링크로 포함하고 CSS를 SCSS로 설정하는 설정 내에 있는지 확인하십시오. 추가 해야하는 또 다른 리소스 링크는 우리가 우리의 사회 아이콘에 사용할 글꼴 굉장품입니다.

02. 컨테이너, 행 및 열을 만듭니다

컨테이너는 부트 스트랩이 기본 레이아웃 요소로 사용되며 기본 그리드 시스템을 사용하는 경우 필요합니다. 컨테이너 내에서 행을 추가해야합니다. 행은 열에 대한 래퍼이며 가능한 12에서 원하는 열 수와 중단 점이 무엇인지를 지정할 수 있습니다. 우리의 경우에는 중간 크기의 중단 점이있는 요소를 원하고 3 개의 열을 너비로 채 웁니다.

 & lt; div class = "컨테이너"& gt;
 & lt; div class = "행"& gt;
 & lt; div class = "col-md-3"& gt;
 & lt; 링크와 여기에 색상을 추가하십시오
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt;

03. 프로필 이미지 및 색상을 설정합니다

우리가 시작할 첫 번째 프로필 UI 요소는 여성 팀원을위한 것이고 그녀는 푸른 팀의 일부가 될 것입니다. 색상은 파란색이라는 클래스를 사용하여 지정되며 실제 색상은 결국 우리가 나중에 수행 할 SASS 변수를 사용하여 결국 정의됩니다. 그런 다음 사진을 추가하고 사진이라는 클래스를 제공해야합니다.

& lt; div class = "팀 블루"& gt; & lt; div class = "사진"& gt; & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg"alt = "libby"& gt; & lt; / div & gt; & lt; / div & gt;

04. 프로필 이름과 제목을 추가하십시오

The beginning of creating a team member entry showing that a team member photo, job description and social media information. — HTML의 한 마지막 부분은 이름, 제목 및 소셜 아이콘을 추가합니다.

추가 할 HTML의 마지막 비트는 이름, 제목 및 소셜 아이콘에 대한 마지막 DIV 태그 아래에 추가 될 마지막 DIV 태그 아래에 있습니다. 사회 아이콘을 위해 글꼴 멋진 목록을 사용하고 있으며 정렬되지 않은 목록 내에 배치됩니다.

 & lt; div class = "profile-txt"& gt;
      & lt; h1 class = "title"& gt; libby & lt; / h1 & gt;
      & lt; SPAN 클래스 = "위치"& gt; 웹 디자이너 & lt; span & gt;
   & lt; / div & gt;
          & lt; UL 클래스 = "소셜 아이콘"& gt;
       & lt; li & gt; & lt; a href = "class ="FA-FA-Facebook "& gt; & lt; / lli & gt;
       & lt; a href = "class ="fa FA-Twitter "& gt; & lt; / li & gt;
       & lt; a href = ""class = "fa fa-linkedin"& gt; & lt; / lli & gt;
       & lt; li & gt; & lt; a href = "class ="FA FA-DRIBBLE "& gt; & lt; / ll li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt;

05. SASS 변수를 설정합니다

Codepen을 사용하여 다음을 따르면 이미 Sass가 설치되어있을 준비가되어 있습니다. 펜 설정 아이콘 / 버튼을 클릭하고 CSS 전 처리기로 SCSS를 선택해야합니다. 그런 다음 우리는 모든 색상을 저장할 변수를 앞두고 추가 할 수 있습니다. 우리는 RGBA를 색상 값으로 사용하여 모든 색상의 불투명도를 더 의미있는 제어 할 수있게합니다.

 $ bluegradient : RGBA (103, 188, 223, .8);
$ lightgreen : RGBA (188, 219, 183, .5);
$ 그린 : RGBA (119, 180, 109, 0.5);
$ Green-Border : RGBA (171, 221, 164, 0.5);
$ BLUE : RGBA (80, 205, 227, 1);
$ Blue-Border : RGBA (147, 223, 236, 1);

06. 배경 이미지 업로드

물건을 더 매력적으로 보이게하기 위해 우리는 신체에 좋은 배경 이미지를 배치 할 것입니다. 여기서 우리는 첫 번째 변수 세트를 사용하고 배경 이미지를 밝은 녹색에서 파란색으로가는 기분 좋은 그라디언트 오버레이를 제공 할 수 있습니다. 그런 다음 우리의 배경 이미지를 완전히 반응시키기 위해보기 높이를 100V로 설정합니다.

 몸체 {
 배경 : 선형 그라데이션 (오른쪽, $ lightgreen, $ bluegradient), URL ( 'https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') 센터 없음;
 배경 크기 : 덮개;
 위치 : 상대;
 높이 : 100VH;
 }

07. 프로필 배경 및 이미지를 선택하십시오

각 팀 프로필에는 동일한 스타일이 주어지며 클래스 팀이 사용됩니다. 배경은 흰색이며 모든 컨텐츠가 중심을두고 위치가 관계가 상대로 설정되어 있는지 확인해야합니다. 그런 다음 프로필 이미지의 CSS를 포함 할 수 있습니다. 최상의 결과를 얻으려면 사용하는 원본 이미지가 200px 스퀘어보다 크지 않은 치수가 없는지 확인하십시오. 그러나 사진 CSS 규칙에서 이들의 높이와 너비를 변경합니다.

. eam {
 패딩 : 30px 0 40px;
 마진 - 상단 : 60px;
 배경 : #fff;
 텍스트 - 정렬 : 센터;
 오버플로 : 숨김;
 위치 : 상대;
 커서 : 포인터;
 박스 - 그림자 : 0 0 25px 1px RGBA (0,0,0,0.3);
 .photo {
 디스플레이 : 인라인 블록;
 너비 : 130px;
 높이 : 130px;
 마진 하단 : 50px;
 위치 : 상대;
 Z- 색인 : 1;
 }
 }

08. 애니메이션을 추가하십시오

An image show that the rollover animation bringing down a coloured circle from the top of the frame. — 우리는 그 위치에 대해 하단 비율을 설정하여 파란색 원의 양을 볼 수 있는지를 제어 할 수 있습니다.

우리가 추가 할 첫 번째 애니메이션은 프로파일 요소의 맨 위에있을 것입니다. 그 아이디어는 우리가 전체 요소 위에 마우스를 가져 가면 파란색 원형 모양이 움직일 것입니다. 우리는 이소의 위치를 적어두기 위해이 위치를 지정하여 볼 수있는 파란색의 양을 제어 할 수 있습니다. 그래서이 비율로 주위를 놀아라면이 효과가있는 방법에 대한 더 나은 아이디어를 얻을 수 있습니다. 당신은 결코 알지 못한다 : 당신은 더 나은 효과를 발견 할 수도 있습니다!

 .blue .photo : {
 내용 : "";
 너비 : 100 %;
 높이 : 0px;
 국경 반경 : 50 %;
 배경 : $ 블루;
 위치 : 절대;
 하단 : 130 %;
 오른쪽 : 0;
 왼쪽 : 0;
 변환 : 스케일 (3);
 전환 : 모든 .3s 선형 0s;
}
.Team : 호버 .photo : {
 높이 : 100 %;
}

09. 팀 사진 애니메이션

팀 사진은이 UI의 초점이며 일부 모양이나 형태로 애니메이션을 기대하는 가장 확실한 요소 일 것입니다. 이 단계에서 추가 할 CSS는 먼저 사진을 더 작은 원으로 바꾸고, 그런 다음 밝은 파란색 테두리가 추가되어 사진이 테두리와 함께 확장됩니다. 전환이 추가되면 훌륭한 유체 애니메이션을 얻을 수 있습니다.

 .PIC : {
 내용 : "";
 너비 : 100 %;
 높이 : 100 %;
 국경 반경 : 50 %;
 배경 : $ 블루;
 위치 : 절대;
 TOP : 0;
 왼쪽 : 0;
 Z- 색인 : 1;
}
. eam .photo img {
 너비 : 100 %;
 높이 : 자동;
 국경 반경 : 50 %;
 변환 : 스케일 (1);
 전환 : 모두 0.9s가 0s;
}
.blue : 호버 .photo img {
 상자 - 그림자 : 0 0 0 0 0 14px $ blue-border;
 변환 : 스케일 (0.6);
 }

10. 프로필 이름과 위치를 조정하십시오

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border. — 가리가 나면 밝은 파란색 테두리가 사진에 추가됩니다.

프로파일 이름과 위치는 조금 정리해야합니다. 이들은 애니메이션을하지 않지만 원하는 경우 자신의 애니메이션을 추가하지 못하게해서는 안됩니다. 아마도 사진의 크기 조정으로 인해 충분한 공간이있을 때 마우스 오버에서 약간 확장 할 수 있습니다.

 .profile-txt {
 마진 하단 : 30px;
 .Title {
 글꼴 크기 : 2rem;
 글꼴 무게 : 700;
 색상 : # 333;
 편지 간격 : 1.5px;
 텍스트 변환 : 대문자;
 마진 하단 : 6px;
 }
 .위치{
 디스플레이 : 블록;
 글꼴 크기 : 1rem;
 색상 : # 555;
 }
}

11. 사회 아이콘을 추가하십시오

사회 아이콘은 먼저 -100px 페이지의 맨 아래에 위치합니다. 그런 다음 우리가 그것 위로 마우스를 가져 가면, 하단 위치가 0으로 설정되고 전환이 추가되면, 이렇게하면 멋진 부드러운 애니메이션을 볼 수있게 해줍니다. 아이콘은 자신의 호버 상태가 주어지며 배경을 흰색과 아이콘으로 파란색으로 설정합니다.

 .blue .social-icons {
 너비 : 100 %;
 목록 스타일 : 없음;
 패딩 : 0;
 마진 : 0;
 배경 : $ 블루;
 위치 : 절대;
 하단 : -100px;
 왼쪽 : 0;
 전환 : 모두 0.6s가 쉽습니다.
 리 {
 디스플레이 : 인라인 블록;
 
 ㅏ {
 디스플레이 : 블록;
 패딩 : 8px;
 글꼴 크기 : 1rem;
 색상 : #fff;
 텍스트 장식 : 없음;
 전환 : 모두 0.5s가 쉽습니다.
 & amp; hover {
 색상 : $ BLUE;
 배경 : #fff;
 }
 }
 }
}
.Team : 호버 .social 아이콘 {
 하단 : 0px;
}

12. 녹색 팀 구성원을 만드십시오

조금만 섞기 위해 우리는 더 많은 회원을 우리 팀에 추가 할 수 있습니다. 이것을 위해 사용할 색상은 녹색이 될 것입니다. 그러나 먼저 HTML 섹션 / 파일로 돌아가서 우리가해야 할 일은 COL-MD-3 클래스를 복사하는 것입니다. - 행이 아니더라도 소셜 아이콘 아래의 마지막 DIV 태그로의 아래로 누르고 붙여 넣습니다.

& lt; div class = "팀 그린"& gt; & lt; div class = "사진"& gt; & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg"alt = "libby"& gt; & lt; / div & gt;

파란색 클래스를 녹색으로 변경하면 최종적으로 우리에게 동일한 애니메이션을 제공 할 모든 CSS를 추가 할 수 있습니다.

 .green : 호버 .photo img {
 상자 - 그림자 : 0 0 0 14px $ 그린 테두리;
 변환 : 스케일 (0.6);
 }
.green .photo : {
 내용 : "";
 너비 : 100 %;
 높이 : 0px;
 국경 반경 : 50 %;
 배경 : $ 그린;
 위치 : 절대;
 하단 : 135 %;
 오른쪽 : 0;
 왼쪽 : 0;
 변환 : 스케일 (3);
 전환 : 모든 .3s 선형 0s;
}
. green .social-icons {
 너비 : 100 %;
 목록 스타일 : 없음;
 패딩 : 0;
 마진 : 0;
 배경 : $ 그린;
 위치 : 절대;
 하단 : -100px;
 왼쪽 : 0;
 전환 : 모두 0.6s가 쉽습니다.
 리 {
 디스플레이 : 인라인 블록;
 ㅏ {
 디스플레이 : 블록;
 패딩 : 8px;
 글꼴 크기 : 1rem;
 색상 : #fff;
 텍스트 장식 : 없음;
 전환 : 모두 0.5s가 쉽습니다.
 & amp; hover {
 색상 : $ 녹색;
 배경 : #fff;
 }
 }
 }
}

그리고이 접근 방식의 아름다움은 다양한 색상 클래스에 대해 필요에 따라 반복 할 수 있으므로 UI 애니메이션을 정확하게 테마로 사용할 수있게합니다.

팀이있는 사이트를 구축하고있는 경우 신뢰할 수 있고 안전하게 지내는지 확인하십시오. 클라우드 스토리지 일을 응집력있게 유지하는 것.

이 기사는 원래 문제 307 년에 출판되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 구매 문제 307 또는 Net에 가입하십시오 ...에

UI 애니메이션의 INS 및 out에 대해 더 자세히 알고 싶습니까?

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018. — 스티븐 로버츠 (Steven Roberts)는 그의 이야기를 제공하고 있습니다 : 런던 생성시 전환을 넘어서

세련된 UI 애니메이션을 사용하여 사이트를 팝하고 스파클을 만들 수있는 방법에 대해 자세히 알고 싶다면 티켓을 집어 들었는지 확인하십시오. 런던 생성 ...에

프런트 엔드 디자이너 및 개발자는 현재 ASEMBLR.com을위한 창조적 인 개발자로 일하고있는 Steven Roberts가 그의 말을 전달할 것입니다. 웹은 단지 CSS와 함께 애니메이션의 가능성과 제한을 발견하면서 제공해야합니다.

런던 생성은 2018 년 9 월 19-21 일부터 열립니다. 지금 티켓을 가져 가라 ...에

관련 기사:

모바일 앱에서 애니메이션을 사용하는 방법
프로 디자인에 대한 프로 가이드
인터페이스 애니메이션을 설계하는 초보자 가이드

Slick UI 애니메이션 만들기

01. 설정하십시오

02. 컨테이너, 행 및 열을 만듭니다

03. 프로필 이미지 및 색상을 설정합니다

04. 프로필 이름과 제목을 추가하십시오

05. SASS 변수를 설정합니다

06. 배경 이미지 업로드

07. 프로필 배경 및 이미지를 선택하십시오

08. 애니메이션을 추가하십시오

09. 팀 사진 애니메이션

10. 프로필 이름과 위치를 조정하십시오

11. 사회 아이콘을 추가하십시오

12. 녹색 팀 구성원을 만드십시오

UI 애니메이션의 INS 및 out에 대해 더 자세히 알고 싶습니까?

어떻게 - 가장 인기있는 기사

Instagram에서 재 게시하는 방법

당신의 그림에서 척도를 달성하는 방법

친 화성 디자이너 : Pixel Persona 사용 방법

3ds Max에서 대규모 환경 마스터

유연한 회전 목마 작성

파스텔 작품에 드라마를 추가하는 방법

DAZ Studio와 Zbrush 사이를 이동하는 방법

현실적인 주름과 접기로 3D 옷을 만듭니다

카테고리