Divi에서 고유한 제품 애니메이션을 표시하기 위해 GIF 및 HTML5 비디오에 3D 효과 추가

애니메이션 GIF 및 HTML5 비디오는 웹사이트에서 제품이 작동하는 방식을 애니메이션으로 만드는 데 유용할 수 있습니다. 이 짧은 애니메이션은 일반 비디오보다 쉽게 ​​소화되는 방식으로 방문자에게 귀중한 정보를 전달합니다. 이러한 유형의 GIF 및 HTML5 비디오를 추가하는 것은 Divi를 사용하여 매우 쉽게 수행할 수 있습니다. 그리고 약간의 창의성으로 독특한 제품 애니메이션을 위한 3D 효과를 추가할 수 있습니다.

이 튜토리얼에서는 GIF 및 HTML5 비디오에 3D 효과를 추가하여 Divi에서 고유한 제품 애니메이션을 표시하는 방법을 보여 드리겠습니다. 이 디자인은 주요 제품이나 서비스를 선보일 창의적인 레이아웃을 찾는 사람들에게 정말 잘 맞습니다. 이렇게 하려면 먼저 Divi를 사용하여 페이지에 GIF 및 HTML5 비디오 포함을 추가하는 방법을 이해해야 합니다. 그런 다음 Divi의 변형 옵션을 사용하여 3D 공간에서 GIF(또는 비디오)의 위치를 ​​지정하고 회전할 수 있습니다. 마무리를 위해 몇 가지 Divi 디자인 기술을 사용하여 3D GIF 및 비디오와 어울리는 아름다운 섹션 레이아웃을 만들 것입니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 살짝 살펴보겠습니다. GIF와 HTML5 비디오를 사용하여 제품 애니메이션을 만들 때 디자인이 비슷해 보입니다.

GIF 및 HTML5 비디오용 3D 효과를 무료로 다운로드하십시오. 제품 애니메이션 Divi 레이아웃

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

YouTube 채널 구독

짧은 제품 애니메이션에 GIF 사용

GIF는 오랫동안 사용되어 왔습니다. GIF는 만들기 쉽고 여러 브라우저에서 널리 지원되기 때문일 수 있습니다. 그리고 그들은 정말 짧은 제품 애니메이션에 적합합니다. GIF는 이미지이기 때문에 다른 jpg 또는 png와 마찬가지로 Divi 이미지 모듈에서 사용할 수 있습니다. 이를 통해 Divi의 내장 설정을 최대한 활용하여 GIF 스타일을 지정할 수 있습니다. 그러나 더 긴 지속 시간과 더 높은 프레임 속도를 가진 GIF는 파일 크기가 정말 커질 수 있습니다. 따라서 GIF를 가능한 한 짧고 작게 유지하는 것이 가장 좋습니다.

HTML5 비디오를 GIF 대체품으로 사용하기

HTML5 비디오는 특히 긴 제품 애니메이션의 경우 인기 있는 GIF 대체품이 되고 있습니다. 새로운 우아한 테마 웹 사이트 디자인에서 사용되는 것을 보셨을 것입니다. GIF에 비해 크기가 훨씬 작기 때문에 로드하는 데 시간이 덜 걸립니다. 그리고 Divi 사이트에 HTML5 비디오를 추가하는 것은 간단합니다. HTML5 비디오 요소를 추가하여 페이지에 비디오를 포함하기만 하면 됩니다(WordPress에서 비디오 단축 코드를 추가하는 방법과 유사). 숨겨진 컨트롤, 반복 및 자동 재생으로 비디오를 사용자 정의할 수도 있어 GIF처럼 작동하는 고품질 애니메이션을 생성할 수 있습니다. 또한 Divi 모듈에 임베드를 추가할 때 Divi 빌더를 사용하여 창의적인 방식으로 비디오 스타일을 지정할 수도 있습니다.

일반 GIF보다 HTML5 비디오를 사용해야 하는 이유에 대한 자세한 내용은 이 게시물을 확인하세요.

이제 GIF 및 HTML5 비디오 사용에 대해 조금 더 이해했으므로 Divi에서 사용할 준비가 되었습니다.

이 튜토리얼에 필요한 것

시작하려면 다음이 필요합니다.

1. GIF 이미지
2. HTML5 비디오 요소 포함에 사용할 MP4 비디오 파일(및 해당 비디오 파일의 URL)입니다. 최대 브라우저 지원을 위해 동일한 비디오를 webm 형식으로 포함할 수도 있습니다(나중에 자세히 설명).
3. Divi 테마가 설치되고 활성화되었습니다.
4. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

애니메이션 GIF 또는 HTML5 비디오에 3D 효과 추가

이 튜토리얼의 전체 섹션 레이아웃을 디자인하기 전에 GIF와 HTML5 비디오 모두에 3D 효과를 추가하는 방법을 보여주는 것이 가장 좋을 것이라고 생각했습니다. 완료되면 나머지 섹션 레이아웃을 멋진 현대적인 디자인으로 다듬을 것입니다.

지금은 Divi에서 GIF에 3D 효과를 추가하는 것부터 시작하겠습니다.

GIF 만들기

웹에서 GIF를 만드는 방법에는 여러 가지가 있습니다. 이 튜토리얼은 제품 작동 방식을 애니메이션화하기 위해 GIF를 만드는 것에 관한 것이므로 화면의 일부를 녹화(스크린 레코더 사용)한 다음 비디오 파일을 GIF 파일로 변환하고 싶을 것입니다. 파일 크기와 로드 시간을 제한하려면 GIF를 최대한 작게 만드십시오. GIF가 생성되면 Divi의 다른 이미지처럼 사용할 수 있습니다.

Snagit을 사용하여 GIF를 만드는 방법을 배우고 싶다면 Hover에서 애니메이션 GIF로 배경 이미지를 전환하는 방법에 대한 게시물을 확인하십시오.

Divi에서 GIF에 3D 효과 추가하기

이제 GIF를 Divi에 추가하여 멋진 3D 효과로 스타일을 지정할 차례입니다.

시작하려면 2열 행이 있는 새 일반 섹션을 추가하세요.

모듈을 추가하기 전에 GIF를 포함할 열에 관점 속성을 추가해야 합니다. 이렇게 하려면 행 설정을 열고 열 1 기본 요소에 다음 CSS 스니펫을 추가합니다.

perspective: 1000px;

이 관점 속성은 열 내의 요소에 관점을 추가하는 데 필요합니다. 요소는 Divi의 변형 옵션을 사용할 때 3D 효과를 얻을 수 있도록 원근감이 필요합니다. 더 나은 이해를 위해 변환 옵션과 함께 원근을 사용하여 3D 포토월을 디자인하는 방법에 대한 게시물을 확인하십시오.

이제 열 1에 이미지 모듈을 추가합니다.

GIF를 이미지 모듈에 업로드합니다. 이 디자인의 경우 GIF는 약 600x700픽셀이어야 합니다.

그런 다음 변형 옵션을 사용하여 3D 공간에서 GIF의 크기를 조정하고 회전하고 기울이십시오.

변환 Y 축 회전: 8deg
변환 X 축 회전: 28deg

변형 스큐 Y 축: 10deg
변형 스큐 X 축: -8deg

변환 스케일(태블릿): 80%

이제 결과를 살펴보겠습니다.

Divi에서 HTML5 비디오에 3D 효과 추가하기

3D 효과를 추가하기 전에 먼저 HTML5 비디오를 만들어야 합니다. 이 작업을 수행하는 방법에 대한 단계는 아래에서 살펴보겠습니다. 그러나 더 완전한 설명을 원하면 HTML5 비디오를 사용하여 더 작은 파일 크기에서 애니메이션 GIF를 만드는 방법에 대한 게시물을 확인하십시오.

HTML5 비디오 임베드 코드 생성

HTML5 video Element는 다음과 같은 기본 구조를 가지고 있습니다.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

이 코드가 무엇을 하는지 보기 위해 HTML에 대해 많이 알 필요는 없습니다. <video> 요소 내부에는 표시하려는 비디오 파일의 경로/URL을 보유하는 두 개의 <source> 요소가 있습니다. 각 소스 요소에는 다른 파일 형식(webm 및 mp4)의 비디오가 있습니다. 최대 브라우저 지원을 위해서는 둘 다 필요합니다. 순서도 중요합니다. webm 비디오는 고품질 비디오 형식이지만 브라우저에서 덜 지원되기 때문에 코드에서 mp4 비디오 위에 배치됩니다. 따라서 브라우저가 webm 비디오를 지원하면 이를 표시합니다. 그러나 브라우저가 webm 비디오를 지원하지 않으면 그 아래에 mp4 비디오 형식을 사용합니다. 두 비디오 형식을 모두 포함할 필요는 없지만 모범 사례입니다. 그리고 하나만 사용할 예정이라면 mp4 형식이 더 광범위하게 지원되기 때문에 사용하세요.

실제로 Divi의 비디오 모듈을 사용하여 자체 호스팅 비디오를 표시할 때마다 Divi는 동일한 HTML5 비디오 요소를 만들어 비디오를 표시합니다. 이것이 비디오 모듈을 사용하여 mp4 및 webm 비디오 파일을 모두 추가할 수 있는 이유입니다.

자신의 비디오에 대한 코드를 사용하려면 src 속성 뒤의 괄호 안에 비디오 URL을 추가하기만 하면 됩니다.

비디오 파일을 WordPress 사이트에 업로드하면 미디어 라이브러리에서 URL을 가져올 수 있습니다.

그런 다음 src 속성 뒤의 괄호 안에 비디오 URL을 붙여넣습니다.

완료되면 다음과 같이 표시되어야 합니다.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

다음으로 비디오의 표시와 기능을 제어하기 위해 네 가지 속성을 추가할 것입니다. 이러한 유형의 제어는 Divi 비디오 모듈을 사용하는 대신 HTML5 비디오를 수동으로 삽입하는 주된 이유입니다. 이러한 속성에는 autoplay (비디오가 자동으로 시작됨), loop (비디오가 반복됨), muted (비디오에서 오디오가 재생되지 않음) 및 재생 playsinline (비디오가 요소의 재생 영역 내에서 재생됨)이 포함됩니다. 이러한 속성을 비디오에 적용하려면 시작하는 <video> 태그의 대괄호 안에 각 속성을 추가하십시오.

이제 코드는 다음과 같이 보일 것입니다.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

참고: 일반적으로 HTML5 비디오에 controls 속성을 적용하지만 이 경우 비디오가 GIF처럼 작동하도록 생략합니다.

이제 코드를 포함할 준비가 되었습니다.

HTML5 비디오 포함

HTML5 비디오를 페이지에 포함하기 위해 코드 모듈을 사용할 수 있습니다.

GIF 이미지 모듈을 코드 모듈로 교체하기 전에 GIF 예제를 유지할 수 있도록 전체 섹션을 복제하겠습니다. 복제된 섹션에서 이미지 모듈을 삭제하고 그 자리에 텍스트 모듈을 추가합니다.

그런 다음 HTML5 비디오 임베드 코드를 코드 입력 상자에 붙여넣습니다.

그런 다음 이미지 모듈에서 변환 스타일을 복사하고 변환 스타일을 코드 모듈에 붙여넣습니다. 또는 다음과 같이 변환 스타일을 업데이트할 수 있습니다.

변환 Y 축 회전: 8deg
변환 X 축 회전: 28deg
변형 스큐 Y 축: 10deg
변형 스큐 X 축: -8deg
변환 스케일(태블릿): 80%

GIF를 만들 때 사용한 것과 동일한 비디오를 사용하기 때문에 디자인이 매우 유사하게 보일 것입니다. 그러나 비디오의 크기는 GIF의 크기보다 훨씬 작습니다. 결과는 다음과 같습니다.

단면 레이아웃 설계 완료

이제 3D GIF(또는 HTML5 비디오)가 준비되었습니다. 섹션 레이아웃 디자인을 완료할 수 있습니다. 이 디자인에서는 1열의 HTML5 비디오가 있는 섹션을 사용하겠습니다.

섹션 및 행 사용자 정의

섹션 설정을 열고 다음을 업데이트하십시오.

패딩: 상단 15%, 하단 15%

그런 다음 행 설정을 열고 다음을 업데이트합니다.

배경 그라데이션 왼쪽 색상: #ba7fe8
배경 그라디언트 오른쪽 색상: #4b84ff

최대 높이: 300px(데스크톱), 없음(태블릿 및 휴대폰)

패딩: 0px 상단, 0px 하단

다음으로 고유한 디자인 요소를 위해 행에 반투명 내부 상자 그림자를 줄 수 있습니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: 0px
상자 그림자 확산 강도: 40px
그림자 색상: rgba(255,255,255,0.89)

코드 모듈 위치 지정

이제 다음과 같이 transform translate 속성을 조정하여 비디오와 함께 코드 모듈을 가져오겠습니다.

Y축 변환: -20%(데스크톱), -7%(전화)

행동 유도 모듈 ​​추가

디자인을 완성하기 위해 2열에 클릭 유도문안 모듈을 추가해 보겠습니다. 여기에서 버튼으로 추천 제품에 대한 설명을 추가할 수 있습니다.

버튼이 나타나도록 버튼 링크 URL을 추가합니다.

다음과 같이 설정을 계속 업데이트합니다.

배경색: #ffffff
텍스트 정렬: 왼쪽
텍스트 색상: 어두운

제목 글꼴: Lato
제목 글꼴 두께: 굵게
제목 텍스트 색상: #20292f
본문 글꼴: Lato
본문 색상: #6d7c90
본문 텍스트 크기: 17px
바디 라인 높이: 1.8em

버튼 텍스트 크기: 12px
버튼 텍스트 색상: #ffffff
버튼 배경색: #4b84ff
버튼 테두리 너비: 0px
버튼 테두리 반경: 100px
버튼 문자 간격: 2px
버튼 글꼴: Lato
버튼 글꼴 두께: Heavy
버튼 글꼴 스타일: TT
버튼 패딩: 상단 12픽셀, 하단 12픽셀, 왼쪽 20픽셀, 오른쪽 20픽셀

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 확산 강도: 40px
그림자 색상: rgba(103,151,255,0.11)

마진: 10% 오른쪽

Y축 변환: -33%(데스크톱), -15%(전화)
변환 X 축 변환: -5%

최종 결과

데스크탑

태블릿

핸드폰

마지막 생각들

GIF 및 HTML5 비디오에 3D 효과를 추가하면 실제로 이러한 제품 애니메이션에 고유한 디스플레이를 제공합니다. Divi의 변형 옵션(원근감 속성과 결합)을 사용하면 GIF 및 비디오에 3D 효과를 쉽게 추가할 수 있습니다.

그리고 Divi에서 GIF 및 HTML5 비디오를 사용하는 방법에 대해 몇 가지 배웠기를 바랍니다. GIF는 사용하기 쉽지만 웹에 친숙한 파일 크기를 유지하기가 더 어렵습니다. HTML5 비디오는 포함 코드를 사용해야 하지만 긴 애니메이션을 위한 GIF 대체물로 매우 잘 작동할 수 있습니다.

다음 프로젝트에서 제품 및 서비스에 대한 애니메이션을 보여주기 위해 이 디자인을 사용하는 새롭고 흥미로운 방법을 자유롭게 탐색하십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!