순풍과 Eleventy를 이용하여 전체 화면 수직 슬라이더 만들기

이 문서에서는 Tailwind CSS와 Eleventy를 사용하여 세로 슬라이더를 스크롤할 수 있는 전체 화면을 다시 만듭니다.
이것은 나의 생활 방식 블로그의 홈페이지가 될 것이다. 오늘의 글의 최종 결과는 다음과 같다.

Tailwind CSS에서 전체 화면 부분 만들기

우리는 메인 용기와 안의 전체 화면 부분을 만드는 것부터 시작할 것이다.
우리의 홈페이지는 모두 다섯 부분으로 되어 있다.

<main>
  <section class="w-full h-screen bg-red-200">
    Section 1
  </section>
  <section class="w-full h-screen bg-blue-200">
    Section 2
  </section>
  <section class="w-full h-screen bg-green-200">
    Section 3
  </section>
  <section class="w-full h-screen bg-indigo-200">
    Section 4
  </section>
  <section class="w-full h-screen bg-yellow-200">
    Section 5
  </section>
</main>

이것은 우리에게 다음과 같은 결과를 주었다

보시다시피 각 부분은 저희 뷰포트의 정확한 너비/높이입니다.
설령 우리가 크기를 조정한다 하더라도, 그것은 이 크기를 유지할 것이다.
그러나 우리는 지금 한 부분으로 굴러갈 수 있다. 그러면 우리는 어떻게 해야만 그것으로 하여금 모든 부분을 포착할 수 있습니까?

순풍 CSS 스크롤 스냅 사용

"JavaScript를 사용자 정의하지 않고도 이러한""스크롤 스냅""동작을 만들 수 있는 매우 멋진 CSS 속성이 있습니다."
그러나 Tailwind CSS에는 스크롤 스냅 기능이 없습니다.따라서 순풍을 확장하는 실용 프로그램부터 시작하자.global.css 파일을 열고 다음 행을 추가합니다.

@layer utilities {
  .snap {
    scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint);
  }
  .snap-y {
    --scroll-snap-direction: y;
  }
  .snap-mandatory {
    --scroll-snap-constraint: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
}

이것은 순풍을 확장하고 우리가 필요로 하는 부족류를 추가할 것이다.

Note: I only added the actual classes we need, not all the scroll-snap types.

이제 이러한 클래스를 HTML 구조에 <main> 요소부터 추가합니다.

<main class="max-h-screen overflow-y-scroll snap snap-y snap-mandatory"></main>

우선, 요소가 화면에 최대 높이를 확보하고 오버플로우 vertical을 스크롤로 설정해야 합니다.
그런 다음 최근에 만든 스냅샷 클래스를 추가하면 다음과 같은 내용이 표시됩니다.

scroll-snap-type: y mandatory;

다행이다. 이제 우리 부서에 어디에서 캡처해야 하는지 알려주면 돼.

<section class="w-full h-screen bg-red-200 snap-start"></section>

봐라, 우리는 각 부분에 snap-start류를 첨가했는데, 지금은 다음과 같은 GIF와 같은 행위를 나타낼 것이다.

멋있죠!

자기들만의 스타일로 저희의 파트를 완성해 보도록 하겠습니다.

우리의 모든 부분은 자신만의 독특한 풍격을 가지고 첫 번째 부분은 전체 화면 배경 이미지로 로고가 중간에 있다.
이미지를 src/images 폴더에 직접 배치했습니다.
우선, tailwind.config.js 파일에 사용자 정의 배경 그림을 추가해야 합니다. 이것은 배경 그림을 클래스로 쉽게 사용할 수 있도록 합니다.

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      // Other extends
      backgroundImage: {
        'home-1': "url('images/home-intro.jpg')"
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};

현재 우리는 아래의 클래스를 사용하여 이 배경을 사용할 수 있다.

class="bg-home-1"

이 섹션의 HTML은 다음과 같습니다.

<section
  class="flex items-center justify-center w-full h-screen  bg-center bg-cover snap-start bg-home-1"
>
  <img alt="The todoist logo" title="The Todoist Logo" src="images/logo.png" />
</section>

이는 다음과 같은 결과를 가져옵니다.

두 번째 부분은 페이지 부분으로 편향 텍스트가 있는 그림을 보여 줍니다.
우리는 시사통신면에서 우리가 한 것처럼 Tailwind CSS Grid을 사용할 것이다.

<section class="flex items-center justify-center w-full h-screen snap-start">
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="z-10 flex flex-col justify-center col-span-3 col-start-2 row-start-1">
      <h1 class="font-black text-purple">About The Todoist</h1>
      <h3 class="text-pink">Coffee, Adrenaline, and a bunch off craziness</h3>
    </div>
    <div class="flex flex-col items-end col-span-6 col-start-3 row-start-1">
      <img src="https://thetodoist.com/static/media/home_about.104e3ad7.jpg" />
      <a href="/about" class="mt-2 text-xs underline">Find out more &rarr;</a>
    </div>
  </div>
</section>

이 절에서, 나는 같은 시작 줄과 시작 열hack을 사용하여 요소를 중첩한다.
그리고 나는 CSS Flex를 사용하여 원소를 정확한 위치에 맞추었다.
이 섹션의 결과는 다음과 같습니다.

As you can see it's an offset element, this is how it was designed, you could center it adjusting the col-start position.

세 번째 부분은 특색 있는 게시물을 보여주는 대부분이다.
이 예에 대해, 우리는 이 글을 하드코딩하여, 잠시 후, 우리는 그것을 우리의 데이터 저장소에 연결할 것이다.

<section
  class="flex items-center justify-center w-full h-screen text-white bg-purple snap-start"
>
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="col-span-5 col-start-2">
      <img src="https://thetodoist.com/img/blog/forgotten-punctuation/overview.jpg" />
    </div>
    <div class="flex flex-col justify-center col-span-3 col-start-8">
      <h2 class="font-black">Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed diam, sed diam.</p>
      <a href="#" class="mt-2 text-xs underline">Read more &rarr;</a>
    </div>
  </div>
</section>

이 부분에서 나는 주로 CSS 격자를 사용하여 서로 인접한 요소를 만들고 flex를 사용하여 그것들을 정렬한다.
이 섹션의 결과는 다음과 같습니다.

네 번째 부분은 앞부분과 매우 비슷하여 블로그 프로젝트를 보여주지만 첫 번째 부분과 마찬가지로 배경 이미지에 주목한다.
이러한 데이터는 실제 블로그 프로젝트에서 채워지기 때문에, 우리는 내연 배경 이미지를 사용해야 한다.
그리고 우리는 폭이 비교적 좁은div를 텍스트 영역으로 사용할 수 있다.
이 섹션의 전체 HTML은 다음과 같습니다.

<section
  class="flex items-center w-full h-screen bg-indigo-200 bg-center bg-cover text-purple snap-start"
  style="background-image: url(https://thetodoist.com/img/blog/beach-workouts/running.jpg)"
>
  <div class="w-1/12">&nbsp;</div>
  <div class="w-3/12">
    <div class="relative">
      <span class="absolute flex w-full h-0.5 -ml-4 bg-purple -left-full top-1/2"></span
      >Health
    </div>
    <a href="#">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed diam, sed diam.</p>
    </a>
    <a href="#" class="mt-2 text-xs underline">Read more &rarr;</a>
  </div>
</section>

이것은 우리에게 다음과 같은 결과를 줄 것이다.

마지막 부분은 연락 부분입니다.
나는 디자인을 좀 크게 수정할 것이다. 이렇게 하면 우리는 표가 없을 것이다.
여기서 까다로운 부분은 이 절의 배경 모드를 사용하는 것입니다.
우선 이런 모델을 순풍에 추가합시다.구성 파일.

backgroundImage: {
    "home-1": "url('images/home-intro.jpg')",
    "pattern-striped": "url('images/pattern-striped.png')",
},

현재 우리는 우리의 부분에서 사용할 수 있다.

<section class="w-full h-screen bg-pattern-striped snap-start"></section>

블록의 나머지 부분은 메쉬와 flex를 사용하여 항목을 다시 정렬합니다.

<section class="flex items-center justify-center w-full h-screen bg-pattern-striped snap-start">
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="col-span-10 col-start-2">
    <h2 class="font-black">Coffee? Sure let's do it.</h2>
    <strong class="flex w-1/2">Always up for meeting new people, learning stuff, trying new things, so please give me a shout out if you want to be in touch.</strong>

    <div class="flex mt-8">
      <div class="w-1/2">
        <h4>Contact me</h4>
        <p>Send me an email on <a class="underline" href="mailto:[email protected]">[email protected]</a></p>
      </div>
      <div class="w-1/2">
        <h4>Currently in</h4>
        <p>Cape Town, South Africa</p>
      </div>
    </div>
  </div>
</section>

이것은 다음과 같은 결과를 나타낼 것이다.

자, 이제 홈페이지 부분을 완전히 수직으로 스크롤하는 것이 순조롭게 진행되고 있습니다.
너는 GitHub에서 오늘의 작품을 찾을 수 있다.

읽어주셔서 감사합니다. 연결해 드리겠습니다.

제 블로그를 읽어주셔서 감사합니다.내 이메일 시사 통신을 구독하고 Facebook 또는