애니메이션 분할 화면 랜딩 페이지 구축

작가: Peter Berry

창조 날짜: 13 칠월 2021

업데이트 날짜: 13 할 수있다 2024

콘텐츠

01. 설정
02. HTML 완성
03. Sass 변수 탐색
04. 바디 스타일링 조정
05. 섹션 제목 스타일 지정
06. CTA를 돋보이게 만들기
07. 컨테이너 배경 및 화면 설정
08. 배경 이미지 추가
09. 전환 및 호버 효과 추가
10. JavaScript로 이동
11. 클래스 추가 및 제거
12. 반응 형 만들기

방문 페이지는 웹 사이트 레이아웃에서 중요한 요소입니다. 비즈니스 또는 판매하는 제품을 소개 할 수있는 첫 번째 진정한 기회이므로 디자인이 핵심입니다. 방문 페이지는 클릭 유도 문안 (CTA)이라는 단일 초점 목표로 디자인되었습니다. 클릭 유도 문안과 사용자 경험을 보완하기 위해 색상과 이미지를 사용하는 것은 필수입니다.

이 자습서는 작동하는 CodePen을 참조하십시오.

이 자습서에서는 가상의 패션 브랜드를위한 매력적인 방문 페이지를 만드는 방법을 살펴 봅니다. 큰 이미지와 마우스 오버시 발생하는 애니메이션 전환이 포함 된 분할 화면 디자인을 중심으로합니다.이 페이지에는 두 개의 명확한 클릭 유도 문안 버튼이 있으며 스타일링에는 HTML, Sass를 사용하고 ES6 구문을 사용하는 바닐라 자바 스크립트를 사용합니다 (웹 호스팅이 웹 사이트 요구 사항에 적합한 지 확인해야 함). 너무 복잡합니까? 코드없이 웹 사이트를 만들고 간단한 웹 사이트 빌더를 사용해보세요.

01. 설정

CodePen을 사용하는 경우 펜 설정에서 CSS가 'SCSS'로 설정되어 있는지 확인하세요. 설정 탭을 클릭하고 'CSS'를 선택하고 드롭 다운 옵션에서 CSS 전처리기를 SCSS로 변경하여이 변경을 수행 할 수 있습니다.

그런 다음 HTML을 추가 할 수 있습니다. 컨테이너 클래스 내에서’left’라는 섹션과’right’라는 섹션을 래핑합니다. 두 섹션 모두’screen’클래스가 제공됩니다.

div> 섹션> / 섹션> 섹션> / 섹션> / div>

02. HTML 완성

HTML을 완성하기 위해 각 섹션의 제목을 h1 꼬리표. 그 아래에 실제 프로젝트 인 경우 다른 페이지로 연결되는 버튼을 추가해야합니다. 우리는 이것을 클래스를 줄 것입니다 단추 일을 멋지고 단순하게 유지합니다.

div> 섹션> h1> 남성 패션 / h1> 버튼> a href = "#"> 자세히 알아보기 / a> / button> / section> 섹션> h1> 여성 패션 / h1> 버튼> a href = "#"> 학습 더보기 / a> / 버튼> / 섹션>

03. Sass 변수 탐색

Sass에 대해 우리 모두가 좋아하는 한 가지는 변수 사용입니다. 네이티브 CSS 변수가 더 많은 지원을 받고 있지만 Sass를 사용하여 안전하게 유지할 것입니다. 우리는 이것들을 우리의 맨 위에 놓을 것입니다. .scss, 원하는 색상을 선택할 수 있지만 rgba 가치는 우리에게 더 많은 유연성을 줄 것입니다.

/ * * 변수 * * / $ container-BgColor : # 444; $ left-bgColor : rgba (136, 226, 247, 0.7); $ left-button-hover : rgba (94, 226, 247, 0.7); $ right-bgColor : rgba (227, 140, 219, 0.8); $ right-button-hover : rgba (255, 140, 219, 0.7); $ hover-width : 75 %; $ 작은 너비 : 25 %; $ animateSpeed : 1000ms;

04. 바디 스타일링 조정

먼저 본문의 기본 패딩과 여백을 모두 지운 다음 글꼴 모음을 Open Sans로 설정합니다. 이것은 버튼에만 영향을 미치므로 우리가 사용하는 글꼴은 그다지 중요하지 않습니다. 그런 다음 너비와 높이를 100% X 축에서 오버플로되는 모든 항목이 숨겨 지는지 확인합니다.

html, body {padding : 0; 여백 : 0; font-family :’Open Sans’, sans-serif; 너비 : 100 %; 높이 : 100 %; overflow-x : 숨김; }

05. 섹션 제목 스타일 지정

섹션 제목으로 Google 글꼴을 선택할 때입니다. Playfair Display를 선택했습니다. 그런 다음 사용 translateX 섹션 제목이 항상 X 축의 중앙에 있도록 할 수 있습니다.

h1 {글꼴 크기 : 5rem; 색상 : #fff; 위치 : 절대; 왼쪽 : 50 %; 상단 : 20 %; 변환 : translateX (-50 %); 공백 : nowrap; font-family :’Playfair Display’, serif; }

06. CTA를 돋보이게 만들기

버튼은 클릭 유도 문안 역할을하므로 크고 굵게 표시되어야하며 클릭하기 쉬운 위치에 있어야합니다. 두 버튼 모두 흰색 테두리와 흥미로운 전환 효과가 있습니다. 두 버튼의 기본 스타일은 동일하지만 마우스를 올리면 색상이 변경됩니다.

.button {디스플레이 : 블록; 위치 : 절대; 왼쪽 : 50 %; 상단 : 50 %; 높이 : 2.6rem; padding-top : 1.2rem; 너비 : 15rem; 텍스트 정렬 : 가운데; 색상 : 흰색; 테두리 : 3px 단색 #fff; 테두리 반경 : 4px; 글꼴 두께 : 600; 텍스트 변환 : 대문자; 텍스트 장식 : 없음; 변환 : translateX (-50 %); 전환 : 모든 .2s;

메인 버튼은 멋지고 단순한 호버 효과를 가지며 우리는 페이지의 배경과 유사한 색상이 될 색상에 대해 지정한 Sass 변수를 사용할 것입니다.

.screen.left .button : hover {배경색 : $ left-button-hover; border-color : $ left-button-hover; } .screen.right .button : hover {배경색 : $ right-button-hover; border-color : $ right-button-hover;

07. 컨테이너 배경 및 화면 설정

컨테이너 클래스는 페이지 래퍼 역할을하며 화면을 절대 위치에 배치하기를 원하기 때문에이 위치를 상대 위치로 설정합니다. 컨테이너에 기본 배경 색상을 지정하지만 두 화면 배경에 서로 다른 색상을 설정하므로 물론 표시되지 않습니다.

.container {위치 : 상대; 너비 : 100 %; 높이 : 100 %; 배경 : $ container-BgColor; .screen {위치 : 절대; 너비 : 50 %; 높이 : 100 %; 오버플로 : 숨김; }}

08. 배경 이미지 추가

왼쪽과 오른쪽 섹션에 이미지가 표시되며 Unsplash, Pixabay 또는 Pexels (이 자습서에서 사용)와 같은 웹 사이트에서 로열티가없는 스톡 이미지를 찾을 수 있습니다. 작업을 더 쉽게하기 위해 CSS에서 연결할 수있는 imgbb라는 무료 이미지 호스팅 및 공유 서비스를 사용했습니다.

.screen.left {왼쪽 : 0; 배경 : url ( 'https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') 중앙 중앙 반복 없음; 배경 크기 : 표지; & : before {position : 절대; 내용 : ""; 너비 : 100 %; 높이 : 100 %; 배경 : $ left-bgColor; }}

페이지의 오른쪽에도 imgbb를 사용하여 배경 이미지가 표시되며 배경색을 분홍색으로 설정합니다. 다시 배경 크기를 덮개. 이를 통해 전체 포함 요소를 커버 할 수 있습니다. .화면 수업.

.screen.right {오른쪽 : 0; 배경 : url ( 'https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') 중앙 중앙 반복 없음; 배경 크기 : 표지; & : before {position : 절대; 내용 : ""; 너비 : 100 %; 높이 : 100 %; 배경 : $ right-bgColor; }}

09. 전환 및 호버 효과 추가

두 화면에서 호버 효과에 대한 애니메이션 속도는 변수 값을 유지하는 전환에 의해 제어됩니다. $ animateSpeed, 즉 1000ms (1 초)입니다. 그런 다음 애니메이션에 약간의 이징을 제공하여 마무리합니다. 이는 더 부드러운 애니메이션을 제공하는 데 도움이되는 이징 인 / 아웃입니다.

.screen.left, .screen.right, .screen.right : before, .screen.left : before {transition : $ animateSpeed all ease-in-out; }

이제 우리가 원하는 것은 왼쪽 화면 위로 마우스를 가져 가면 JavaScript를 사용하여 해당 섹션에 클래스가 추가된다는 것입니다 (이후 단계에서 작성). 이 클래스가 추가되면 해당 화면은 우리가 지정한 변수의 너비 (75 %)로 늘어나고 오른쪽은 더 작은 너비 변수 (25 %)로 설정됩니다.

.hover-left .left {너비 : $ hover-width; } .hover-left .right {너비 : $ small-width; } .hover-left .right : before {z-index : 2; }

이것은 JavaScript를 사용하여 마우스를 가리키면 새 클래스가 추가되고 오른쪽 화면이 그에 따라 확장되는 왼쪽과 똑같이 작동합니다. 우리는 또한 확인해야합니다 Z- 색인 로 설정됩니다 2 CTA 버튼이 더 눈에 띄게됩니다.

.hover-right .right {너비 : $ hover-width; } .hover-right .left {너비 : $ small-width; } .hover-right .left : before {z-index : 2; }

10. JavaScript로 이동

CSS 클래스를 추가 및 제거하는 데 도움이되는 바닐라 JavaScript를 사용할 것이며 새로운 ES6 기능도 사용할 것입니다. 가장 먼저해야 할 일은 상수 변수를 선언하는 것입니다.

우리가 사용할 것이기 때문에 문서 두 번 이상 상수 변수를 설정합니다. 문서 '문서'라는 단어를 멋지고 짧게 유지할 수 있도록 그 안에 문서를 저장합니다.

const doc = 문서;

이제 세 개의 상수를 더 설정해야합니다. .권리, .왼쪽 과 .컨테이너 선택자. 상수를 사용하는 이유는 이러한 값을 변경하고 싶지 않다는 것을 알고 있기 때문에 상수를 사용하는 것이 합리적입니다. 이제이 설정을 사용하여 마우스 이벤트를 추가 할 수 있습니다.

const right = doc.querySelector ( ". right"); const left = doc.querySelector ( ". left"); const container = doc.querySelector ( ". container");

사용 왼쪽 마지막 단계에서 선언 한 상수 변수입니다. 이제 여기에 이벤트 리스너를 추가 할 수 있습니다. 이 이벤트는 마우스 콜백 함수를 사용하는 대신 다른 ES6 기능인 화살표 함수 '(() =>).

// hover의 컨테이너 요소에 클래스를 추가합니다. left.addEventListener ( "mouseenter", () => {container.classList.add ( "hover-left");});

11. 클래스 추가 및 제거

마지막 단계에서 이벤트 리스너는 마우스 기본 컨테이너 클래스를 대상으로하고라는 새 클래스를 추가하는 이벤트 마우스 오버 왼쪽 왼쪽 섹션 요소에. 이 호출이 추가되었으므로 이제 마우스를 가져갈 때 제거해야합니다. 이 작업은 쥐 이벤트 및 .없애다() 방법.

// hover에 추가 된 클래스를 제거합니다. left.addEventListener ( "mouseleave", () => {container.classList.remove ( "hover-left");});

지금까지 왼쪽 화면에서 모든 작업을 수행했습니다. 이제 JavaScript를 끝내고 오른쪽 섹션 요소에서 클래스를 추가 및 제거합니다. 다시 여기에서 화살표 함수 구문을 사용하여 모든 것을 멋지고 깔끔하게 유지했습니다.

right.addEventListener ( "mouseenter", () => {container.classList.add ( "hover-right");}); right.addEventListener ( "mouseleave", () => {container.classList.remove ( "hover-right");});