반응형
이 기사에서는 jarallax.js로 아름다운 시차 랜딩 페이지를 만드는 방법을 보여드리겠습니다.
소스 코드
GitHub에서 이 저장소의 소스 코드와 이미지를 찾을 수 있습니다.
당신이 그것을 좋아한다면 그것을 스타로 만들고 자신만의 버전을 만들기 위해 포크를 하세요.
비디오 튜토리얼
나는 이미 내 유튜브 채널에 그것에 대한 동영상을 만들었어. 저것 좀 봐봐.
Cules Coding 많이 좋아해주시고 구독해 주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다.
CDN
<script src="https://unpkg.com/jarallax@2.0"></script>HTML
<header class="header">
<a class="logo" href="#">Parallax</a>
</header>
<section class="container">
<div class="jarallax">
<img class="jarallax-img" src="./media/1.webp" alt="" />
<h2 class="text">Consectetur sunt</h2>
</div>
<div class="jarallax">
<img class="jarallax-img" src="./media/2.webp" alt="" />
<h2 class="text">Dolor odio.</h2>
</div>
<div class="jarallax">
<img class="jarallax-img" src="./media/3.webp" alt="" />
<h2 class="text">Adipisicing pariatur</h2>
</div>
<div class="jarallax">
<img class="jarallax-img" src="./media/4.webp" alt="" />
<h2 class="text">Consectetur accusamus?</h2>
</div>
<div class="jarallax">
<img class="jarallax-img" src="./media/5.webp" alt="" />
<h2 class="text">Ipsum deleniti?</h2>
</div>
</section>
```
설명:
- 우리는 모든 jarallax 원소를 담기 위해 컨테이너를 추가했습니다.
- 각 jarallax 요소에는 이미지와 텍스트가 있습니다.
## Css
```js
@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
max-width: 100vw;
overflow-x: hidden;
background-color: #1b1b1b;
font-family: 'Cousine', monospace;
color: white;
}
.header {
height: 10rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5rem;
}
.logo {
font-size: 3rem;
font-weight: 700;
color: white;
letter-spacing: 0.1rem;
text-decoration: none;
}
.container {
width: 90vw;
margin: 0 auto;
display: grid;
grid-row-gap: 5rem;
padding: 10rem 0;
}
.jarallax {
position: relative;
display: grid;
align-items: center;
width: 100%;
height: 100vw;
max-height: 60rem;
min-height: 40rem;
}
.text {
z-index: 10;
font-size: 3rem;
text-transform: uppercase;
margin-left: 10vw;
}
.jarallax:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 600px) {
.jarallax {
max-height: 70rem;
}
.container {
grid-row-gap: 8rem;
}
.text {
font-size: 5rem;
}
}
@media screen and (min-width: 1200px) {
.jarallax {
width: 90%;
}
.container {
grid-row-gap: 15rem;
width: 95vw;
}
.text {
font-size: 7rem;
}
}
```
<div class="content-ad"></div>
설명:
- 컨테이너는 그리드 레이아웃입니다.
- 모든 자랄락스 원소들은 상대적인 위치에 있어야 합니다.
- 또한 모든 이미지 위에는 오버레이가 있습니다.
## 자바스크립트
```js
const jarallaxEls = document.querySelectorAll('.jarallax')
jarallaxEls.forEach((el, index) => {
if (index % 2) return false
el.style.justifySelf = 'end'
})
jarallax(jarallaxEls, {})
```
설명:
<div class="content-ad"></div>
- 우리는 모든 jarallax 요소들을 선택했습니다.
- 그런 다음 jarallax 함수를 사용하여 시차 효과를 만들었습니다. 두 번째 매개 변수는 옵션을 포함할 개체입니다. 이 옵션은 설명서에서 확인할 수 있습니다.
- 홀수 자랄락스 요소는 모두 오른쪽에 배치됩니다. :n번째 자식(이상한) 선택기를 사용하려고 했지만 작동하지 않았습니다.
- 그래서 우리는 루프를 사용하여 원소들을 반복하고 정당성을 설정했습니다.모든 홀수 요소에 대한 자체 속성입니다.
최종 결과:
GIF
이 기사는 여기까지입니다. 최대한 간단하게 하려고 노력했어요. 궁금하신 점이 있으시면 언제든지 연락 주세요.
<div class="content-ad"></div>
## 뻔뻔한 플러그
나는 바닐라 HTML, CSS, 자바스크립트로 프로젝트 기반의 동영상을 몇 개 만든 적이 있습니다.
다음 사항에 대해 알아봅니다.
- Javascript 교차 관찰기로 시원한 효과 추가
- DOM 조작
- 요소를 CSS 위치에 정렬합니다.
- 반응성이 좋은 웹사이트를 만드는 방법.
프런트 엔드 스킬을 다시 익힐 수 있는 좋은 프로젝트가 될 것입니다.
<div class="content-ad"></div>
관심이 있으시다면 영상을 확인하실 수 있습니다.
Cules Coding 많이 좋아해주시고 구독해 주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다.
그나저나, 저는 제 능력으로 큰 가치를 제공할 수 있는 회사에서 새로운 기회를 찾고 있습니다. 만약 당신이 풀 스택 웹 개발에 능숙하고 세상을 혁신하는 데 열정을 가진 사람을 찾고 있다면 언제든지 저에게 연락하세요. 또한, 저는 프리랜서 프로젝트에 대해 이야기 할 수 있습니다.
여기서 내 작업 보기
## 연락처
<div class="content-ad"></div>
- 이메일: thatanjan@gmail.com
- 링크드인: @thatanjan
- 포트폴리오: anjan
- 깃허브: @thatanjan
- 인스타그램(개인): @타탄잔
- 인스타그램(유튜브 채널): @타탄잔
- 트위터: @thatanjan
시청할 수 있는 비디오:
읽고 싶은 블로그:
- Eslint, TypeScript를 사용하여 더 예쁜 설정 및 대응
- 클라이언트 측 렌더링이란?
- 서버 측 렌더링이란?
- 트리 데이터 구조에 대해 알아야 할 모든 사항
- Nextjs를 사용해야 하는 13가지 이유
- 초보자의 양자 컴퓨터 가이드
'css' 카테고리의 다른 글
| CSS에서 논리 쓰기 (0) | 2022.02.22 |
|---|---|
| 주 이미지 색상 간 전환을 사용하여 프레임 애니메이션화 (0) | 2022.02.22 |
| 무한 루프 React 구성 요소 (0) | 2022.02.22 |
| https 집에서 시도하지 마십시오: CSS _as_ 백엔드 - Cascading Server Sheet 소개! (0) | 2022.02.22 |
| 다음 React 프로젝트를 위한 상위 3가지 UI 키트 (0) | 2022.02.22 |
댓글