갑자기 유행하는 "Hover 효과"구현
장치(및 요소)에 대한 거리와 각도를 모니터링하여 점진적인 미세 상호작용을 만들 수 있습니다.
나는 이러한 기능 자체가 아주 오래 전부터 아무렇지도 않게 사용되고 있다고 생각한다
이번에는 편리한 사용을 위해 프로시믹스라는 리브레리를 제작했다.
https://github.com/pokkur/proxemics
바늘이 화면 왼쪽에 가까울수록 사이드바는 당겨진다
See the Pen Progressive Hover Effect Demo 03 by pokkur ( @pokkur ) on CodePen .
Proxemics('.side-bar', {
territory: 0 // ポインターを検知するテリトリー（半径）
}, (_, Styles) => {
// 水平距離でのみアクションさせるための変数
const distanceX = _.distance * Math.max(0, Math.cos(_.radian))
Styles({
// サイドバーの横幅（33px）プラス若干分までポインターが水平に接近した時に、サイドバーを全開にさせたい
transform: `translate(${Math.min(-distanceX + 50, 0)}px, 0)`
})
})
그림 라이브러리의 초점 표현식
See the Pen Progressive Hover Effect Demo 01 by pokkur ( @pokkur ) on CodePen .
Proxemics('.prox', {
territory: 100
}, (_, Styles) => {
// 対象要素の彩度をポインター距離でコントロール
Styles({ filter: `saturate(${Math.max(1 - _.distance * .01, 0)})` })
// ポインターが一定の範囲に近づいた時に、画像の拡大率を変化させる
const Images = _.el.querySelectorAll('img')
Array.prototype.forEach.call(Images, (Image) => {
Image.style.transform = `scale(${Math.max(1, (1 - _.distance * .001) + .2)})`
})
})
その他色々
https://pokkur.github.io/proxemics/
"Hover 효과"의 사용 범위는 당연히 데스크톱 장치에만 한정됩니다.
아이디어에 따라 "알기 쉽다", "사용 편의"등 UX 향상을 목표로 한 새로운 방법 중 하나br/>
proxemics를 사용하는 기초 위에서 꼭 시도해 보세요.
Reference
이 문제에 관하여(갑자기 유행하는 "Hover 효과"구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pokkur/items/802493235c7ddd86ab10텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
