토픽 목록 항목 클릭 애니메이션

커스터마이징 테마 컴포넌트
1
:information_source: 요약 토픽 목록 항목 클릭 애니메이션
:eyeglasses: 미리보기 Theme Creator
:hammer_and_wrench: 저장소 GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item. · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

이 테마 컴포넌트는 토픽 목록 항목에 마우스를 올리거나 클릭할 때 멋진 애니메이션을 추가합니다.

topic-list-item
topic-list-item1228×706 78.6 KB

안녕하세요 :wave:

:warning: 이 컴포넌트는 슬라이더 로더(slider loader)가 필요합니다.

이 컴포넌트는 전체 행을 클릭 가능하게 만들고 토픽 목록 항목에 클릭 애니메이션을 추가합니다. 여러 애니메이션 중에서 선택할 수 있습니다.

  1. push(터치 기기 기본값): 클릭하면 안쪽으로 밀리는 효과와 배경 효과가 추가됩니다.

  2. background(터치되지 않는 기기 기본값): 클릭하면 배경이 추가됩니다…

  3. slider: 클릭하면 토픽 목록 항목 아래에 슬라이더 로더가 추가되고 상단 메인 슬라이더가 숨겨집니다.


  4. blur: 클릭하면 목록의 다른 토픽들이 흐릿해집니다.

테마 설정

터치되지 않는 기기와 터치 기기에서 애니메이션을 각각 선택할 수 있습니다.

Screenshot 2023-07-20 at 23.31.55
Screenshot 2023-07-20 at 23.31.55619×289 12.2 KB

23개의 좋아요
2023: The Year in Review
2

너무 자연스럽고 그럴듯해서 컴포넌트를 미리 볼 때 무엇이 바뀌었는지 알아채지 못할 정도였습니다. :smile:

데스크톱에서 클릭 시 로딩 중에 푸시 애니메이션을 적용할 수 있을까요? 아니면 이를 막는 요인이 있을까요?

6개의 좋아요
3

이 아이디어의 핵심은 터치 기기에서 자연스러운 앱 같은 탭 느낌을 주는 것입니다. 따라서 터치 기기라면 데스크톱 뷰에서도 푸시 애니메이션이 작동합니다.

하지만 네, 터치하지 않는 기기에서도 쉽게 작동할 수 있다고 생각합니다. 별도의 설정 항목을 추가하는 것이 좋을 것 같습니다. :slightly_smiling_face:

4개의 좋아요
4

안녕하세요 :wave:

컴포넌트에 업데이트를 푸시했습니다. DEV: Refactored how the component works and add a new slider animation - Pull Request #1 - VaperinaDEV/topic-list-item-click-animation - GitHub

2개의 좋아요
5

정말 잘 만들었네요. 늘 그렇듯이 훌륭한 작업이에요, Don. :slight_smile:

2개의 좋아요
6

안녕하세요 :wave:
새로운 애니메이션(블러) 추가 :tada:

2개의 좋아요
7

스마트하네요. 마음에 듭니다 :heart_eyes:

3개의 좋아요
8

정말 잘하셨네요, Don! Topic List Thumbnails 에서 이 기능을 테스트해 봤는데, 기본적으로 대부분 잘 작동합니다. Push와 Blur는 예상대로 작동하지만, Slider는 썸네일 뒤를 따르는 대신 모든 썸네일 위에 표시되고, background는 아무 효과가 없습니다(이건 당연한 일이죠). 이 기능에 조금 더 신경 써 주실 수 있을까요? 데스크톱에서 슬라이더가 제대로 작동했으면 좋겠고, 분명히 멋진 아이디어를 내실 거라 믿습니다!

1개의 좋아요
9

데이비드님 :wave:

업데이트를 병합했습니다 Move topic slider loader from template to pseudo element - Pull Request #5 - VaperinaDEV/topic-list-item-click-animation - GitHub
슬라이더를 표시하기 위해 after-topic-list-item 템플릿의 플러그인 아웃렛을 사용했는데, Topic List Thumbnails 컴포넌트가 토픽 목록에 그리드 레이아웃을 추가하기 때문에 플러그인 아웃렛을 토픽 목록 항목으로 취급하여 서로 붙어 있게 되었습니다. 이제 로더를 템플릿에서 의사 요소(pseudo element)로 이동시켰는데, 이를 통해 호환성이 더 좋아질 것입니다. :slightly_smiling_face:

Topic List Thumbnail과 함께 표시하려면 z-index가 필요한데, 이 부분을 놓치고 있었습니다. 컴포넌트를 업데이트해 주세요. :slightly_smiling_face:

1개의 좋아요
10

Don, 감사합니다! 시도해 봤는데 동작은 하는데 슬라이더 색상이 정상이 아닌 것 같아요. 아니면 z-index 문제일까요? 이 영상 속 슬라이더는 금색이어야 하는데 회색으로 보입니다. tertiary여야 하는 것 같은데, 참고로 다른 CSS 없이 테스트하고 있습니다. 업데이트 전에는 금색으로 표시되던 터라 z-index 문제라고 추정하고 있어요 :man_shrugging:t3:

1개의 좋아요
11

사이트를 확인해 보니 z-index 수정이 포함된 최신 버전이 아닌 이전 버전을 사용하고 있습니다. 해당 컴포넌트를 최신 버전으로 업데이트해 주세요. :slightly_smiling_face:

12

Don, 감사합니다. 지금은 다 잘 작동하고 있어요. 너무 빨리 업데이트를 한 것 같네요 :crazy_face:

한 가지 제안이 있어요. 터치 기능이 없는 기기에서는 이 기능을 완전히 비활성화할 수 있는 옵션을 추가해 주시면 좋겠습니다. 슬라이더를 사용해 봤는데, 기본 슬라이더를 제거해서 UX가 일관성이 없어지는 것 같아 마음에 들지 않거든요.

1개의 좋아요
13

@Don - 정말 좋습니다! (예를 들어 Clickable Topic Theme Component처럼) 호버 시, 행/항목 내부 어디에서든 커서가 포인터로 표시되기를 선호합니다…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}
2개의 좋아요
14

@Don - 배경색 설정이 호버 효과에 적용되는 것 같지만, 이는 행/항목을 클릭하거나 탭한 후에만 적용되며, 일반적인 선행 호버링(예: Clickable Topic Theme Component) 시에는 적용되지 않습니다.

Screenshot 2023-07-22 221738
Screenshot 2023-07-22 2217381810×922 73.2 KB

1개의 좋아요
15

다비드님, 안녕하세요 :wave:

정말 좋은 아이디어네요. 터치 기기나 비터치 기기에서 애니메이션(컴포넌트)을 각각 별도로 끄는 설정을 추가하는 업데이트를 병합했습니다.

이제 none 옵션을 선택하면 해당 컴포넌트가 완전히 비활성화됩니다.

3개의 좋아요
16

안녕하세요 @denvergeeks :waving_hand:

현재 해당 컴포넌트는 주제 목록 항목의 전체 행만 클릭 가능하도록 처리되어 있습니다. 따라서 최신 주제 목록 항목은 기본적으로 동작합니다. 이것이 바로 터치하지 않는(마우스를 사용하는) 기기에서만 주제 목록 항목에 포인터 커서가 표시되는 이유입니다. :slightly_smiling_face:

해당 컴포넌트는 터치 기기와 비터치 기기를 별도로 처리합니다. 배경색은 비터치 기기에서는 호버 시, 터치 기기에서는 탭한 후에 활성화됩니다. 하지만 예를 들어 커서가 있는 터치스크린 노트북에서는 호버가 작동하지 않을 수 있으므로 일부 업데이트가 필요하다고 생각합니다. 데스크톱 뷰와 포인터에서 전역으로 활성화하도록 할 수 있을 것 같습니다. :thinking:

해당 변경 사항을 병합했습니다.

1개의 좋아요
17

‘슬라이더 로더’에 대한 의존성이 무엇을 의미하는지 좀 더 자세히 설명해 주시겠습니까? 이것이 다른 테마, 플러그인, JavaScript 라이브러리 또는 기타 다른什么东西인가요?

3개의 좋아요
18

슬라이더는 새로운 페이지 로딩 애니메이션입니다. Discourse에서 페이지를 로드하면 화면 상단에 수평 진행 막대가 표시됩니다. 이것이 바로 슬라이더입니다.

현재 기본값으로 설정되어 있지만, page loading indicator 설정을 통해 원래의 로딩 스피너로 되돌릴 수 있습니다.

4개의 좋아요
19

Don님, 스피너 프리로더와 함께 작동하도록 만드는 방법이 전혀 없나요? 저는 포럼에서 슬라이더 로더보다 스피너를 훨씬 선호합니다.

20

안녕하세요 :waving_hand:

슬라이더에서만 동작하는 이유는 주제를 클릭하면 페이지 콘텐츠가 즉시 지워지고 스피너로 변경되기 때문입니다. 그래서 애니메이션을 실행할 시간이 없습니다. 슬라이더를 사용하면 다음 페이지가 로드되는 동안 현재 페이지에 머물러 있어 애니메이션을 실행할 시간을 확보할 수 있습니다. :slightly_smiling_face: