Divi에서 호버 효과를 CSS 시차 배경과 결합하는 방법
게시 됨: 2019-08-30Divi에서 배경 이미지와 함께 CSS 시차를 사용하면 놀랍도록 독특한 호버 효과를 만들 수 있습니다. 시차는 웹사이트에 생명을 불어넣을 수 있는 여러 방법 중 하나입니다. 그리고 시차와 Divi의 다양한 호버 옵션을 결합하면 콘텐츠에 더욱 생기를 불어넣을 수 있습니다.
이 튜토리얼에서는 Divi에서 고유한 CSS 시차 배경 호버 효과를 빠르고 쉽게 디자인할 수 있음을 보여줍니다. 플러그인이나 사용자 정의 코딩이 필요하지 않습니다!
시작하자.
엿보기
다음은 이 튜토리얼에서 디자인할 CSS 시차 배경 호버 효과에 대한 간략한 설명입니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음이 필요합니다.
- Divi 테마가 설치되고 활성화되었습니다.
- 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
- 모의 콘텐츠에 사용할 이미지
그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
1부: Divi에서 브레이크아웃 시차 호버 효과 만들기
먼저 하나의 열 행이 있는 일반 섹션을 만듭니다. 
모듈을 추가하기 전에 섹션 설정을 열고 CSS 시차를 사용하여 배경 이미지를 추가하십시오.
이미지 너비가 1920px 이상인지 확인하세요. 디자인은 질감이 많은 어두운 배경 이미지와 잘 어울립니다. 저는 Divi Builder에서 사용할 수 있는 Coffee Shop Layout Pack에서 하나를 사용하고 있습니다.
그런 다음 다음과 같이 섹션에 패딩을 추가합니다.
패딩: 10vw 상단, 10vw 하단
Blurb 모듈 추가
섹션 배경과 패딩이 준비되면 행에 블러브 모듈을 추가합니다.
그런 다음 본문 텍스트의 몇 문장으로 안내문 내용을 업데이트합니다. 거기에 기본 제목을 유지할 수 있습니다.
그런 다음 클릭하여 아이콘을 사용하고 광고 문구에 대한 커피 아이콘을 선택합니다.
콘텐츠가 준비되면 다음과 같이 디자인 설정을 업데이트합니다.
아이콘 색상: #ffffff
아이콘 글꼴 크기: 50px
텍스트 정렬: 가운데
제목 글꼴: Oswald
제목 글꼴 스타일 TT
제목 텍스트 색상: #ffffff
제목 글자 간격: 2px
본문 글꼴: Nunito
본문 색상: #ffffff
본문 문자 간격: 1px
패딩: 상단 30픽셀, 하단 30픽셀, 왼쪽 30픽셀, 오른쪽 30픽셀
행 너비 조정
광고 문구가 디자인된 후 행 설정으로 이동하여 최대 너비를 조정합니다.
최대 너비: 80%
열 설정
이 예에서는 열 수준에서 호버 효과를 활성화합니다. 이를 통해 지금은 단일 블러브 모듈만 사용하고 있지만 여러 모듈을 사용하여 콘텐츠를 빌드할 수 있습니다.
이 시차 호버 효과가 작동하려면 섹션에서 사용한 것과 동일한 배경 이미지를 열에 추가해야 합니다. 열 배경 이미지에도 동일한 CSS 시차 방법을 사용해야 합니다.
열 설정을 열고 CSS 시차를 사용하여 동일한 배경 이미지를 추가합니다.
열 배경 이미지와 섹션 배경 이미지는 본질적으로 웹 페이지의 정확히 같은 위치에 이미지를 고정하는 CSS 시차를 사용하기 때문에 차이를 볼 수 없습니다. 그러나 호버 효과가 적용되면 차이점을 볼 수 있습니다.
다음과 같이 기둥 디자인 설정을 계속 업데이트합니다.
패딩: 4vw 상단, 4vw 하단
둥근 모서리: 10px
그런 다음 다음과 같이 호버에만 표시되는 상자 그림자를 열에 지정합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 36px
그림자 색상(기본값): rgba(0,0,0,0)
그림자 색상(호버): rgba(0,0,0,0.72)
이제 변환 옵션으로 이동하여 호버에서 다음 변환 스타일을 업데이트하겠습니다.
변형 비율(마우스 오버): 105%
이것은 배경 이미지에서 약간 튀어나오는 효과를 만들기 위해 열(및 그 내용)을 약간 확대합니다.
Y축 변환 변환(마우스 오버): -2.5%
이것은 약간의 비대칭 변위를 생성하기 위해 호버에서 열을 약간 위로 이동합니다.
변형 원점: 100% 50%(하단 중앙)
이것은 변환 값과 결합될 때 미묘한 힌지 효과와 유사한 하단 중앙 원점에서 스케일링 효과를 시작합니다.
여기까지 CSS 시차 호버 효과가 있습니다.
이제 행 설정을 열고 열을 두 번 복제하여 각각 동일한 광고 문구 및 호버 효과가 있는 총 3개의 열을 만듭니다.
최종 결과
다음은 최종 디자인입니다. 페이지를 아래로 스크롤할 때 시차 배경 이미지가 기본적으로 어떻게 숨겨져 있는지 확인하십시오. 그런 다음 튀어나올 때 각 열 위로 마우스를 가져가면 나타납니다. 열 위로 마우스를 가져간 상태에서 페이지를 아래로 스크롤하면 열에서 시차가 계속 작동하는 것을 볼 수도 있습니다. 미묘하지만 매우 독특한 호버 효과입니다.
호버 효과에 회전 추가
디자인에 멋진 터치를 추가하는 CSS 시차 호버 효과에 회전을 추가할 수도 있습니다. 각 열 설정을 열고 다음을 업데이트하기만 하면 됩니다.
변환 Z축 회전(호버링 시): 5deg
혼합하고 싶다면 중간 열에 -5도 회전을 줄 수 있습니다.
다음은 최종 결과입니다.
그리고 여기에 더 밝은 배경 이미지와 더 어두운 텍스트가 있는 동일한 디자인이 있습니다.
2부: Divi에서 돋보기 시차 호버 효과 만들기
첫 번째 디자인에서 섹션을 복제한 다음 섹션 설정을 열고 배경 이미지를 새 것으로 교체합니다. 저는 우리의 Video Game Layout Pack에 있는 것을 사용하고 있습니다. 왜냐하면 그것은 확대 시차 호버 효과를 정말 강조하기 때문입니다.
행 설정 업데이트
이 디자인을 위한 추가 공간이 필요하므로 행 설정을 열고 다음을 업데이트합니다.
거터 폭: 1
폭: 100%
최대 너비: 98%
그런 다음 콘텐츠 탭으로 이동하여 두 개의 열을 삭제하여 하나만 남도록 합니다.
열 설정
이 디자인에서는 열 수준이 아닌 모듈 수준에서 호버 효과를 적용해야 하므로 열의 기본 스타일을 재설정해야 합니다. 그렇게 하려면 열 항목을 마우스 오른쪽 버튼으로 클릭하고 "항목 스타일 재설정"을 선택합니다.
Blurb 모듈 업데이트
열 설정이 기본 스타일로 복원된 후 블러브 모듈 설정을 열고 섹션에 추가된 동일한 CSS 시차 배경 이미지를 추가합니다.
사이징
원형 모듈을 생성하려면 먼저 다음과 같이 일치하는 너비와 높이를 지정해야 합니다.
너비: 300px
모듈 정렬: 중앙
높이: 300px
국경
원형 효과를 완성하려면 둥근 모서리를 업데이트하고 약간의 테두리를 지정해야 합니다.
둥근 모서리: 50%
테두리 너비: 1px
테두리 색상: rgba(255,255,255,0.12)
상자 그림자 호버 효과
다음으로 다음과 같이 호버에 상자 그림자를 지정합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 흐림 강도: 36px
그림자 색상(기본값): rgba(0,0,0,0)
그림자 색상(마우스 오버): rgba(0,0,0,0.7)
호버 효과 변환
상자 그림자가 배치되면 다음과 같이 변환 옵션을 업데이트합니다.
변형 원점(기본값): 50% 0%(중앙 왼쪽)
이렇게 하면 광고 문구가 3열 행의 맨 왼쪽에 배치되면 페이지 외부로 확장되지 않습니다.
변환 배율(마우스 오버): 130%
이것은 블러를 확대하고 멋진 호버 효과를 위해 시차 배경 이미지를 실제로 확대합니다.
열 복제
광고가 완료되면 열을 복제하여 동일한 광고 모듈이 있는 3개의 열을 생성할 수 있습니다.
행 설정을 열고 열을 두 번 복제하여 총 3개의 열을 만듭니다.
변환 원점 업데이트
우리의 블러브 모듈은 모두 변환 원점이 "중앙 왼쪽"으로 설정되어 있으므로 중앙과 오른쪽 열의 블러브에 대해 이를 조정하여 적절한 위치에서 크기가 조정되도록 해야 합니다.
2열에서 blurb 모듈에 대한 설정을 열고 다음을 업데이트합니다.
변형 원점: 50% 50%(중앙 중앙)
그런 다음 3열에서 blurb 모듈에 대한 설정을 열고 다음을 업데이트합니다.
변형 원점: 50% 100%(중앙 오른쪽)
최종 결과
이제 최종 결과를 확인하십시오. 이 효과가 광고 문구 뒤의 CSS 시차 배경 이미지를 실제로 어떻게 확대하는지 주목하십시오. 그리고 광고 문구 위로 마우스를 가져간 상태에서 아래로 스크롤하면 돋보기 효과처럼 보입니다.
사실, 이것은 너무 멋져서 그냥 호버 상태가 아닌 기본 스타일로 남겨두고 싶을 수도 있습니다.
마지막 생각들
이 게시물의 예제를 통해 창의적인 아이디어가 조금이나마 빠져나가 CSS 시차와 결합할 수 있는 더 멋진 디자인과 호버 효과를 탐색할 수 있기를 바랍니다. 설정 과정은 정말 간단하지만 가능성은 무궁무진해 보입니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!