애니메이션 스플릿 스크린 랜딩 페이지 만들기

Sep 12, 2025

어떻게

방문 페이지는 당신의 중요한 요소입니다 웹 사이트 레이아웃 ...에 귀하의 비즈니스를 소개하거나 판매하는 제품을 소개 해야하는 최초의 실제 기회입니다. 그래서 디자인은 핵심입니다. 방문 페이지는 조치 (CTA)에 대한 호출로 알려진 단일 집중적 인 목표로 설계되었습니다. 액션에 대한 호출을 보완하기 위해 색상과 이미지의 사용 사용자 경험 필수이다.

이 자습서의 작업 코드 펜을 참조하십시오

이 튜토리얼에서는 허구의 패션 브랜드를 위해 매력적인 방문 페이지를 만드는 방법을 살펴볼 것입니다. 호버에서 발생한 큰 이미지와 애니메이션 전환이있는 분할 화면 디자인을 중심으로합니다. 이 페이지에는 작업 버튼에 대한 두 가지 명확한 호출이 있으며 HTML을 사용할 것입니다. 흘러 나오다 ES6 구문을 사용하는 바닐라 자바 스크립트의 스타일 및 터치 (귀하의 웹 호스팅 귀하의 웹 사이트 요구에 적합합니다). 너무 복잡해? 코드가 필요없이 웹 사이트 만들기, 간단하게 시도하십시오. 웹 사이트 빌더 ...에

01. 설정하십시오

Click the icon in the top right to enlarge the image — 오른쪽 상단의 아이콘을 클릭하여 이미지를 확대하십시오.

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

그런 다음 HTML에서 추가 할 수 있습니다. 우리는 '왼쪽'섹션과 컨테이너 클래스에서 '스크린'클래스가 주어진 두 섹션에서 '왼쪽'섹션을 랩으로 할 것입니다.

 & lt; div class = "컨테이너"& gt;
  & lt; 섹션 클래스 = "스크린 왼쪽"& gt;
  & lt; / section & gt;
  & lt; 섹션 클래스 = "스크린 오른쪽"& gt;
  & lt; / section & gt;
& lt; / div & gt;

02. HTML을 마칩니다

HTML을 완료하려면 각 섹션에 대한 제목을 추가합니다. H1. 꼬리표. 이것이 우리는 이것이 실제 프로젝트 인 경우 다른 페이지에 링크하는 버튼을 추가해야합니다. 우리는이 수업을 줄 것입니다 단추 좋은 일을 유지하고 간단하게 유지합니다.

 & lt; div class = "컨테이너"& gt;
   & lt; 섹션 클래스 = "스크린 왼쪽"& gt;
    & lt; h1 & gt; mens fashion & lt; / h1 & gt;
      & lt; 버튼 & gt;
       & lt; a href = "#"클래스 = "버튼"& gt; 자세히 알아보기 & lt; / a & gt;
      & lt; / button & gt;
    & lt; / section & gt;

    & lt; 섹션 클래스 = "스크린 오른쪽"& gt;
       & lt; h1 & gt; womens fashion & lt; / h1 & lt;
        & lt; 버튼 & gt;
          & lt; a href = "#"클래스 = "버튼"& gt; 자세히 알아보기 & lt; / a & gt;
        & lt; / button & gt;
     & lt; / 섹션 & gt;

03. Sass 변수를 탐험하십시오

우리 모두가 Sass에 대해 사랑하는 한 가지는 변수의 사용입니다. 네이티브 CSS 변수가 더 많은 지원을받지 않지만 Sass를 사용하여 사물을 안전하게 유지합니다. 우리는 이것들을 우리의 꼭대기에 올릴 것입니다 .scss.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 폭 : 75 %;
$ 작은 너비 : 25 %;
$ AnimatesPeed : 1000ms;

04. 바디 스타일링 조정

첫째, 우리는 모든 기본 패딩 및 마진을 신체의 모든 기본 패딩 및 여백을 지우고 글꼴 패밀리를 SAN을 열어 올릴 것입니다. 이렇게하면 버튼에만 영향을 미치므로 우리가 사용하는 글꼴이 너무 중요하지 않습니다. 그런 다음 우리는 너비와 높이를 설정합니다 100 % 그리고 X 축에 오버 플로우가 숨겨져 있는지 확인하십시오.

 HTML, BODY {
  패딩 : 0;
  마진 : 0;
  글꼴 - 가족 : '열린 SANS', SANS-SERIF;
  너비 : 100 %;
  높이 : 100 %;
  Overflow-X : 숨김;
}

05. 스타일 섹션 제목

섹션 제목에 대한 Google 글꼴을 선택해야 할 때입니다. 우리는 PlayFair 디스플레이를 선택했습니다. 그런 다음 사용 translatex. 우리는 섹션 제목이 항상 X 축에 중앙에 있는지 확인할 수 있습니다.

 H1 {
  글꼴 크기 : 5rem;
  색상 : #fff;
  위치 : 절대;
  왼쪽 : 50 %;
  상단 : 20 %;
  변환 : translatex (-50 %);
  화이트 공간 : NowRap;

  글꼴 - 가족 : 'Playfair Display', Serif;
}

06. CTA를 탁월하게 만드십시오

우리의 버튼은 행동에 대한 우리의 전화로 작용할 것입니다. 따라서 쉽게 클릭하기 쉽고 굵은 대담하고 배치해야합니다. 두 버튼 모두 흰색 테두리와 흥미로운 전환 효과가 있습니다. 두 버튼의 기본 스타일은 동일하게 될 것입니다. 그러나 호버에서 색상을 변경합니다.

 .Button {
  디스플레이 : 블록;
  위치 : 절대;
  왼쪽 : 50 %;
  상단 : 50 %;
  높이 : 2.6REM;
  패딩 - 탑 : 1.2REM;
  너비 : 15rem;
  텍스트 - 정렬 : 센터;
  색상 : 흰색;
  테두리 : 3px 고체 #FFF;
  경계 반경 : 4px;
  글꼴 무게 : 600;
  텍스트 변환 : 대문자;
  텍스트 장식 : 없음;
  변환 : translatex (-50 %);
  전환 : 모든 .2s;

주 버튼은 멋진 간단한 호버 효과가 있으며 색상에 지정된 Sass 변수를 사용하여 페이지의 배경과 비슷한 색상이됩니다.

 .screen.left .Button : 호버 {
  배경색 : $ left-button-hover;
  국경 색상 : $ left-button-hover;
}

.screen.right .Button : 호버 {
  배경색 : $ Right-Button-Hover;
  국경 색상 : $ Right-Button-Hover;

07. 컨테이너 배경 및 화면을 설정하십시오

컨테이너 클래스는 페이지 래퍼로 작동하며, 우리는 절대 위치에 화면을 배치하고 싶기 때문에이 점의 위치를 기존으로 설정합니다. 우리는 컨테이너에게 기본 배경색을 줄 것입니다. 그러나 물론 우리는 두 개의 화면 배경 모두와 다른 색상을 설정하기 때문에 이것은 보이지 않습니다.

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

08. 배경 이미지를 추가하십시오

왼쪽과 오른쪽 섹션 모두 이미지를 표시하며 웹 사이트에서 로열티없는 재고 이미지를 찾을 수 있습니다. unsplash. , 자영안 또는 펠트 (이 튜토리얼에서 사용한 것). 일을 더 쉽게하기 위해 CSS에 연결할 수있는 IMGBB라는 무료 이미지 호스팅 및 공유 서비스를 사용했습니다.

 .screen.left {
  왼쪽 : 0;
  배경 : URL ( 'https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') 센터 센터 없음;
  배경 크기 : 덮개;
  
    & amp; 전에 {
       위치 : 절대;
      내용 : "";
      너비 : 100 %;
      높이 : 100 %;
      배경 : $ left-bgcolor;
    }
}

페이지의 오른쪽에는 IMGBB를 사용하여 배경 이미지가 표시되며 배경색을 분홍색으로 설정합니다. 다시, 우리는 배경 크기를 설정합니다 덮개 ...에 이렇게하면 우리는 우리가 전체 포함 요소를 덮을 수있게 해줍니다. .화면 수업.

 .screen.right {
  오른쪽 : 0;
  배경 : URL ( 'https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') 센터 센터 없음;
  배경 크기 : 덮개;
  
   & amp; 전에 {
      위치 : 절대;
      내용 : "";
      너비 : 100 %;
      높이 : 100 %;
      배경 : $ Right-BGColor;
    }
}

09. 전환 및 호버 효과를 추가합니다

두 화면 모두에 대한 호버 효과의 애니메이션 속도는 변수의 값을 보유하는 전환으로 제어됩니다. $ AnimatesPeed. , 1000ms (1 초)입니다. 그런 다음 우리는 애니메이션을 몇 가지 완화 시켜서 끝내고, 우리에게 더 부드러운 애니메이션을주는 데 도움이되는 쉽고 빠져 나가는 것을 쉽게 만들어냅니다.

 .screen.left, .screen.right, .screen.right : 이전 : .screen.left : 전에 {
  전환 : $ AnimatesPeed는 모두 용이하게 흡입합니다.
}

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

 .Hover-left .left {
  너비 : $ hover 너비;
}

. 호버 왼쪽. {
  너비 : $ 작은 너비;
}
. 호버 왼쪽. 라이트 : 전에 {
  Z- 색인 : 2;
}

이는 JavaScript를 사용하여 새 클래스가 마우스 호버에 추가되고 적절한 화면이 그에 따라 늘어날 수있는 왼쪽과 정확히 동일합니다. 우리는 또한 그를 확인해야합니다 Z-index. 로 설정됩니다 2. 따라서 CTA 버튼이 더욱 두드러지게됩니다.

. 오른쪽. {
  너비 : $ hover 너비;
}

.- 오른쪽 .left {
  너비 : $ 작은 너비;
}

. 호버 오른쪽 .left : 전에 {
  Z- 색인 : 2;
}

10. 자바 스크립트로 이동하십시오

우리는 CSS 클래스를 추가하고 제거하는 데 도움이되는 바닐라 자바 스크립트를 사용하여 새로운 ES6 기능 중 일부를 사용할 수 있도록 도와 드리겠습니다. 우리가해야 할 첫 번째 일은 일정한 변수를 선언하는 것입니다.

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

 const doc = 문서;

이제 우리는 세 가지 상수를 저장할 필요가 있습니다. .권리 , .왼쪽 과 .컨테이너 선택기. 우리가 상수를 사용하는 이유는 우리가 이들의 가치를 바꾸고 싶지 않으므로 상수를 사용하여 의미가 있기 때문입니다. 지금 이들을 사용하면 앞으로 나아갈 수 있으며 마우스 이벤트를 추가 할 수 있습니다.

 const 오른쪽 = doc.querySelector ( "오른쪽");
const left = doc.querySelector ( "left");
const container = doc.querySelector ( "container");

그를 사용하여 왼쪽 마지막 단계에서 선언 된 상수 변수 이제 이벤트 리스너를 추가 할 수 있습니다. 이 이벤트는 일 것입니다 마우스 셔츠 이벤트 및 콜백 함수를 사용하는 대신 다른 ES6 기능을 사용합니다. 화살표 기능 '(() = & gt;) ...에

 // 호버의 컨테이너 요소에 클래스 추가
left.addeventListener ( "mouseEnter", () {{
  container.classlist.add ( "호버 왼쪽");
});

11. 클래스를 추가하고 제거하십시오

마지막 단계에서 우리의 이벤트 리스너가 마우스 셔츠 주 컨테이너 클래스를 대상으로하는 이벤트를 사용하여 새 클래스를 추가합니다. 왼쪽으로 나아가는 것 왼쪽 섹션 요소에. 이렇게 호출 된 이제는 이제 우리가 해제 할 때 그것을 제거해야합니다. 우리는이를 사용하여 이것을 할 것입니다 쥐레 끈 이벤트와 그 .없애다() 방법.

 // 호버에 추가 된 클래스를 제거합니다.
left.addeventListener ( "mouseleave", () {{}
  container.classlist.remove ( "호버 왼쪽");
});

지금까지 우리는 왼쪽 화면에서 모든 것을 해냈습니다. 이제 우리는 자바 스크립트를 완성하고 오른쪽 섹션 요소에 클래스를 추가하고 제거합니다. 다시 우리는 멋지고 깔끔하게 보이는 모든 것을 유지하기 위해 여기에서 화살표 기능 구문을 사용했습니다.

 right.addeventListener ( "MouseEnter", () {{
  container.classlist.add ( "hover-right");
});

right.addeventlistener ( "mouseleave", () {{
  container.classlist.remove ( "호버 오른쪽");
});

12. 그것을 반응시킵니다

프로젝트가 없습니다 - 얼마나 크거나 작은 것이 상관없이 - 반응을 피하지 않아야합니다. 따라서이 단계에서는 CSS에 약간의 미디어 쿼리를 추가 하고이 작은 프로젝트를 모바일 장치에 적응하여 가능한 한 최선을 다할 것입니다. 그것은 그것을 체크 아웃 할 가치가있다 원래 Codepen. 이것이 어떻게 작동하는지 확인하십시오.

 @media (최대 너비 : 800px) {
  H1 {
    글꼴 크기 : 2rem; }

  .Button {
    너비 : 12rem;
  }

페이지의 너비가 800px로 떨어지면 글꼴과 버튼이 크기가 줄어들 었는지 확인했습니다. 따라서 일을 끝내려면 높이도 타겟팅하고 페이지 높이가 700px 이하로되면 버튼이 페이지를 움직이는지 확인합니다.

 @Media (최대 높이 : 700px) {
  .Button {
    상단 : 70 %;
}}

페이지를 저장하고 싶습니까? PDF로 내보내고 보안으로 저장하십시오 클라우드 스토리지 ...에

웹 디자인 이벤트 런던 생성 2018 년 9 월 19-21 일에 반환하여 업계 최고의 스피커 일정, 워크샵의 하루 종일 및 귀중한 네트워킹 기회를 제공합니다. 지금 당신의 티켓을 얻으십시오 ...에

이 기사는 원래 Net Magazine에 게시되었습니다 문제 305. ...에 지금 등록하십시오 ...에

자세히보기 :

영감을 얻은 5 가지 감각적 인 새로운 웹 사이트
애니메이션 3D 텍스트 효과를 만듭니다
19 그레이트 시차 스크롤 웹 사이트

애니메이션 스플릿 스크린 랜딩 페이지 만들기

01. 설정하십시오

02. HTML을 마칩니다

03. Sass 변수를 탐험하십시오

04. 바디 스타일링 조정

05. 스타일 섹션 제목

06. CTA를 탁월하게 만드십시오

07. 컨테이너 배경 및 화면을 설정하십시오

08. 배경 이미지를 추가하십시오

09. 전환 및 호버 효과를 추가합니다

10. 자바 스크립트로 이동하십시오

11. 클래스를 추가하고 제거하십시오

12. 그것을 반응시킵니다

어떻게 - 가장 인기있는 기사

장미를 그리는 방법 : 초급 및 고급 팁

Maya 용 Renderman으로 장면 만들기

Elven Maiden을 칠하는 방법

오일에 물을 졸졸 수있는 페인트 졸졸

훌륭한 Poser Art

렌더링을 향상시키는 4 가지 간단한 단계

모든 이메일 클라이언트에서 완벽한 메시지 생성

벡터 로고를 2D에서 3D로 가져가는 방법

카테고리