교차점 관찰자 API를 사용하여 버튼 스타일에 컨텍스트 배경이 있습니다.

Intersection Observer is like a sniper rifle, and the browser is the hitman. You need to tell the hitman to look at a particular building and use his rifle to take actions on the targets.

우리는 트위터를 좋아하고 iOS에 잘못된 비밀번호를 입력하거나 조쉬 코마오 팬들liking his blog post을 위해 이런 작은 일을 할 때 즉각적이고 매력적인 피드백을 받는 것을 좋아한다.이러한 마이크로 상호작용은 인터페이스를 사용하는 체험을 더욱 귀중하게 한다.

컨텍스트 버튼을 선택한 이유는 무엇입니까?

나는 나의 사이트에서 마이크로 상호작용을 실현하고 싶다.특히 항목 보기 페이지에서.하지만 이유가 없는 것은 아니다.나는 방문자가 프로젝트의 사용자 체험 부분으로 이동할 수 있도록 하고 싶다.왜냐하면 이 사이트가 나를 위해 서비스를 제공하는 데는 두 가지 목적이 있는데, 그것은 마치 나의 블로그와 나의 작품집과 같다.따라서 만약에 제가 사용자 체험 업무를 신청할 때마다 만약에 모집인이 공교롭게도 제 프로젝트를 보고 있다면 이런 프로젝트는 주로 프로젝트에 관련된 기술과 사용자 체험 과정을 포함하고 있습니다. 모집인은 제공된 기술 정보를 볼 때 곤혹스러울 수도 있고 제가 기술자일 뿐이라고 착각할 수도 있습니다.이러한 상황을 피하기 위해서, 사용자 체험 부분은 프로젝트에서 이미 끝났고, 당신은 버튼을 누르면 이 부분으로 넘어갈 수도 있고, 전체 내용을 읽을 수도 있다는 것을 여러분에게 일깨워 주고 싶습니다.

Why didn't I just re-organise the project structure?

응, 나는 이미 이런 방식으로 여러 항목을 기초했는데, 모든 항목에 대해 나는 통상적으로 같은 구조를 따른다.그래서 이 선택은 나에게 있어서는 안 된다.
디자인에 대해 나는 두 번 반복했다.
'사용자 체험 부분으로 건너뛰기'라고 쓰여 있는 끈적끈적한 밑줄이 있다
이것은 기능적으로는 매우 좋지만 관중들에게 좋은 피드백을 주지 못했다.만약 내가 순수한 텍스트가 아닌 아이콘을 사용한다면, 복귀 단추와 공유 단추 같은 급히 필요한 기능을 이 공간에 추가할 수 있기 때문에 더 많은 공간을 차지한다.

일반 텍스트가 아닌 관련 아이콘이 있는 점성 밑줄
여기서'사용자 체험으로 건너뛰기'단추는 더 이상 텍스트가 아니라 아이콘으로 사용자 체험 부분이 없을 때 뛰고 이 부분에 있을 때 정적으로 변한다.

또한 아이콘 아래에 사용자 체험 부분이 위로 향하고 있음을 나타내는 작은 화살표가 있습니다. 아래에서 사용자 체험 부분에 들어가면 화살표가 사라집니다.

JavaScript

    let options = { rootMargin: '0px', threshold: 0 }; let callback = (entries, observer) => { entries.forEach(entry => { if (entry.boundingClientRect.y <= 1) { // inside ux section document .querySelector('#skip-to-ux') .classList .replace('s2ux-out', 's2ux-in'); } else { // outside ux section document .querySelector('#skip-to-ux') .classList .replace('s2ux-in', 's2ux-out'); } }); }; let observer = new IntersectionObserver(callback, options); let target = document.querySelector('#heading-the-ux-process'); observer.observe(target);

DN 기반 사거리 옵서버 API:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Intersection Observer API는 이 문서의 컨텍스트를 단순화하고 배치하기 위해 브라우저에서 뷰어가 뷰포트에 대한 정확한 위치를 추적하는 방법을 제공하여 사용자가 UX 버튼을 클릭할 수 있는 버전을 논리적으로 결정할 수 있도록 합니다.
교차 관측기constructor 함수는 두 개의 매개 변수callback 함수와 options 대상을 사용한다.

    let observer = new IntersectionObserver(callback, options);

교차점 관찰자 객체를 작성한 후에는 관찰 DOM의 일부 요소를 알려야 합니다.이것은 observe 방법을 사용하여 생성된 교점 관찰자 대상에서 완성한 것이다.다른 대상 요소를 사용하여 observe 방법을 호출하면 여러 DOM 요소를 관찰할 수 있습니다.

    let target = document.querySelector('#heading-the-ux-process'); observer.observe(target); // observer.observe(target2); // and so on.

리셋 함수는 우리가 논리를 작성하는 곳이다. 관찰자가 목표 원소를 보았거나 목표 원소를 보지 않았을 때 무슨 일이 일어나야 하는지.이 예에서, 나는 원소가 보이는지 여부에 따라 css류를 교환한다.

    let callback = (entries, observer) => { entries.forEach(entry => { if (entry.boundingClientRect.y <= 1) { // inside ux section document .querySelector('#skip-to-ux') .classList .replace('s2ux-out', 's2ux-in'); } else { // outside ux section document .querySelector('#skip-to-ux') .classList .replace('s2ux-in', 's2ux-out'); } }); };

리셋 함수에서 관찰자가 전달하는 두 가지 매개변수를 볼 수 있습니다.

entries 매개 변수는 각 목표 요소와 대응하는 항목 목록으로 관찰자는 교차점 상태의 변화를 기록했다.

두 번째 매개 변수는 observer 자체이다.예를 들어 리셋 후 목표 요소를 관찰하고 싶지 않을 때 이 observer 대상을 사용할 수 있습니다.이를 위해 unobserve 방법과 목표 "unoberve"를 매개 변수로 호출합니다.

옵션 대상은 관찰자가 관찰할 수 있는 관찰 영역을 사용자 정의하는 데 도움을 줍니다.옵션 객체에는 MDN에 언급된 다음 속성이 있을 수 있습니다.

루트: 뷰포트로 사용되는 요소로 대상의 가시성을 검사합니다.반드시 목표의 조상이어야 한다.또는 null 을 지정하지 않으면 기본적으로 브라우저 뷰포트가 됩니다.

뿌리 가장자리: 뿌리 주위의 가장자리."margin(위쪽, 오른쪽, 아래쪽, 왼쪽)와 같은 CSS 10px 20px 30px 40px" 속성과 유사한 값을 가질 수 있습니다. 기본값은 0입니다.

한도값: 목표 가시성의 몇 퍼센트에서 관찰자의 리셋을 실행해야 하는지를 나타내는 숫자나 숫자 그룹.가시성이 50% 표시를 통과할 때만 측정하려면 0.5 값을 사용할 수 있습니다.가시성이 다른 25%를 초과할 때마다 리셋을 실행하려면 그룹 [0, 0.25, 0.5, 0.75, 1]을 지정해야 합니다.기본값은 0입니다.

    let options = { rootMargin: '0px', threshold: 0 };

위의 대상은 브라우저의 뷰포트를 관찰할 수 있는 관찰자를 제공합니다. 경계와 0 한도값이 없습니다. 이것은 목표 요소의 단일 픽셀이 보일 때 리셋을 촉발한다는 것을 의미합니다.
내 프로젝트 페이지에서 이 점을 실현한 후 다음은 실제 효과입니다.