Divi에서 스크롤에 움직이는 이미지 그림자를 만드는 방법

웹 디자인 세계에서 우리는 일반적으로 그림자를 Photoshop에서 추가할 수 있는 것 또는 CSS 속성(예: box-shadow 또는 text-shadow)으로 생각합니다. 그러나 Divi를 사용하면 상자(또는 상자 그림자) 밖에서 생각할 수 있습니다. Divi의 내장 필터 및 스크롤 효과 옵션을 약간만 조정하면 모든 이미지를 실제와 같은 그림자로 변환할 수 있습니다.

이 튜토리얼에서는 Divi에서 스크롤에 움직이는 이미지 그림자를 만드는 방법을 보여 드리겠습니다. 비결은 고유한 모양의 PNG 이미지를 찾아 이미지가 변환되면 모양이 유지되고 이미지의 사실적인 그림자처럼 보이도록 하는 것입니다. 이미지/그림자가 준비되면 몇 가지 스크롤 효과를 추가하여 사용자가 스크롤할 때 그림자를 이동할 수 있습니다. 이 특이한(그러나 친숙한) 효과는 사이트에 새로운 생명을 불어넣을 멋진 디자인 요소를 추가합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

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

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

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

1부: 섹션 레이아웃 디자인

이 첫 번째 부분에서는 움직이는 이미지 그림자 스크롤 효과를 보완하기 위해 빠른 섹션 레이아웃을 디자인할 것입니다.

2열 행 추가

시작하려면 일반 섹션에 2열 행을 추가하세요.

텍스트 모듈 추가

왼쪽 열에 새 텍스트 모듈을 추가합니다. 이것은 모의 텍스트 콘텐츠로 사용됩니다.

텍스트 내용

그런 다음 본문 내용에 다음 HTML을 붙여넣습니다.

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

텍스트 디자인

디자인 탭에서 다음과 같이 설정을 업데이트합니다.

• 텍스트 텍스트 크기: 16px
• 텍스트 줄 높이: 2em

• 제목 2 글꼴: Comfortaa
• 제목 2 텍스트 색상: #444235
• 제목 2 텍스트 크기: 60px(데스크톱), 40px(태블릿)

이미지 디자인 액센트 추가

텍스트 모듈 아래에서 디자인 액센트로 사용할 이미지를 텍스트에 추가합니다. 우리는 Holistic Healer Layout Pack의 나뭇가지 이미지를 사용할 것입니다. 이것은 나중에 움직이는 이미지 그림자에 사용할 동일한 이미지입니다.

이미지 추가

텍스트 모듈 아래에 새 이미지 모듈을 추가합니다.

그런 다음 이미지를 업로드합니다.

이미지 디자인

디자인 탭에서 필터 설정을 사용하여 이미지의 불투명도를 낮춥니다.

• 불투명도: 20%

다음으로 다음 변형 옵션을 사용하여 이미지를 왼쪽과 위쪽으로 이동합니다.

• 변환 X축 변환: -20%
• Y축 변환 변환: -90%

이미지 위치

그런 다음 이미지에 절대 위치를 지정합니다.

• 위치: 절대

2부: 움직이는 이미지 그림자 만들기

왼쪽 열의 모의 콘텐츠가 완료되면 이미지와 움직이는 이미지 그림자를 만들 준비가 된 것입니다.

기본 이미지 추가

오른쪽 열에 새 이미지 모듈을 추가합니다.

그런 다음 너비가 800픽셀 이상인 이미지를 업로드합니다. 나뭇가지의 움직이는 이미지 그림자를 추가할 것이므로 외부 어딘가의 사진을 사용하는 것이 좋습니다.

그런 다음 다음과 같이 모듈 아래의 기본 하단 여백을 제거합니다.

• 여백 하단: 0px

움직이는 이미지 그림자 1 만들기

이제 첫 번째 움직이는 이미지 그림자를 만들 준비가 되었습니다. 기본 아이디어는 이미지의 투명한 배경이 표시되지 않도록 PNG 파일 형식의 이미지를 사용하는 것입니다. 그런 다음 필터 효과를 사용하여 밝기, 불투명도 및 흐림을 조정하여 이미지를 그림자처럼 보이도록 변환합니다. PNG 이미지는 독특한 모양을 가지고 있기 때문에 그림자도 같은 모양을 유지합니다.

Holistic Healer Layout Pack에서 분기의 동일한 PNG 이미지를 추가하여 시작하겠습니다.

여기있어…

오른쪽 열의 이미지 아래에 이미지 모듈을 추가합니다.

그런 다음 이미지를 모듈에 업로드합니다.

이미지 필터

디자인 탭에서 필터를 업데이트하여 이미지가 그림자처럼 보이도록 합니다.

• 밝기: 0%
• 불투명도: 25%
• 블러: 8px

이미지 위치

그런 다음 위의 기본 이미지 위에 앉도록 이미지 그림자에 절대 위치를 지정합니다.

이미지 스크롤 효과

이미지 그림자를 이동하려면 다음 스크롤 효과를 업데이트하세요.

수평 동작 탭에서…

• 수평 모션 활성화: 예
• 시작 오프셋: 0(0%에서)
• 중간 오프셋: -3(50%에서)
• 끝 오프셋: -6(100%에서)

확장 및 축소 탭에서…

• 확장 및 축소 활성화: 예
• 시작 배율: 160%(0%에서)
• 중간 규모: 160%(50%에서)
• 종료 스케일: 160%(100%에서)

(참고: 이렇게 하면 그림자가 160%로 확대되고 전체 스크롤 효과 동안 그대로 유지됩니다. 그러나 다른 지점에서 비율 비율을 자유롭게 조정하십시오.)

회전 탭에서…

• 수평 모션 활성화: 예
• 시작 회전: 30°(0%에서)
• 중간 회전: 0°(50%에서)
• 끝 회전: -30°(100%에서)

지금까지의 결과 확인

이 시점에서 라이브 페이지를 아래로 스크롤할 수 있도록 섹션에 다음 여백을 임시로 추가하여 지금까지의 결과를 볼 수 있습니다.

• 여백: 70vh 상단, 70vh 하단

지금까지의 효과는 다음과 같습니다.

열 오버플로 숨기기

기본 이미지의 동일한 열에 이미지 그림자를 포함하려면 열 2에 대한 설정을 열고 다음과 같이 오버플로 옵션을 업데이트합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

이제 결과를 확인하십시오.

움직이는 이미지 그림자 2 만들기

첫 번째 이미지 그림자가 있으면 다른 그림자를 쉽게 만들 수 있습니다. 기존 이미지 그림자를 복제하고 스크롤 효과를 업데이트하기만 하면 됩니다. 이중 움직이는 이미지 그림자는 이미지에 아름다운 베일링 효과를 만듭니다.

기존 이미지 그림자 복제

레이어 모달을 사용하여 그림자 이미지를 복제합니다.

스크롤 효과 업데이트

그런 다음 복제에 대한 설정을 열고 다음과 같이 스크롤 효과를 업데이트합니다.

수평 동작 탭에서…

• 수평 모션 활성화: 예
• 시작 오프셋: 0(0%에서)
• 중간 오프셋: 3(50%에서)
• 끝 오프셋: 6(100%에서)

회전 탭에서…

• 수평 모션 활성화: 예
• 시작 회전: 210°(0%에서)
• 중간 회전: 180°(50%에서)
• 끝 회전: 150°(100%에서)

결과는 다음과 같습니다.

메인 이미지에 확대 효과 추가하기

열 오버플로가 숨겨져 있기 때문에 스크롤 시 기본 이미지의 크기를 조정하여 움직이는 이미지 그림자를 보완하는 미묘한 확대(또는 켄 번즈 효과)를 만들 수 있습니다.

이렇게 하려면 기본 이미지에 대한 설정을 열고 다음을 업데이트하십시오.

확장 및 축소 탭에서…

• 확장 및 축소 활성화: 예
• 시작 배율: 100%(0%에서)
• 중간 규모: 115%(50%에서)
• 종료 스케일: 130%(100%에서)

이것은 사용자가 스크롤할 때 확대 효과를 만듭니다.

최종 결과

그리고 여기 최종 결과가 있습니다.

마지막 생각들

이 움직이는 이미지 섀도우가 저처럼 여러분에게도 재미있었으면 좋겠습니다. 더 창의적으로 추가할 가능성이 있는 단순하지만 멋진 디자인 요소입니다. 다양한 색상, 혼합 모드 및 기타 스크롤 효과를 추가하여 자신만의 디자인을 만들 수 있습니다.

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

건배!