프레임 없는 HTML 슬라이드, CSS만

나는 reveal.js의 슈퍼팬이어서 거의 매번 강연할 때마다 그것을 쓴다.이것은 기능이 완비된 프레젠테이션 프레임워크로 많은 아름다운 기능이 있다. 예를 들어 말하는 사람의 필기, 전체 화면 모드, 코드 문법이 돋보이는 등이다.
그러나 때때로, 나는 현지의 회의나 사무실 시연에서 화면에 약간의 정보를 던지기만 하면 된다.인터넷 개발자로서 저는 CSS로 레이아웃을 제어하고 조정하는 것이 클릭식 인터페이스로 하는 것보다 훨씬 편합니다.
나는 Ondřej Žáraforpure CSS slides의 실현을 만났고 그의 코드 라이브러리에 깊이 들어가 내가 무엇으로 나의 담백한 HTML 슬라이드를 만들 수 있는지 보았다.순수 CSS의 실현에 있어서 그것의 기능은 매우 전면적이기 때문에 어쨌든 너는 반드시 가서 보아야 한다.

대상:위조 클래스

내가 원하는 것은 슬라이드에서 슬라이드로 전환하는 좋은 방법이다. 나는 Ondřej가 :target 위류를 사용했다는 것을 알아차렸다.이것은 현재 URL 세션과 일치하는 id 요소를 일치시키는 선택기입니다. 이 세션은 # 기호로 표시됩니다.
예를 들어 사이트에 iddinosaur의 요소가 있으면 URLhttps://www.example.com/index.html#dinosaur을 사용하여 주소 표시줄에서 요소를 탐색할 수 있습니다.현재 URL인 경우 다음 CSS 규칙이 #dinosaur 요소에 적용됩니다.

#dinosaur:target {
  background-color: green;
}

이것만 있으면 우리는 악작을 시작할 수 있다.

태그 구조

HTML 구조는 상당히 간단할 수 있다.

<main>
  <section id="slide1"></section>
  <section id="slide2"></section>
  <section id="slide3"></section>
  <section id="slide4"></section>
  <section id="slide5"></section>
</main>

각 슬라이드는 전체 뷰포트 높이를 차지하는 부분일 수 있습니다.뷰포트 셀을 상대적으로 쉽게 사용하여 이를 구현할 수 있습니다.뷰포트 단위는 말 그대로 뷰포트 크기를 기준으로 하는 CSS 단위입니다.
우리는 vw, vh, vmax와 vmin가 있다.HTML 슬라이드를 만들기 위해 연관된 단위는 vh 또는 뷰포트 높이입니다.각 부분의 높이를 100vh로 설정하면 브라우저의 크기에 관계없이 항상 뷰포트의 높이가 됩니다.

모든 슬라이드에는 유일한 id가 있는데 목표로 삼을 수 있으며 이것은 슬라이드 컨트롤의 메커니즘이 될 것이다.

그렇다면:target 위류가 이 모든 것 중의 위치는?잠깐만, 우리는 곧 도착할 거야.우리가 이전에 한 것은 브라우저를 모든 부분의 맨 위로 돌리는 것이다. 슬라이드가 아닌 웹 페이지처럼 위아래로 스크롤할 수 있다.
만약 이것이 네가 그것을 하려고 하는 것이라면 다행이다.사실대로 말하면, 오늘 너는 이미 끝났다.만약 우리가 스크롤 바를 시작하고 싶지 않다면뷰포트에 활성 슬라이드가 나타나기를 원합니다.그리고 :target 위류가 작용하기 시작했다.

슬라이드를 접다

하지만 시작하기 전에 슬라이딩 플랫폼이 어떻게 작동할지 상상해 보자.
슬라이드마다 크기가 같고 서로 위쪽에 있음
각 섹션을 스택하여 섹션의 스타일을 설정하여 한 번에 한 장의 슬라이드만 볼 수 있도록 한 다음 URL 세그먼트를 사용하여 활성화할 슬라이드를 나타냅니다.
그래서z지수를 따라 쌓아, 응?우리는 지금 이런 목표를 실현하기 위한 선택이 한 가지가 아니다.오랜 시련을 겪은 위치와 z지수 기술을 소개해 드리겠습니다.z-index 속성은 포지셔닝 상자에만 적용되며 이 상자의 position 값은 기본값이 아니다static.position는 현재 4개의 다른 값이 있다. 즉relative,absolute,fixed와 sticky,sticky는 새로운 덧셈이다.어떻게 일을 하는지 excellent in-depth write-up편을 썼으니 꼭 읽어 보세요.
근거 specification:

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’.

따라서 위치 속성을 장사각형에 적용하면 z-index 속성을 사용하여 스택 레벨을 조정할 수 있습니다.상자의 설정position: absolute이 일반 흐름에서 제거되고 블록에 대한 명시적 오프셋이 포함되도록 합니다.
절대 포지셔닝 요소의 내용은 다른 상자에서 흐르지 않으며, 더 높은 창고 레벨이 있으면, 그 아래의 내용만 덮어씁니다.

모두 스택하려면 각 슬라이드 섹션에 position: absolute 및 width: 100%를 바르십시오.어떤 사람들은 절대적으로 포지셔닝된 요소에 설정width: 100%을 하는 것과 모든 편이값을 0로 설정하는 것이 어떤 차이가 있다고 생각할 수 있다.다행히 다른 사람도 같은 문제가 있다.
Keith J. Grant 이 두 방법 간의 차이를 분석한 결과 top: 0; right: 0; bottom: 0; left: 0를 사용하여 원소 주위에 추가 간격을 두면 원소가 위치를 정한 조상에서 옮겨지는 것을 발견했다.
그러나 나는 슬라이드를 뷰포트에 채우고 싶어서 경계를 전혀 쓰지 않기 때문에 차라리 네 줄이 아니라 한 줄만 그릴 것이다.🤷
다음 단계는 신뢰할 수 있는 width: 100% 선택기를 사용하여 활성 슬라이드의 z 인덱스를 다른 모든 비활성 슬라이드보다 높게 조정합니다.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

section:target {
  z-index: 1;
}

어떤 사람들은 z인덱스를 처리하는 방식이 다르고 10이나 100의 액면가를 사용하지만 솔직히 두 요소 사이에서는 1이든 1000이든 더 높은 정수치를 가진 사람이 이긴다.

애니메이션 추가

이 노력에 직업화된 이미지를 더하기 위해 (누구한테 농담을 하는 거야?)나는 일부 슬라이드 전환이 정확하다고 생각한다.CSS는 또한 이를 위해 귀여운 애니메이션 옵션을 제공했다.회전, 축소, 슬라이딩, 슬라이딩, 모든 CSS 변환을 할 수 있습니다.
만약 네가 옹드제의 슬라이드를 보았다면, 그가 회전 효과를 사용했다면, 우리 한번 해 보자.뷰포트에 들어가기 전에 뷰포트에서 활성 상태인 다음 뷰포트를 떠나는 세 가지 위치 상태가 있습니다.
입력 출력
기본값:target은 transform-origin입니다. 즉, 엔티티가 중심을 중심으로 회전합니다.각도를 그림처럼 회전하려면 값을 50% 50%로 설정합니다.모든 슬라이드는 뷰포트에서 시계 방향으로 90도 회전하고 나가는 슬라이드는 시계 반대 방향으로 90도 회전합니다.
형제 선택기를 사용하여 활성 슬라이드 이후의 슬라이드를 대상으로 하고 애니메이션을 부드럽게 보이도록 변환 값을 추가할 수 있습니다.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
  transition: transform 1s, opacity 0.8s;
}

section:target {
  transform: rotate(0deg);
  z-index: 1;
}

section:target ~ section {
  opacity: 0;
  transform: rotate(-90deg);
}

슬라이드가 뷰포트를 회전하면 스크롤 막대가 어떤 방식으로 트리거됩니다.나는 해결 방안이 0 0 요소에 하나를 첨가한 것overflow: hidden이라는 것을 알고 있지만, 나는 아직 이 문제의 정확한 원인을 정확히 알지 못했다.나는 이것에 대해 더 많은 연구를 해야 한다. 왜냐하면 나는translate를 사용할 때 이런 상황이 발생하지 않기 때문이다.

마무리

또 하나 주의해야 할 것은 슬라이드를 처음 불러올 때 URL 세션을 터치하지 않는다는 것이다. 이것은 슬라이드가 활성화되지 않는다는 것을 의미한다.이 문제를 해결하려면 첫 번째 슬라이드의 링크를 추가하십시오. 이 링크는 처음 불러올 때 표시되며, 이것도 포지셔닝 요소인지 확인하십시오.

만약 rotate가 당신의 스타일에 맞지 않는다면, 다른 CSS 변환을 시도해서 더 많은 슬라이드 변환을 얻을 수 있습니다.그러나 만약 당신의 슬라이드 요구가 상당히 간단하다면 왜 이런 것을 시험해 보지 않겠습니까?무료 정적 사이트 호스트에 던져서 어디서든 접근할 수 있도록 할 수도 있다.😎
이 점을 실시간으로 실현하려면 토크를 소개하는 데 사용된the slides을 보십시오.CSS