호버에서 애니메이션 GIF로 배경 이미지를 전환하는 방법
게시 됨: 2019-06-14호버에서 애니메이션 GIF로 배경 이미지를 전환하는 것은 콘텐츠에 생기를 불어넣는 동시에 제품이나 서비스에 대한 멋진 일러스트레이션을 제공하는 좋은 방법이 될 수 있습니다. 예를 들어, 특정 소프트웨어 제품의 기능을 홍보하는 경우 애니메이션 GIF는 제품 기능의 측면을 설명하는 데 도움이 될 수 있습니다. 그러나 처음에 해당 GIF를 표시하는 대신 마우스를 가져가면 애니메이션 버전(또는 GIF)으로 대체되는 해당 기능의 스틸 스크린샷을 표시할 수 있습니다.
이 튜토리얼에서는 마우스를 가져가면 애니메이션 GIF가 있는 배경(정지) 이미지를 전환하는 광고 문구를 만드는 방법을 보여 드리겠습니다. Snagit(화면 캡처 소프트웨어)를 사용하여 스크린샷과 GIF를 만드는 방법부터 시작하겠습니다. 그런 다음 배경 이미지를 광고 문구로 구현하여 호버를 켜는 방법을 살펴보겠습니다. 이미지의 실제 전환은 Divi의 배경 호버 옵션을 사용하면 매우 쉽습니다.
이 디자인은 디자인을 정적인 상태로 유지하고 사용자가 콘텐츠와 상호 작용할 때마다 참여를 유도하는 데 도움이 됩니다.
시작하자.
엿보기
호버 레이아웃에서 무료로 GIF 배경 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder가 활성화된 새 페이지로 드래그하면 됩니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
YouTube 채널 구독
시작하려면 다음이 필요합니다.
- Divi 테마가 설치되고 활성화되었습니다.
- 스크린샷을 찍고, 화면 비디오를 녹화하고, GIF를 만들 수 있는 화면 캡처 소프트웨어(또는 도구 조합). 이 튜토리얼에서는 Snagit이 블로그 게시물과 튜토리얼에 매일 사용하는 올인원 솔루션이기 때문에 주로 Snagit을 사용할 것입니다.
- 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
그런 다음 Divi에서 일부 호버 탭을 만들기 시작할 수 있는 빈 캔버스가 생깁니다.
1부: 스크린샷 및 GIF 만들기
이 디자인의 경우 블러브 모듈의 스틸 배경 이미지로 표시할 스크린샷을 만들고 싶습니다. 그런 다음 제품 작동 방식에 대한 짧은 그림과 함께 정지된 배경 이미지에 생명을 불어넣는 GIF(애니메이션 이미지)를 만들고 싶습니다. 그 비결은 호버에서 한 이미지를 다른 이미지로 전환할 때 부드럽게 전환되도록 충분히 비슷하게 보이는 이미지와 GIF를 만드는 것입니다.
두 개의 이미지가 생성되면 정지 이미지를 초기 배경 이미지로 사용할 수 있습니다. 그런 다음 blurb 모듈 위로 마우스를 가져갈 때 배경 이미지를 gif 이미지로 전환할 수 있습니다.
스크린샷과 GIF를 만들려면 Snagit을 사용하겠습니다. 무료 소프트웨어는 아니지만 사용하기 정말 쉽고 스크린샷을 만들고, 화면을 녹화하고, GIF로 은밀한 화면 녹화를 한 곳에서 모두 할 수 있습니다.
스크린샷 정지 이미지 만들기
스크린샷을 만들려면 Snagit을 열고 캡처 상자를 엽니다. 그런 다음 화면의 영역을 선택하여 이미지를 캡처하도록 선택하십시오. 이렇게 하면 화면에서 이미지로 캡처할 영역을 드래그할 수 있습니다. 화면 캡처를 초기화하려면 캡처 버튼을 클릭하세요.
그런 다음 이미지로 캡처하려는 화면 영역 주변의 캡처 영역을 클릭하고 끕니다.
이미지를 컴퓨터에 저장합니다. 그런 다음 Snagit Capture 상자를 다시 열고 화면 영역을 선택하여 비디오를 캡처하도록 선택합니다. 화면 캡처를 초기화하려면 캡처 버튼을 클릭하세요.
그런 다음 캡처하고 비디오 클립으로 녹화하려는 화면 영역 주변의 캡처 영역을 클릭하고 끕니다. 정지 이미지와 gif 사이를 보다 매끄럽게 전환하려면 이미지에 대해 수행한 것과 동일한(또는 가능한 한 가깝게) 비디오에 대해 동일한 영역을 캡처하고 싶을 것입니다.
준비가 되면 녹음 버튼을 클릭하고 녹음하고 싶은 데모를 진행합니다.
완료되면 중지를 클릭하여 녹음을 중지합니다. 그런 다음 Snagit 편집기에서 비디오 클립을 편집할 수 있습니다. 편집이 끝나면 비디오 옆에 있는 Gif 버튼을 클릭하여 비디오에서 GIF를 만듭니다.
GIF 만들기 팝업에서 필요에 따라 출력 설정을 수정합니다. gif가 반복되도록 루핑을 활성화하십시오. 그런 다음 만들기 버튼을 클릭합니다.
gif가 생성되면 컴퓨터에 저장합니다.
이제 Divi에서 디자인에 추가할 준비가 된 스틸 이미지와 gif 이미지가 있습니다.
2부: 호버 시 애니메이션 GIF 이미지로 배경 이미지를 전환하는 블러브 만들기
아직 하지 않았다면 새 페이지를 만들고 Divi Builder를 배포하여 프런트 엔드에서 빌드하십시오. 그런 다음 두 개의 열 행이 있는 새 일반 섹션을 만듭니다.
1열에 블러브 모듈을 추가합니다.
그런 다음 다음과 같이 콘텐츠 설정을 업데이트합니다.
본문: "본문 텍스트가 여기에 표시됩니다."
아이콘 사용: 예
아이콘: 클라우드(스크린샷 참조)
기본 배경 이미지 추가
다음으로 다음과 같이 기본 배경 이미지를 광고 문구에 추가합니다.
배경 이미지: 생성한 배경 이미지(스틸 스크린샷)를 업로드합니다.
배경 이미지 크기: 맞춤(전체 이미지가 계속 보이도록 합니다)
배경 이미지 위치: 상단 중앙(이렇게 하면 이미지가 광고의 상단에 유지됨)
호버 배경 GIF 이미지 추가
초기 배경 이미지가 준비되면 배경 호버 옵션을 배포하고 호버 탭을 선택합니다. 그런 다음 호버 상태에서 새 배경 이미지로 사용할 Gif 이미지를 추가합니다.
Blurb 모듈 스타일 지정
다음 디자인 설정을 업데이트하여 계속해서 광고 문구 모듈의 스타일을 지정하십시오.
아이콘 색상: #6bb962
원 아이콘: 예
원 색상: #ffffff
텍스트 정렬: 가운데
제목 글꼴: Lora
제목 텍스트 크기: 34px
패딩: 상단 50%, 하단 5%, 왼쪽 3%, 오른쪽 3%
이 디자인의 진짜 핵심은 패딩입니다. 블러브 콘텐츠 위에 배경을 배치하려면 상단 패딩의 약 50%를 추가해야 합니다. 그리고 배경 이미지 크기가 "맞춤"으로 설정되고 위치가 "상단 중앙"으로 설정되기 때문에 콘텐츠가 브라우저 너비에 응답하는 것보다 위에 잘 위치하게 됩니다.
마지막으로 다음과 같이 호버에 상자 그림자를 지정합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 0px(기본값), 24px(마우스 오버)
최종 결과
다음은 최종 결과입니다.
그리고 여기 태블릿과 휴대폰의 디자인이 있습니다.
다음은 다른 스크린샷과 색상이 포함된 추가 광고 문구가 있는 모습입니다.
마지막 생각들
웹사이트에서 GIF를 사용하는 데 익숙하지 않은 경우 반드시 고려해야 합니다. 콘텐츠에 생명을 불어넣고 방문자에게 매우 유용한 일러스트레이션을 제공할 수 있습니다. 또한 Divi의 배경 호버 옵션을 사용하면 호버에서 GIF가 있는 정지 이미지를 쉽게 전환할 수 있습니다. 이 솔루션은 콘텐츠와 상호 작용할 때 사용자의 참여를 유도하는 덜 산만한 디자인을 미리 제공할 수 있습니다. 다음 프로젝트에 유용하게 활용되기를 바랍니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!