여유로운 인터넷 학습회 @ 삿포로 Advent Calendar 201916일째 보도입니다.

오프닝

안녕하십니까?DE-TEIU.
오늘 보도는 CSS와 JavaScript를 사용한 소절의 소개입니다.
원본 코드도 공개됐는데 참고할 게 있으면 좋겠어요.

인도물

정전 사이트가 깜깜해져서 내용을 읽지 못한 경험이 있습니까?
이번에는 이럴 때 사이트를 빛나게 하는 방법을 소개해 드리겠습니다.
탐조등
[사용법] 클릭하면 빛이 납니다.어둠 속에 숨겨진 것을 찾자.

한 줄기 빛

끼어들었어?

해설

개요

사이트의 주요 내용에 검은색이 겹쳐져 있다.
그 밖에 중첩은 세로 3*가로 3의 총 9개의 원소로 구성된다.
화면을 클릭할 때만 이 요소의 중앙 요소의 배경색을 전환합니다.
그림으로 보면 이런 느낌이에요.

그런 다음 현재 클릭한 위치에 따라 덮어쓰기를 이동합니다.
기본적인 구조는 이상이다.
(논리 자체는 jQuery에서 적절하게 이루어진다.)

구현 요점

Android Chrome의 화면 업데이트 차단

iOS Safari에서 반송 스크롤 방지

CSS의 그래디언트에서 조명 같은 표현.

Android Chrome의 화면 업데이트 차단

Android의 Google Chrome은 화면 위에서 아래로 드래그하면 화면이 새로 고쳐지는 Pull-to-Refresh 기능을 탑재하고 있습니다.
편리한 기능이지만 이번 웹 응용 프로그램은 화면 이동 조명을 드래그하는 규격에서 이 리셋 기능이 폭발할 것이다.자르자.
css에서 바디를 다음과 같이 설정하면 됩니다.
index.scss

body {
  overscroll-behavior-y: none;
}

overscroll-behavior 속성은 화면의 스크롤 가능한 영역이 끝에 도달할 때 화면의 행동을 지정합니다.
이번에overscroll-behavior-y에none를 설정했기 때문에 화면 끝까지 세로로 스크롤해도 아무런 처리가 일어나지 않습니다.
참조:
Android Chrome에서 CSS에서 Pull-to-Refresh를 비활성화합니다.

iOS Safari에서 반송 스크롤 방지

iOS Safari는 화면 내의 스크롤 가능 영역이 끝에 도달했을 때 스크롤을 계속하면 화면 밖으로 스크롤하고 손가락을 놓은 후 화면으로 돌아갑니다.
이 기능이 ON이면 화면을 끌 때 불빛과 함께 표시할 내용으로 스크롤됩니다.자르자.
iOS의 Safari에서 상술한 오버스크롤-behavior는 대응하지 않기 때문에 자바스크립트로 방법을 생각해 보세요.
index.js

$(() => {
  document.addEventListener('touchmove', function(event){
    event.preventDefault();
  }, { passive: false });
}

이렇게 하면 스크롤할 때 발생하는 기본 이벤트를 막을 수 있다.
참조:
2019년, 자바스크립트의 스크롤 일시 금지는 바로 이것입니다!(스마트폰)

CSS의 그래디언트에서 조명 같은 표현.

우선radial-gradient 함수로 원형의 투사 점차적인 변화를 만든다.
index.scss

$light-gradient: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 1) 100%
);

그리고 마스크-image 속성을 사용하여 요소에 원형 투명 그래디언트를 마스크로 설정할 수 있습니다.
(Chrome에 공급업체 접두사 필요)
index.scss

#light-space {
  &.on {
    mask-image: $light-gradient;
    -webkit-mask-image: $light-gradient;
  }
}

끝내다

이런 작은 단락만 모양으로 만들어도 만드는 과정에서 어느 정도 견해를 얻을 수 있으니 여러분도 하세요.

소스 코드

GitHub 공개 중입니다.