배경 및 소개
컴퓨터 나 휴대폰에서 현대 웹 사이트를 탐색하는 경우 웹 사이트를 아래 / 위로 스크롤 할 때 전체 화면이 스크롤 방향으로 움직이는 것처럼 보이는 것을 경험했을 것입니다. 이것이 배경 효과 인 경우 스크롤 할 때 전경의 정보도 변경됩니다. 이 효과는 Parallax Scrolling으로 간단히 설명 할 수 있습니다.
스크롤
스크롤을 통해 그것이 의미하는 바를 이해합시다. 웹 페이지를 볼 때 모든 방향 (위, 아래, 왼쪽 및 오른쪽)으로 웹 페이지를 탐색하는 작업을 스크롤이라고합니다.
일반적으로 데스크톱 컴퓨터 사용자 인 경우 마우스의 스크롤 휠을 사용하여이 작업을 수행합니다.
역사
스크롤이라는 단어를 봅시다. 옛날에는 먼 곳에있는 다른 사람들에게 메시지를 보내기 위해 손으로 쓴 두루마리를 사용했습니다. 이 두루마리는 아래와 같이 보입니다.
두루마리를 들고있는 사람의 행동을 상상해보십시오. 내용을 모두 읽으려면 "스크롤"하고 더 멀리 굴려야합니다. 이 두루마리는 기록 텍스트 나 결정을 유지하는 데에도 사용되었습니다. 시간이 지날수록 두루마리는 파피루스, 양피지, 종이와 같은 다양한 필기 도구로 준비되면서 사용이 증가했습니다.
컴퓨터가 진화함에 따라 매우 큰 문서, 표 및 이미지를 처리하고 저장할 수있게되었습니다. 때로는 데이터가 너무 많아서 화면 크기가 사용자에게 데이터를 표시하기에 충분하지 않을 수 있습니다. 표시 할 데이터가 창 또는 표시 영역의 크기보다 크면 데이터가 숨겨집니다. 이것은 화면 영역을 확장하는 접근 방식을 위해 필요했습니다.
화면 확장을위한 몇 가지 옵션은 다음과 같습니다.
- 화면 크기를 늘리려면
- 데이터 크기를 줄이려면
- 스크롤을 사용하려면
이 스크롤 메커니즘은 그래픽 디자인 및 사진 편집 작업을하는 사람들에게 더 중요합니다.
시차 스크롤링 원점
시차 스크롤링의 역사를 살펴 보겠습니다. 먼저 시차라는 단어의 의미를 이해할 것입니다. 시차라는 단어는 그리스어에서 유래했습니다.παράλλαξις (parallaxis), 이것은 교대를 의미합니다.
각도에서 물체를 보면 물체가 특정한 방식으로 나타납니다. 그러나 같은 물체를 다른 위치에서 움직이면 물체의 움직임이 뚜렷하게 나타납니다. 이 현상을 Parallax라고합니다.
이제 Parallax의 기원과 배경을 이해 했으므로 이제 웹 디자인에서 Parallax 스크롤링의 역사와 개념을 이해하겠습니다.
정의
Wikipedia에 따르면 – Parallax scrolling 배경 이미지가 전경 이미지보다 카메라를 더 천천히 지나가는 컴퓨터 그래픽 기술로, 2D 장면에서 깊이있는 환상을 만들고 가상 경험에 몰입감을 더합니다.
시차 스크롤링은 애니메이션 초기에 사용되었습니다. 많은 애니메이션 스튜디오 (예 : Disney)는 시차 효과를 얻기 위해 다중 평면 카메라를 사용했습니다.
컴퓨터 그래픽 기술이 JavaScript와 같은 최첨단 프레임 워크와 함께 발전함에 따라 웹 디자이너와 개발자는 이제 풍부한 경험을 가진 사이트를 구축 할 수 있습니다. 시차 스크롤링은 몇 개의 레이어로 시작되었지만 컴퓨터의 스크롤 막대를 사용하여 한 단계 더 발전했습니다. 기술은 동일하게 유지되었지만 Scrolling에 대한 적용으로 인해 독특한 경험이 만들어졌습니다.
예
시차 스크롤링은 현대 웹 사이트에서 광범위하게 사용됩니다. 시차 스크롤링은 모바일뿐 아니라 데스크톱 사이트에서도 한 번에 구현 될 수 있으므로 최근 몇 년 동안 이러한 사이트의 인기가 급증했습니다.
시차 스크롤링을 사용하는 웹 사이트의 몇 가지 예는 다음과 같습니다.
베어 그릴 스
애니메이션이 진행됨에 따라 웹 사이트 콘텐츠가 상호 작용하는 방식을 볼 수 있습니다. 앞으로 스크롤하면 점점 더 많은 정보가 표시됩니다.
당신의 돈을 중요하게 만드십시오
독자들에게 신용 협동 조합의 혜택을 소개하기 위해이 사이트에서는 스토리 라인을 안내합니다. 앞으로 스크롤하면 정보가 고유 한 방식으로 표시됩니다.
InfoQuest 인포 그래픽
직원이 직장에서 중요한 정보를 찾는 여정은 스크롤 경험을 사용하여 묘사됩니다.
GitHub 404
이것은 일반적인 시차 경험과 약간 다릅니다. 마우스 포인터를 그 위로 가져 가면 화면 상단의 개체가 이동합니다.
시차 스크롤링의 응용
지금 쯤이면 시차 스크롤링이 다양한 디지털 미디어에서 유용하다는 것을 정의와 배경에서 분명히 알 수있을 것입니다. 일부 응용 프로그램은 시차 스크롤링입니다-
게임 디자인
시차 스크롤링은 게임 디자인에 널리 사용됩니다. 캐릭터는 배경을 기준으로 움직여야하며 마우스와 키보드를 사용하는 플레이어의 컨트롤로 전체 경험을 변경해야합니다. 게임 디자인은 시차 스크롤링을 사용하는 매우 원시적이지만 트렌디 한 방법입니다.
웹 사이트
사용자가 웹 사이트에 익숙해 지도록하기 위해서는 역동적이고 다른 경험이 중요합니다. 위에서 설명한 웹 사이트의 예에서 알 수 있듯이 시차 스크롤은 대화 형 방식으로 표현되기 때문에 콘텐츠에 추가됩니다.
이 장에서는 웹 디자인의 개념과 웹 디자인에서 시차 스크롤을 사용하는 이점에 대해 설명합니다.
웹 디자인 배경
20 초부터 일 세기, 종이 매체로 인해 디지털 미디어에 치열한 경쟁으로 가지고있다. 디지털 미디어에는 우리가 인터넷에서 보는 것과 함께 따라 오는 연합 잡지가 포함됩니다.
주간 / 월간 구독의 일부로받는 뉴스 레터도 디지털 미디어에 포함됩니다. 주로 디지털 미디어는 모바일 및 데스크톱 장치에 크게 의존합니다. 모바일 (핸드 헬드) 및 데스크톱 장치에서 콘텐츠를 볼 수있을 때 차이가 있습니다. 콘텐츠가 두 장치 중 하나에 표시되는 방식, 콘텐츠 디자인의 특정 스타일이 적용됩니다.
이 디자인 스타일을 Web Designing. 디자인이나 코딩의 관점에서 웹 페이지 디자이너가 웹 페이지를 만들 때 모바일 장치도 고려합니다.
Wikipedia에 따르면 Web design 웹 사이트 제작 및 유지 관리에있어 다양한 기술과 분야를 포함합니다. 이러한 기술 중 하나는 사용자에게 영향력있는 경험을 디자인하는 것입니다. 웹 디자인은 이러한 경험을 충족시키고 페이지 콘텐츠를 정렬하는 체계적인 방법을 제공하고 다양한 스타일을 제공합니다.
웹 디자인에는 인터페이스 디자인, 그래픽 디자인 및 코드 작성을위한 특정 표준 사용이 포함됩니다. 이 작업은 한 사람 또는 팀원에 의해 수행 될 수 있습니다.
이 작업을 쉽게 할 수있는 많은 도구가 시장에 나와 있지만 웹 페이지 모양을 만드는 것은 창의적인 기술에 달려 있습니다.
현대 웹 디자인
기술이 발전함에 따라 지식이 폭발적으로 증가합니다. 인터넷은 하나가되었고 우리 삶의 질을 급등 시켰습니다. 어느 시점에서나 일반 인터넷 사용자가 점점 더 많은 정보를 처리하고 있습니다. 이 정보는 데스크톱 컴퓨터 또는 휴대용 장치의 웹 사이트 형식 일 수 있습니다. 태블릿 또는 휴대폰.
많은 정보가 사용자의 관심을 끌려고하지만 웹 경험을 디자인하는 사람 으로서는 there are only 3 seconds allocated to pass the message across.
이것을 어떻게 처리합니까? 모든 웹 디자인의 소스에 있기 때문에 메시지를 전달하는 것이 더 중요합니다. 소통하는 웹 사이트를 구축하는 동시에 사용자를 끌어 들이고 콘텐츠에 충실하게 만들어야합니다. 참으로 어려운 일입니다.
주어진 웹 콘텐츠에 대한 광범위한 작업 범위를 고려할 때 점점 더 많은 사람들이 웹 디자인의 세계에 빠져들고 있습니다. 창의적인 웹 디자이너는 좋은 사용자 경험을 만드는 놀라운 재능 덕분에 마을의 화제가되었습니다. 웹 디자이너는 현재 마케팅 / 광고 회사에 취직하거나 스스로 웹 디자인에 뛰어들 수 있습니다.
Aesthetic appeal is the key for a given content on web. 이는 웹 디자이너가 디자인, 색상, 간격 등의 원칙과 기초를 알고 있어야 함을 의미합니다. 점점 더 많은 사용자가 매일 우수한 품질의 웹 콘텐츠를 보게됩니다. 현재 웹 페이지 또는 웹 사이트를 몇 시간 또는 몇 분 전에 방문한 웹 페이지와 비교할 것이 분명합니다. 콘텐츠의 순서와 좋은 그래픽 및 색상으로 인해 많은 독립형 배너 / 페이지가 인터넷에서 인기를 얻었습니다.
예
간단한 그래픽의 경우를 살펴 보겠습니다. 인터넷에는 밈이라는 그래픽이 많이 있습니다. 그들은 간단합니다Graphics Interchange Format (GIF)그래픽 내부에 일부 텍스트가 포함 된 이미지. 이 밈은 세계 일부 지역의 최근 사건을 기반으로 인터넷을 돌고 있습니다. 이 예를 살펴보면, 그들이 가진 유일한 호소는 그래픽과 관련성 있거나 관련없는 텍스트입니다.
그럼에도 불구하고 인터넷에서 놀라운 가능성에 대해 생각하게 만드는 인기를 얻었습니다.
따라서 웹 디자인이 효과적이기 위해서는 창의성과 메시지 전달 방법이 모두 중요한 역할을합니다.
It is important point to note that a successful web page is combination of Web Design and Web Development. 현재 시장 추세에 따라 웹 디자이너와 함께 웹 개발자는 팀에 있어야합니다. 웹 디자이너는 항상 영감을 찾고 자신의 창의력을 사용하여 그래픽 및 관련 색 구성표를 만듭니다. 웹 개발자는 자신의 코딩 기술을 사용하여 웹 사이트에 그래픽과 색 구성표를 적용합니다.
웹 디자이너는 웹 개발자가 의도 한 그래픽 또는 색 구성표를 사용할 수 있도록 코드 작성에 대한 지식도 가지고 있어야합니다. 메모장과 같은 간단한 응용 프로그램의 간단한 코드는 웹 디자이너가 웹 개발의 주도권을 잡는 데 도움이 될 수 있습니다.
시차 스크롤링 사용
Parallax Scrolling은 웹 디자이너와 웹 개발자 모두의 작업 경계에 속합니다. 웹 디자이너는 InVision, UXPin과 같은 도구를 사용하여 Parallax Scrolling의 효과를 만들어 웹 개발자에게 스크롤에서 의도 한 동작을 전달할 수 있습니다. 또한 웹 개발자는 시차 스크롤 효과를 만들기 위해 자신의 기술을 사용합니다. 이것은 다른 JavaScript, CSS 및 jQuery 기술로 수행 할 수 있습니다. 이러한 각 방법에 대한 자세한 설명은 다음 장에서 제공됩니다.
이전 섹션에서 지정한 정의에 따라 parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
시차 스크롤 효과를 만드는 간단한 CSS 기술이이 웹 사이트 인 The Urban Walks에 나와 있습니다.
위의 스크린 샷에서 볼 수 있듯이 두 번 스크롤하면 화면 중앙의 휴대폰에서 내용이 변경됩니다. 또한 첫 번째 스크롤을 보면 휴대폰의 배경이 바뀝니다.
이 전환은 전화기가 그 자리에서 일정하고 아래로 스크롤 할 때 배경이 변경된다는 느낌을줍니다. 이 효과를 시차 스크롤 효과라고합니다. 화면의 맨 오른쪽에 점 형태로 화면 표시기가 있으므로 아래로 스크롤하고 있음을 알고 있습니다.
시차 스크롤링의 첫 번째 사용은 오래된 컴퓨터 게임이었습니다. 캐릭터가 배경보다 빠르게 움직일 때 고정 배경 이미지가 더 느린 속도로 움직이는 곳. 이러한 게임의 몇 가지 예는 Disney의 Aladdin과 Disney의 Lion King입니다. 이 게임은 각각 1993 년과 1994 년에 출시되었습니다.
게임에서 시작된 것은 사실이지만, 현재 많은 웹 디자이너는 시청자가 자신의 사이트를 좋아하게 만드는 효과를 강조하고 있습니다. 시차 스크롤링의 장점은 웹 사이트에서 모바일 사이트로 확장됩니다.
한때 데스크톱 버전 용 시차 스크롤링으로 설계된 이러한 웹 사이트에는 모바일 화면도 지원하는 코드가 추가됩니다.
웹 및 모바일에서 시차 스크롤링의 장점
이 섹션에서는 아래에서 설명하는 다양한 관점에서 시차 스크롤링을 사용하는 이점에 대해 설명합니다.
청중의 관점에서
시차 스크롤링과 관련된 재미있는 요소가 있습니다. 위의 예에서 보았 듯이 사용자가 다른 화면에서 스크롤 할 때 천 단어의 정보를 전달하는 것이 더 쉬워졌습니다.
처음 사용자를 고려하면 각 스크롤과 관련된 호기심이 있습니다. 따라서 웹 사이트의 경험을 풍부하게 할뿐만 아니라 사용자가 웹 사이트 자체를 처음 방문 할 때 더 많은 시간을 소비 할 가능성이 높아집니다.
사용자가 스크롤에 흥미를 느끼면 사용자 참여 비율이 크게 증가합니다.
사용자는 정보가보다 분명한 방식으로 제공되므로 정보를 파악하는 과정에 대해 생각할 필요가 없습니다.
어떤 경우에는 로고 또는 메뉴 아이콘과 같은 화면의 다른 항목을 애니메이션하여 제공하는 제품 / 서비스에 대한 이야기를 넣을 수 있습니다.
기술적 관점에서
데스크톱 버전에 대한 시차 스크롤링을 구현하면 모바일 웹 사이트 또는 화면에 동일한 프레임 워크를 매우 쉽게 사용할 수 있습니다.
코드 스 니펫이 간단하고 재사용이 가능하기 때문에 마케팅 대행사 또는 웹 사이트 서비스 제공 업체 인 경우 신규 고객을 확보 할 때이 작업이 수월해집니다.
시차 스크롤링에 대한 지식은 CSS, JavaScript 등과 같은 프런트 엔드 프레임 워크에 대한 더 많은 전문 지식과 함께 제공됩니다.
웹 개발자의 경우 시차 스크롤링 효과를 만들 때 다양한 기술을 사용할 수 있습니다. 이러한 기술 중 하나는Cascaded Styling Sheets(CSS).
CSS는 HTML 요소가 화면에 표시되는 방식을 설명합니다. 하나는 CSS 파일을 만들 수 있으며 전체 웹 사이트에 사용할 수 있습니다. 각 HTML 요소에 스타일을 추가하고 웹 페이지의 다른 부분에서 관리하는 것보다 CSS 파일을 추가하는 것이 더 간단합니다.
Note−이 장에서 아래에서 설명하는 방법 중 일부는 모바일 장치가 아닌 데스크톱 컴퓨터에만 해당됩니다. 특정 기술이 모바일 장치에 적합하지 않은 경우 단계에서 언급됩니다.
CSS가 문서 개체 모델 (DOM)에 대한 모든 추가 도면으로 오프로드되는 것을 고려하면 CPU에 부담을주지 않고 하드웨어 가속을 더 많이 활용하고 부드러운 효과를 얻을 수 있습니다.
절대 위치 방법
이 방법은 사용 가능한 다른 옵션에 비해 상대적으로 무게가 가볍기 때문에 시차 효과를 만드는 데 자주 사용됩니다. 배경 이미지의 위치는 화면의 다른 콘텐츠에 상대적으로 고정되어 있습니다. 아래에 설명 된 예제에서 CSS의 마법을 사용하여 수행하는 방법을 볼 수 있습니다.
이 섹션에서는 절대 위치 방법에 대해 두 가지 방법을 살펴 보겠습니다.
- 단일 배경
- 여러 배경
단일 배경 방법
이 방법에서는 동일한 폴더에 두 개의 파일을 만듭니다. 동일한 목적으로 아래에 주어진 단계를 준수하십시오-
Step 1
동일한 폴더에 두 개의 파일을 만들어야합니다. 첫 번째 파일에는 HTML 마크 업이 있고 두 번째 파일에는 CSS 코드가 있습니다.
Step 2
이제 HTML 마크 업을 정의하겠습니다. 아래 주어진 코드를 관찰하십시오-
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
메모장을 엽니 다. 위의 코드 스 니펫을 복사하여 붙여 넣으십시오.
파일을 저장할 때 Save as type, 고르다 All Files. 필요에 따라 파일에 이름을 입력하지만 확장자가 뒤에 와야합니다..html 아래 스크린 샷과 같이.
Step 4
파일이 저장되면 메모장에 다른 파일을 만들고 아래 주어진 코드를 붙여 넣습니다.
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}마지막 단계에서 보셨 듯이 파일을 저장할 때 Save as 유형, 선택 All Files. 필요에 따라 파일 이름을 입력하고 확장자를 추가하십시오..css 그것에.
코드 분석
코드의 어느 부분이 시차 효과를 담당하는지 이해합시다. 시차에 대한 가장 중요한 작업은 원근법 및 변환 규칙을 사용하여 수행됩니다. 인용하다line 15위의 코드 스 니펫에서. 우리를위한 관점은BgContainer먼저. 이것은 변환 규칙을위한 플랫폼을 시작합니다.
에서 Parallax 40 행부터 시작하는 컨테이너, transform 48 행의 규칙은 translate (-1px)를 사용하여 BgContainer div를 백그라운드로 푸시합니다.
이동 및 축척 매개 변수의 값을 수정하여 시차의 깊이를 수정할 수 있습니다.
html 파일을 열면 아래와 같이 시차 효과가 나타납니다.
Note − 나머지 튜토리얼에서는 위의 방법에서 제공 한 폴더 구조에 따라 HTML 및 CSS 파일을 독자가 생성 할 수 있다고 가정합니다.
다중 배경 방법
이 방법에서는 사용자가 페이지를 아래로 스크롤 할 때 다른 이미지가 표시됩니다. 이 효과를 설명하기 위해 다양한 색상 조합으로 사용되는 연필 이미지가 있습니다.
아래와 같이 HTML 페이지에 대한 다음 코드를 관찰하십시오.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>이전 예와 유사하게 styles.css이 HTML 파일과 같은 위치에 저장됩니다. First, Second, Third 및 Fourth라는 이름의 세 가지 div가 있습니다.
시차 스크롤링을위한 CSS 코드는 다음과 같습니다.
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}여기에서 7 행에서 시차 효과를 만듭니다. 여기서 중요한 속성은 background-attachment:fixed.
이 속성을 사용하면 색연필이있는 첫 번째 이미지가 항상 맨 위에 유지됩니다. 아래로 스크롤하면 28 행에서 설명한 다른 이미지가 표시되기 시작합니다.
결과적으로 아래 gif와 같이 시차 효과를 볼 수 있습니다. 다음 이미지는 다중 배경에 대해 고려한 예제의 스크린 샷입니다.
순수 CSS 시차
이전 두 가지 방법의 지식을 결합하여 고급 Pure CSS Parallax 효과를 만들어 보겠습니다.
차이점은 우리가 image 요소와 z-transform특성. 속성에 대한 설명은 CSS 코드 다음에 제공됩니다.
메모장에서 일반적인 방법을 사용하여 다음 코드로 HTML 파일을 만듭니다.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>CSS 파일의 경우 코드는 다음과 같습니다.
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}코드 분석
첫 번째 레이어의 위치를 line 26 사용하여 position:absolute특성. 위치도 0으로 하드 코딩됩니다.
에 parallax_two, 제목이있는 레이어입니다. z-index: 10제목에 플로팅 효과를 제공합니다. 레이어parallax_three margin-top 속성을 제공하여 아래쪽으로 이동합니다.
따라서 시차 효과의 복잡성 수준을 높일 수 있습니다.
아래 그림과 같이 효과를 관찰하십시오.
Parallax 효과를 만들기 위해 가장 많이 사용되는 방법은 JavaScript를 사용하는 것입니다. 이 장부터는 시차 스크롤링을 달성하는 데 사용되는 일부 라이브러리와 JavaScript의 개념에 대해 논의 할 것입니다.
순수한 JavaScript를 사용하는 것은 웹 사이트 성능을 최적으로 유지하는 데 적합합니다. 성능 측면에서 라이브러리를 사용하면 다른 많은 이점이 있습니다. 그러나 코드 구성을 더 잘 이해하기 위해 순수한 JavaScript 패럴 랙스 구현부터 시작하겠습니다. 재미있는 사실은 때때로 순수한 자바 스크립트가vanilla 자바 스크립트.
Pure JavaScript를 사용한 패럴 랙스 스크롤링
먼저 아래와 같은 코드로 메인 HTML 파일을 생성합니다. HTML 페이지는 네 개의 제목 텍스트로 구성됩니다.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>이 예에서는 4 번 줄에서 myscripts.js HTML 파일 및 CSS 파일과 동일한 폴더에 저장됩니다.
이제 아래와 같이 CSS 파일을 준비하겠습니다.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}이제 JavaScript 부분이 나오고 메모장에 파일을 만들고 myscripts.js 로 저장합니다 .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});코드 분석
JavaScript 코드를 분석해 보겠습니다.
코드 line number 1 to 4 도우미 기능을 나타냅니다.
6 행에서 시차 요소를 선택하고 scroll창에 이벤트. 스크롤되는 영역의 양을 결정하기 위해scrolledHeight특성. 화면이 아래로 스크롤되면backgroundPositionY 시차 요소에 대해 업데이트됩니다.
시차 효과를 늦추기 위해 1.5로 나누었습니다.이 숫자는 원하는 숫자로 변경할 수 있습니다.
이제 아래 스크린 샷과 같이 스크롤되는 페이지를 볼 수 있습니다.
ScrollMagic JavaScript 라이브러리 사용
이전 섹션에서 논의했듯이 순수한 JavaScript를 사용하여 시차 효과를 만들 수 있지만 사용자 경험을 향상시킬 강력한 JavaScript 라이브러리가 있습니다. ScrollMagic은 시차 스크롤 상호 작용을 만들기위한 라이브러리 중 하나입니다.
아래에 주어진 예제의 도움으로 이것에 대해 더 논의 해 보겠습니다.
Note−이 예제에서는 간단하게 유지하기 위해 CSS를 HTML 파일에 저장합니다. 또한 JavaScript 코드는 동일한 문서에 있습니다. 간단히 말해서, HTML 파일을 하나만 만들고 필요한 CSS와 함께 ScrollMagic 라이브러리를 참조하게됩니다.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>위의 코드에서 볼 수 있듯이 우리는 line 3 to 6. CSS 코드는 9 행에서 19 행까지 지정됩니다.
콘텐츠 전달 네트워크
3 ~ 6 행의 스크립트 참조는 ScrollMagic CDN (Content Delivery Network) URL을 가리 킵니다. CDN을 사용하면 웹 사이트 속도를 늦추지 않고 필요한 라이브러리를로드 할 수 있으므로 최신 웹 사이트 개발에 적합합니다.
라이브러리에 사용자 정의가 필요한 경우 이러한 효과를 활용하려면 해당 서버에서 라이브러리를 호스팅해야합니다. 라이브러리의 기본 기능을 사용하는 경우 CDN URL을 사용하는 것이 효율적입니다.
위의 HTML 코드는 두 부분으로 구분 된 이미지를 보여줍니다. 첫 번째 구분은 제목과 함께 나타납니다.These are bricks 그리고 두 번째 부분은 – Some More Bricks.
9 ~ 19 행의 CSS 코드에서 각 시차 div의 위치와 스타일 만 지정합니다.
이 부드러운 시차를 만드는 작업 sceneScrollMagic 라이브러리에서 수행됩니다. 43 ~ 62 행의 스크립트 코드를 참조하면 ScrollMagiccontroller 호출되고 scene 생성됩니다.
장면은 화면의 80 %가 점유 될 때 시차 효과를 생성하도록 DOM을 안내합니다. JavaScript는 스크롤 트리거를 이해하는 데 사용됩니다. 결과적으로이 페이지에 떠 다니는 경험을 얻을 수 있습니다.
Note − 위의 이미지를 GIF 이미지로 생각하면 텍스트 분할의 부드러운 효과를 볼 수 없습니다.
애니메이션 트리거
ScrollMagic Library로 다양한 사용자 경험을 생성 할 수있는 가능성은 무한합니다. 스크롤시 애니메이션을 트리거하려면 아래 제공된 코드 스 니펫을 관찰하십시오.
이를 위해서는 두 개의 파일 * minus가 필요합니다. 하나의 HTML 파일과 하나의 CSS 파일.
아래 표시된 코드로 HTML 파일을 만듭니다.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>이제 다음 코드가 포함 된 CSS 파일을 만듭니다.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}코드 분석
HTML 코드를 참조하면 ScrollMagic 코드는 line 17 그리고까지 계속 line 25. 이 섹션에서는 두 개의 ScrollMagic 장면을 만듭니다. 첫 번째 장면은 벽돌 이미지 용이고 다른 장면은 배너 애니메이션 용입니다.
에 명시된대로 setTween 기능 line 20, 화면 크기의 40 %에서 스크롤 동작이 발생하면 배너가 표시되는 다음 장면이 시작됩니다.
ID가있는 div의 불투명도- square CSS 파일에서 제어됩니다. line 10 과 line 15.
결과적으로 페이지에서 아래 애니메이션을 볼 수 있습니다.
수평 스크롤
시차 스크롤을 적용하고 수평 스크롤을 얻을 수도 있습니다. ScrollMagic 라이브러리를 사용하여 스크롤링의 수평 효과를 만들 수 있습니다. 아래 코드를 참조하십시오.
코드는 수평 스크롤 효과를 만드는 데 간단하지만 화면의 수평 이동을 달성하려면 jquery 참조가 필요합니다. jQuery에 대한 자세한 내용은 다음 장에서 제공됩니다. 지금은 아래 코드를 따르십시오.
메인 코드 용 HTML 파일, 스타일 용 CSS 파일, ScrollMagic 함수 호출 용 JS 파일의 세 가지 개별 파일을 만듭니다.
다음은 HTML 문서의 코드입니다.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>스크롤 후 나타나는 세 개의 섹션이 있는지 확인하십시오. 세 섹션은 각각 15, 19 및 23 행에있는 ID title1, title2 및 title3으로 표시됩니다.
CSS 문서의 코드는 다음과 같습니다.
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}코드 분석
세 화면 (또는 섹션)의 배경색이 제공됩니다. lines 10, 22 과 25.
코드에서 각 화면의 상대적 너비를 계산합니다. line 13.
ScrollMagic의 JavaScript 코드는 다음과 같습니다.
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});주목 triggerHook이 속성은 사용자가 스크롤 이벤트 완료에 도달 할 때 스크롤 효과를 제공하는 역할을합니다. 함수TimelineMax 화면에 가로 스크롤 효과를 제공하는 역할을합니다.
각 파일을 생성하면 아래와 같이 가로 스크롤 애니메이션을 볼 수 있습니다.
이전 장에서 우리는 JavaScript 라이브러리를 사용하는 좋은 효과가 웹 사이트에 어떻게 추가되는지 이해했습니다. Photoshop과 결합 된 JavaScript는 놀라운 유연성을 제공하고 웹 사이트에 시차 스크롤을 쉽게 추가 할 수 있습니다.
이 장에서는 시차 스크롤 효과를 추가하는 세 가지 Photoshop 플러그인을 살펴 보겠습니다. 이전 장에서 JavaScript에 대해 언급 한 것처럼 HTML 코드에서 Photoshop 참조를 사용하여 강력한 Photoshop 시차 스크롤링을 만들 것입니다.
Photoshop 플러그인에 대해 주목해야 할 중요한 점은 플러그인이 업데이트되지 않는 경우가 많으므로 시차 스크롤링에 플러그인을 사용하기 전에 몇 가지 조사를해야한다는 것입니다.
간단한 Parallax.js를 사용한 시차 스크롤링
Photoshop 플러그인을 사용하여 Parallax.js를 사용하면 많은 번거 로움없이 시차 스크롤 효과를 만들 수 있습니다. jQuery 플러그인을 고려하려면 부트 스트랩과 같은 고급 라이브러리를 포함해야합니다. 이 장에서는 코드에 HTML5 태그가 있습니다.
아래에 표시된 HTML 파일을 살펴 보겠습니다.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>분석 코드
위의 코드 스 니펫은 두 개의 이미지와 그 사이에 샘플 텍스트가있는 페이지의 코드를 보여줍니다.
보시다시피 코드는 <!DOCTYPE html>이것은 코드가 HTML5 기반이라는 것을 브라우저에 알리는 일반적인 방법입니다.
그만큼 <meta> 태그 line 4 to 6해석을위한 기계 인 코드를 보여줍니다. 이 코드의 영향을 확인할 수 없습니다. 여기서 주목해야 할 중요한 사항은-meta 태그를 사용하면 웹 개발자가 표시되는 데이터에 대한 향상된 제어 권한을 얻습니다.
또한 line 8 and 9, 우리는 Bootstrap과 함께 CSS 스타일 시트를 포함했습니다. 특정 글꼴 및 타이포그래피의 경우 Bootstrap이 널리 사용되는 라이브러리입니다.
Lines 10 and 11Photoshop 및 Parallax.js 라이브러리를 관리합니다. 시차 이미지의 효과를 내기 위해 Parallax.js에 대한 제어를 포함하는 것이 중요합니다. 당신은 찾을 수 있습니다data-parallax 재산 div 의 위에 line 21, 필요한 시차 효과를 위해 parallax.js 라이브러리를 호출하기에 충분합니다.
시차 효과는 코드에서 볼 수 있습니다. lines 21 과 line 40. parallax.js에서이 효과를 발생시키는 중요한 속성은 다음과 같습니다.data-parallax, data-image-src, data-natural-width, data-natural-height.
CSS 파일에서는 하나의 속성 만 제공하면됩니다. 다음과 같습니다.
.parallax-container {
height: 500px;
width: 100%;
}위의 HTML 코드에서 CSS 파일에 대한 특정 구조를 만들었습니다. 우리는css, CSS 파일이 있습니다. bootstrap.min.css 과 style.css.
모든 문서가 완료되면 아래와 같이 시차 효과를 볼 수 있습니다.
Photoshop 플러그인을 사용하는 Parallaxator
Parallaxator 최고의 Photoshop 플러그인은 시차 스크롤링 효과를 제공하며 사용하기 쉽습니다. Parallaxator 플러그인, CSS 및 JS 파일은 Parallaxator GitHub 링크에서 다운로드 할 수 있습니다 .
CSS 및 JS 파일이 다운로드되면 아래 표시된 코드를 사용하여 HTML 코드를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>분석 코드
시차 효과는 각 img 태그와 함께 제공되는 parallax_child 클래스에서 제공됩니다. parallax_child는 아래에 제공된 CSS 및 JS 파일과 연결됩니다.
parallaxator 플러그인이 작동하도록 fm.parallaxator.jquery.css 및 fm.parallaxator.jquery.js를 포함했습니다. 이러한 파일은 HTML 파일과 동일한 디렉토리에서 사용할 수 있어야합니다.
CSS 코드는 다음과 같습니다.
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}위 코드의 결과로 시차 효과를 볼 수 있습니다.
Parallax Scrolling을위한 Stellar.js jQuery 플러그인
Stellar.js는 시차 Photoshop 플러그인 목록에 추가 된 또 다른 기능입니다. 더 이상 유지되지 않지만 안정적인 빌드를 사용한 개발자는 시차 스크롤링 효과를 쉽게 사용할 수 있습니다. 최신 버전의 Photoshop과 호환되며 구현하기 쉽습니다.
Stellar.js 플러그인 의 공식 웹 사이트에서 최신 jquery.stellar.js를 다운로드해야합니다 . 다운로드가 완료되면 HTML 및 CSS 파일과 동일한 폴더에이 플러그인 파일을 만듭니다.
HTML 코드를 살펴 보겠습니다.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>분석 코드
Stellar.js가 작동하려면 Photoshop 플러그인이 jquery.stellar.js에서 참조 된 직후에 라이브러리를 포함했습니다. line 6.
Stellar 시차에 대한 함수는 스크립트 태그에서 호출됩니다. line 8 to line 15. 속성과 함께data-stellar-background-ratio, 표시되는 이미지의 오프셋을 설정하고 있습니다. 이 작업은lines 19,20,21 and 22.
CSS 코드는 다음과 같습니다.
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}두 파일이 모두 생성되고 stellar.js 플러그인 파일이 동일한 폴더에 포함되면 아래 스크린 샷과 같은 효과를 볼 수 있습니다.
Bootstrap은 바로 사용할 수있는 구성 요소를 선택할 수있는 인기있는 프레임 워크입니다. 부트 스트랩은 시차 스크롤링을 구현하기 위해 코드를 최적화 할 수 있습니다.
이 장에서는 예제와 함께 시차 스크롤링을 구현하기 위해 Jumbotron 구성 요소를 사용하는 방법에 대해 설명하겠습니다.
Parallax Bootstrap4 Jumbotron이 포함 된 전체 페이지
사용자에게 할인 또는 판매와 관련된 콘텐츠가 포함 된 큰 "클릭 유도 문안"상자가 표시되는 웹 사이트를 상상해보십시오. 일반적으로 Jumbotron은 이러한 장소에서 응용 프로그램을 찾습니다. 사용자의 시선을 사로 잡는 데 유용한 큰 상자입니다.
부트 스트랩의 한 구성 요소 만 사용하고 있으므로이 예제에서는 별도의 CSS 파일을 만들지 않습니다. HTML 코드를 바로 살펴 보겠습니다.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>분석 코드
그만큼 line 64 참조 부트 스트랩 라이브러리. Jumbotron의 여백 및 테두리 반경을 지정합니다.line 8 to 11.
우리가 볼 수 있듯이 line 33, 우리는 특정 이미지를로드 할 큰 상자를 표시하기 위해 Jumbotron 클래스로 div를 만들고 있습니다. 이번에는 이미지에 대한 직접 URL이 없으므로 다운로드 한 이미지를 사용하겠습니다. 예를 들어 고해상도 이미지를 다운로드하고 다음에서 지정할 수 있습니다.line 16.
위의 코드를 실행할 때 볼 수있는 출력은 다음과 같습니다.
이 튜토리얼에서는 시차 스크롤링을 만들기위한 다양한 라이브러리를 연구했습니다. 우리는 프론트 엔드 개발에 사용한 CSS Bootstrap을 사용하는 기본 수준에서 고급 수준까지 모든 측면을 다루었습니다. 무시하기 어려운 웹 페이지를 만들기 위해 창의적인 기술을 적용하는 것이 좋습니다. 시차 스크롤링의 경우 영감을 제공하는 온라인 예제가 엄청나게 많습니다.
시차 스크롤링 활용
소개 장에서 이미 논의했듯이 시차 스크롤링을 사용하여 뛰어난 사용자 경험을 얻을 수 있습니다. 다음은 시차 스크롤링을 포함 할 수있는 사이트에 대한 몇 가지 아이디어입니다.
웹 사이트 타임 라인
이러한 유형의 사이트에는 일반적으로 제품이나 회사 또는 다른 것에 대해 이야기하는 이야기가 있습니다. 시차 효과를 만들어 방문자에게 스토리를 전달하고 다른 애니메이션에 계속 참여할 수 있습니다.
타임 라인 사이트의 경우 배경을 만들고 전경에 텍스트 콘텐츠를 표시하는 것이 좋습니다. 그래픽 디자이너와 팀을 이루어 배경과 어울리는 그래픽을 만들 수 있습니다.
모바일 앱 웹 사이트
오늘날 모바일 앱은 모든 제품 / 서비스 제공에 필수입니다. 모바일 앱이 할 수있는 일과 할 수없는 일에 대한 설명을 제공하는 모바일 앱 웹 사이트를 만들려는 스타트 업이 많이 있습니다.
엄격한 가이드 라인 앱 제작으로 유명한 Apple의 App Store는 모바일 앱에 지원 웹 사이트를 요구합니다. 이 웹 사이트는 항상 매력적이고 사용자 친화적이어야합니다.
Parallax 스크롤링을 사용하면 모바일 이미지를 사용하고 사용자가 페이지를 아래로 스크롤 할 때 다양한 유형의 기능을 표시 할 수 있습니다. 이러한 예제 중 하나는이 자습서의 4 장에서 이미 논의되었습니다.
마우스 오버 효과
시차 스크롤링의 힘을 사용하고 마우스를 올려 다음 수준의 애니메이션을 만들 수 있습니다. 마우스를 올리면 스크롤 방향을 제어하고 시차 효과를 만들 수 있습니다.
이러한 방식으로 훌륭한 경험을 만드는 데 많은 가능성이 있습니다. 아이디어와 올바른 도구 및 라이브러리 세트 만 있으면됩니다.
웹 UI의 미래
기술의 힘과 시차 스크롤링과 같은 창의적인 요소를 통해 놀라운 사용자 경험을 창출하기위한 전례없는 경쟁이 있습니다. 이것은 웹 사이트에만 국한된 것이 아니라 모바일 사이트로도 확장되었습니다.
웹 UI는 현재 정점에 있지만 모바일 장치와 호환되는 웹 페이지는 시간이 필요합니다. Bootstrap 및 jQuery의 예에서 보았 듯이 웹 사이트는 핸드 헬드 장치에서 지원되지 않으면 오래 살 수 없습니다.
기존 라이브러리와 함께 사용자 경험의 미래는 인공 지능과 가상 현실도 기대하고 있습니다. VR 장비를 사용하여 볼 수있는 웹 페이지가 있습니다. 이러한 상황에서 최신 플러그인을 계속 사용하고 새 플러그인을 만드는 것도 의미가 있습니다.
최고의 사용자 경험을 만들기 위해이 튜토리얼에서 얻은 지식을 적용합니다. 웹 개발 여정에 많은 행운과 성공을 기원합니다!