Divi에서 이미지, 모듈 및 행에 Ken Burns 호버 효과를 추가하는 방법
게시 됨: 2019-03-20Ken Burns 효과는 잠시 동안 주변에 있었습니다. 이 효과는 미국 다큐멘터리 작가인 Ken Burns가 패닝과 확대/축소 기술을 조합하여 자신의 영화에서 이미지를 생동감 있게 표현함으로써 유명해졌습니다. 웹 디자인에서 Ken Burns Effect는 배경 이미지에 생명을 불어넣는 인기 있는 디자인 기법임이 입증되었습니다.
Ken Burns 효과는 이미지의 호버 효과로 사용할 수도 있습니다. 분명히 당신은 전에 이것을 사용하는 것을 보았을 것입니다. 이미지에 생명을 불어넣기 위해 웹 디자이너는 확대/축소, 이동 및 회전을 일으키는 이미지에 호버 효과를 추가합니다.
Divi Builder에 Transform 효과가 출시되면서 이미지에 ken burns hover 효과를 가져오는 것이 그 어느 때보다 쉬워졌습니다. 이러한 변형 옵션을 사용하면 이미지를 원하는 대로 크기 조정(확대/축소), 이동(또는 팬) 및 회전할 수 있습니다. 그리고 이러한 변형을 이미지의 호버 상태에 적용할 수 있기 때문에 디자인 가능성은 거의 무한합니다.
이 튜토리얼에서는 Divi Builder를 사용하여 이미지와 행에 완전히 독특한 켄 번 호버 효과를 만드는 것이 얼마나 쉬운지 보여줄 것입니다.
시작하자.
엿보기
다음은 Divi의 변형 옵션으로 쉽게 수행할 수 있는 켄 화상 호버 효과를 살짝 엿본 것입니다.
기본 개념 설명
Ken Burns 호버 효과를 만들기 위한 기본 개념은 Divi의 새로운 변형 옵션을 사용하여 해당 이미지 위로 마우스를 가져갈 때 이미지의 크기를 조정하고, 배치하고, 회전하는 것입니다. 특정 비율만큼 scale transform 속성을 높여서 마우스를 가져가면 이미지가 더 커질 수 있습니다. 변환 변환 속성을 사용하여 x 및 y 축을 따라 이미지를 이동할 수 있습니다. 그리고 특정 각도 값(이 경우 x축 회전에 대한 각도 값)을 설정하여 회전 변형 속성을 사용하여 이미지를 회전할 수 있습니다. 마지막으로 전환 지속 시간(속도)과 속도 곡선을 제어하여 켄 번즈 호버 효과의 흐름 속도를 제어할 수 있습니다. 세 가지 변형 속성과 전환 속성이 함께 작동하여 사진에 생기를 불어넣는 켄 번즈 호버 효과를 만듭니다.
Divi가 제공하는 내장 설정을 사용하여 변형 속성과 전환 속성을 쉽게 미세 조정할 수 있습니다. 그러나 이 효과를 작동시키는 핵심은 이미지가 포함된 열에 적용해야 하는 간단한 CSS 라인(overflow:hidden)을 포함합니다. 이미지의 크기를 조정하고, 이동하고, 회전할 것이므로 이미지의 오버플로가 포함된 열 외부에서 숨겨지기를 원합니다.
기본 아이디어와 기능이 제자리에 있으면 Divi의 변형 옵션을 사용하여 이미지를 원하는 대로 정확하게 배치하는 것이 얼마나 쉬운지 놀랍습니다.
무료로 Ken Burns 호버 효과 예제 다운로드
무료 Ken Burns 호버 효과 예제를 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
zip 파일을 다운로드했으면 폴더의 압축을 풉니다. 다음으로 Divi Builder 이식성 기능을 사용하여 .json 레이아웃을 가져옵니다. 또는 Divi의 끌어서 놓기 기능을 사용하여 파일을 Divi Builder로 끌어다 놓기만 하면 됩니다. 그게 다야!
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
새 페이지 시작하기
가장 먼저 해야 할 일은 새 페이지를 만드는 것입니다. 그런 다음 페이지에 제목을 지정하고 프런트 엔드에 Divi Builder를 배포합니다. 그런 다음 "처음부터 빌드" 옵션을 선택합니다.
한 열 행의 이미지에 Ken Burns 효과 추가
이 첫 번째 기본 예에서는 한 열 행의 단일 이미지에 ken burns hover 효과를 추가하는 방법을 보여 드리겠습니다. 이 효과를 달성하기 위해 변환 옵션의 크기 조정, 변환 및 회전을 사용하겠습니다.
먼저 1열 행으로 새 섹션을 만듭니다. 그런 다음 행에 이미지 모듈을 추가합니다.
열 오버플로 숨기기
이미지 설정 업데이트를 시작하기 전에 행 설정을 열고 고급 탭을 클릭합니다. 그런 다음 열 기본 요소에 다음 사용자 지정 CSS를 추가합니다.
overflow: hidden;
이렇게 하면 이미지가 마우스 오버 시 더 큰 크기로 확장될 때마다 열 컨테이너를 넘어 이미지가 확장(또는 오버플로)되지 않습니다. 이것을 추가하지 않으면 이미지가 컨테이너에서 벗어나 페이지의 다른 요소를 숨깁니다. 기술적으로 이 CSS를 열 대신 행 기본 요소에 추가할 수 있지만 사용자 지정 행 패딩도 제거해야 합니다.
행 설정을 저장합니다.
이미지 추가
이제 이미지 모듈에 이미지를 추가할 수 있습니다. 이미지 모듈 설정을 열고 이미지를 추가합니다.
이미지가 열보다 상당히 큰지 확인하십시오. 이것은 마우스를 가져갈 때 이미지를 더 큰 크기로 조정할 때 이미지가 흐릿하게 보이지 않도록 하는 데 중요합니다. 1열 행의 기본 설정을 사용하는 경우 열의 최대 너비는 1080px입니다. 따라서 너비가 약 1500px, 높이가 900px인 이미지를 사용하고 있습니다.
중요: 일반적으로 이미지가 클수록 이미지 품질을 잃지 않고 이미지를 확장, 이동 및 회전해야 하는 공간이 커집니다.
변형 호버 효과 추가
이제 이미지가 준비되었으므로 이러한 변형 옵션을 사용하여 Ken Burns 호버 효과를 만들 차례입니다. 디자인 탭 토글로 이동하여 변환 옵션을 엽니다. 호버 효과를 활성화하고 호버 탭을 선택합니다. 이제 모든 변형 효과 사용자 정의가 이미지 모듈의 호버 상태에만 적용됩니다. 그런 다음 Transform Scale 탭에서 다음을 업데이트합니다.
변형 배율 x축(마우스 오버): 136%
변환 배율 y축(마우스 오버): 136%
그런 다음 변환 번역 탭을 클릭하고 다음을 업데이트합니다.
변환 x축 변환(마우스 오버): 3%
변환 Y축 변환(호버링): 9%
그러면 이미지가 왼쪽으로 3%, 아래로 9% 이동합니다. 이 특정 이미지의 경우 확대하여 커플을 기둥 뷰포트의 중앙으로 가져오는 효과를 사용하려고 했습니다.
기본적으로 변환 길이 값은 백분율이 아닌 픽셀 단위입니다. 이미지를 이동하는 데 픽셀을 사용할 수 있지만 백분율을 사용하면 위치가 더 민감하게 반응할 수 있습니다.
그런 다음 변환 회전 탭을 클릭하고 다음을 업데이트합니다.
변환 x축 회전(호버링): 6deg
전환 옵션 업데이트
마지막으로 전환 지속 시간(변환 호버 효과가 완료되는 데 걸리는 시간)과 속도 곡선(전환이 지속 시간 동안 속도를 변경할 수 있도록 하는 타이밍 기능)을 업데이트해야 합니다. 이 예에서는 호버에 대한 보다 극적인(그리고 고전적인) Ken Burns 효과를 위해 전환이 더 오래 걸리기를 원합니다. 이렇게 하려면 고급 탭으로 이동하여 다음과 같이 전환 옵션을 업데이트합니다.
전환 시간: 2000ms(또는 2초)
전환 속도 곡선: 선형(전환 속도가 지속 시간에 변경되지 않도록 함)
최종 결과
이제 최종 결과를 확인해보자. 아래 gif의 고르지 못한 부분에 현혹되지 마십시오. 라이브 사이트에서 전환이 정말 원활합니다.
3열 행의 여러 이미지에 Ken Burns 호버 효과 추가
여러 열의 이미지에 ken burns hover 효과를 추가하려는 경우 동일한 프로세스가 적용됩니다. 가장 중요한 것은 이미지가 포함된 각 열에 "overflow:hidden" CSS 스니펫을 추가하고 확인하는 것입니다.
위의 이전 예를 사용하여 행의 열 구조를 3열 레이아웃으로 변경합니다.
다음으로, 각 열의 오버플로를 숨길 사용자 정의 CSS 스니펫으로 행 설정을 업데이트하십시오.
열 1 주요 요소 CSS:
overflow:hidden;
2열 주요 요소 CSS:
overflow:hidden;
3열 주요 요소 CSS:
overflow:hidden;
다음으로 이미지 모듈을 복사하여 2열과 3열에 붙여넣습니다.
그게 다야 다음은 최종 결과입니다.
이 디자인은 갤러리 그리드 레이아웃에 더 일반적이므로 호버 애니메이션을 선명하게 하기 위해 전환 시간을 조금 더 빠르게 하고 싶을 것입니다. Divi의 다중 선택 기능을 사용하면 이 작업을 쉽게 수행할 수 있습니다. ctrl 또는 cmd를 누른 상태에서 모든 이미지 모듈을 선택하십시오. 그런 다음 이미지 중 하나에서 설정 톱니바퀴 아이콘을 클릭하여 요소 설정 모달을 엽니다.
이제 요소 설정에서 업데이트한 내용이 모든 이미지에 한 번에 적용됩니다. 다음과 같이 요소 설정에서 전환 옵션을 업데이트합니다.
전환 시간: 500ms
새로운 전환 지속 시간이 적용됩니다.
배경 이미지가 있는 모든 모듈에 Ken Burns 호버 효과 추가
Ken Burns 호버 효과는 이미지 모듈 이외의 모듈에도 사용할 수 있습니다. 이것은 모듈의 배경 이미지와 함께 텍스트나 아이콘을 변형하려는 경우에 적합합니다.
다음은 텍스트 모듈에 Ken Burns 효과를 추가하는 방법입니다.
먼저 한 열 행이 있는 새 일반 섹션을 만듭니다. 그런 다음 행에 텍스트 모듈을 추가합니다.
다음 콘텐츠로 텍스트 모듈을 업데이트합니다.
<h1>We're Engaged!</h1>
그런 다음 모듈에 배경 이미지를 추가합니다. 마우스를 가져갈 때 이미지의 크기를 조정하고 이동할 수 있도록 충분히 큰 이미지를 추가해야 합니다.
그런 다음 다음과 같이 제목 디자인 옵션을 업데이트합니다.
제목 글꼴: Prata
제목 텍스트 크기: 6vw
맞춤 패딩: 상단 10vw, 하단 10vw, 왼쪽 3vw
전환 시간: 5000ms
이제 다음 변환 설정을 텍스트 모듈에 추가합니다.
변형 배율 x축(마우스 오버): 118%
변환 배율 y축(마우스 오버): 118%
변환 x축 변환(호버): 6%
Transform Translate y축(호버): 6%
이제 열에 대한 다음 사용자 정의 CSS로 행 설정을 업데이트하십시오.
열 주요 요소 CSS:
overflow:hidden;
이제 결과를 확인하십시오.
마우스를 올리면 텍스트와 배경 이미지가 어떻게 함께 변형되는지 확인하십시오.
Ken Burns 호버 효과와 추가 호버 효과 결합
또한 모듈에 적용된 Ken Burns Hover 효과를 추가 효과와 결합하여 더 많은 창의력을 발휘할 수 있습니다.
Ken Burns 호버 효과와 필터 효과 결합
필터 효과를 잊어버린 경우 특히 호버에서 모듈에 창의적인 스타일을 추가할 수 있는 좋은 방법은 필터 효과입니다. 그리고 이러한 필터 효과를 변형 효과와 결합하여 꽤 독특한 호버 전환을 만들 수 있습니다.
보여주기 위해 텍스트 모듈에 ken burns 효과를 추가한 위의 예를 사용하겠습니다. 텍스트 모듈에는 이미 변환 호버 효과가 있으므로 추가 필터 효과를 추가하여 이미지를 흑백에서 컬러로 변경해 보겠습니다.
텍스트 모듈 설정을 열고 다음 필터 옵션을 업데이트하십시오.
채도(기본값): 0%
채도(마우스 오버): 100%
이 전환은 기본적으로 텍스트 모듈을 0% 채도로 설정하여 색상을 제거하여 흑백으로 만듭니다. 마우스를 가져갈 때 다시 100%로 설정하면 이미지의 원래 색상이 다시 추가됩니다.
다음은 ken burns hover 효과와 결합된 필터 효과의 최종 효과입니다.
Ken Burns 호버 효과와 행 변환 효과 결합
이 예에서는 ken burns hover 효과를 행에 추가된 추가 변형 효과와 결합하는 방법을 보여 드리겠습니다. 아이디어는 변형 효과를 사용하여 기본 상태에서 행의 크기를 조정하고 회전한 다음 마우스를 가져갈 때 원래 디자인을 복원하는 것입니다.
참고: 이 기술은 실제로 단일 모듈이 있는 1열 행에서만 잘 작동합니다. 방문자가 모듈과 행 위로 동시에 마우스를 가져가야 하기 때문입니다. 따라서 모듈은 행의 전체 높이와 너비를 차지해야 합니다. 추가 모듈 또는 간격은 호버 상태를 깨고 문제를 일으킵니다.
이를 위해 이미 ken burn hover 효과와 추가 필터 효과를 결합한 현재 텍스트 모듈 디자인을 유지합니다. 이것은 실제로 트리플 호버 효과입니다!
텍스트 모듈이 포함된 행의 설정을 엽니다. 그런 다음 다음을 업데이트합니다.
맞춤 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px
이것은 텍스트 모듈과 행 사이에 추가 공백이 없는지 확인하기 위한 것입니다. 
다음으로 다음과 같이 행에 상자 그림자를 추가합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 흐림 강도: 36px
그림자 색상: rgba(0,0,0,0.17)
이제 다음 변형 효과를 추가합니다.
변형 배율 x축(기본값): 70%
변형 배율 x축(마우스 오버): 100%
변환 배율 y축(기본값): 70%
변환 배율 y축(마우스 오버): 100%
변환 Y축 회전(기본값): 19deg
변환 y축 회전(호버링): 0deg
변환 Z축 회전(기본값): 23deg
변환 Z축 회전(호버링): 0deg
이제 최종 결과를 확인해보자.
전체 콘텐츠 행에 Ken Burns 호버 효과 추가
궁금한 경우를 대비하여 Ken Burns 호버 효과를 사용하여 호버링 시 전체 콘텐츠 행에 생명을 불어넣을 수도 있습니다. 이것은 방문자에게 혼란을 주거나 주의를 산만하게 하기 때문에 콘텐츠가 많은 행에는 그다지 실용적이지 않습니다. 그러나 헤더와 같은 경우에는 유용한 디자인 기술이 될 수 있습니다. 트릭은 섹션에 사용자 정의 CSS 스니펫 "overflow:hidden"을 추가하는 것입니다. 그런 다음 행에 변형 효과를 추가할 수 있습니다.
마지막 생각들
Ken Burns Effect가 나온 지 꽤 되었지만 Divi에서 이미지와 모듈을 위한 꽤 독특한 호버 효과를 만드는 데 여전히 유용할 수 있습니다. 트릭은 놀랍도록 직관적인 Divi 변환 옵션을 사용하는 방법을 아는 것입니다. 이 튜토리얼에서 제공되는 이 예제는 개념을 소개하고 자신의 사용법에 약간의 영감을 제공하기 위한 것입니다. 변환 옵션을 Divi에서 사용할 수 있는 다른 모든 스타일 옵션과 결합하는 모든 방법에 대해 생각하면 수많은 아이디어가 떠오르기 시작합니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!