Elementor Marquee: 무한한 스크롤 텍스트, 로고 및 티커

천막은 한 방향으로 연속적으로 스크롤되고 결코 멈추지 않는 내용입니다: 화살표도 없고 점도 없고 슬라이드 경계도 없습니다. 오래된 <marquee> HTML 태그는 수년 동안 죽었지만 2021 년경에 효과가 돌아 왔고 이제는 방문 할 대행사 사이트의 절반에 있습니다.

Elementor에서 하나를 구축하는 세 가지 방법: 무료 로고 슬라이더 위젯 로고에 대한, 그만큼 뉴스 티커 텍스트의 경우,또는 위젯이 다루지 않는 것에 원한다면 약 12 줄의 CSS. 천막은 정말로 a 입니다 회전목마 위젯 정지점을 제거한 상태에서 세 가지 방법 중 두 가지가 하나에서 시작됩니다. 아래 세 가지 모두 루프가 깔끔하게 스냅되는지 아니면 눈에 띄게 스냅되는지를 결정하는 세부 사항입니다.

천막이 부서진 것처럼 보이게 만드는 한 가지

여기서 시작하세요. 왜냐하면 대부분의 손으로 만든 천막이 잘못 보이는 이유이기 때문입니다.

천막은 화면 밖이 될 때까지 왼쪽으로 미끄러졌다가 다시 시작 부분으로 점프하는 콘텐츠 스트립입니다. 콘텐츠의 복사본이 하나만 있으면 틈이 생깁니다. 꼬리는 떠나고 머리가 다시 둥글게 될 때까지 빈 공간이 있습니다.

수정은 트랙을 복제하는 것입니다. 두 개의 동일한 복사본이 나란히 있고 정확히 한 복사본의 너비에 걸쳐 애니메이션됩니다. 애니메이션이 재설정되면 복사본 2가 복사본 1이 있던 자리에 정확하게 앉아 있고 점프가 보이지 않습니다.

됐어요. 그게 전체 기술이에요. 여러분이 보신 루프가 매끄럽게 돌아가는 모든 천막은 이 일을 하고 있고,말더듬이 있는 모든 천막은 그렇지 않습니다.

방법 1: 무료 로고 슬라이더를 사용한 로고 천막

대부분의 천막의 용도인 클라이언트 로고를 스크롤하는 경우 로고 슬라이더 위젯 CSS 없이 한다 무료 플러그인에 있다.

1. 로고 슬라이더를 페이지로 드래그하세요 그리고 선택적인 연결과 더불어 반복기에 있는 당신의 로고를, 1 개의 줄 각각 추가하십시오.
2. 회전목마 설정 열기 그리고 Autoplay 를 켠 다음 Infinite Loop 를 켭니다.
3. 자동 재생 지연을 0 으로 설정합니다. 회전목마를 천막으로 바꾸는 스위치입니다. 0 의 지연은 슬라이드에서 절대 일시정지하지 않음을 의미하므로,움직임은 계단식 대신 연속적이 됩니다.
4. 속도를 느린 것으로 설정, 4000 ~ 6000ms. 예상보다 느릴 때 마크는 차분한 것으로 읽습니다. 빠른 것은 오류 상태처럼 보입니다.
5. 화살표와 점을 끄십시오. 천막에 탐색은 모순이다; 탐색 할 것이 없습니다.
6. 일시중지-온-호버를 끕니다 진정으로 연속적으로 사용하려면 로고를 클릭할 수 있으면 그대로 두세요.

Slides-per-view 는 밀도를 제어합니다. 데스크탑에 6 개,태블릿에 3 개,모바일에서 2 개가 로고를 읽을 수 있게 유지합니다. 한 번에 하나의 로고를 보여주는 천막이 스트립으로 읽기를 멈추기 때문에 1 개로 떨어지지 마십시오.

회색조 호버 처리 및 일치하지 않는 로고 크기를 균등화하는 방법을 포함하여 로고 스트립 스타일링에 대한 자세한 내용: 로고 회전목마 연습. 무료 계층에 있는 다른 항목에 대해서는 다음을 참조하세요 무료 캐러셀 위젯 분석.

방법 2: 뉴스 티커가 있는 텍스트 천막

스크롤 텍스트(공지 사항, 헤드라인, 스톡 티커 스트립)의 경우 News Ticker 위젯이 특별히 제작된 옵션입니다. Pro 위젯입니다.

그것은 손으로 굴린 텍스트 천막이 잘못 된 것 들을 처리 합니다: 그것은 정적 목록이 아닌 게시물 쿼리에서 가져올 수 있습니다, 그래서 “최신 뉴스” 티커는 자체를 업데이트, 그리고 그것은 고정 된 레이블 블록 왼쪽에 있는 콘텐츠 스크롤 하는 동안 넣어 유지 하는 표류 텍스트가 아닌 티커로 읽혀진 티커를 만드는 세부 사항입니다.

위젯의 설정에서 방향,속도 및 일시 정지 동작을 설정합니다. 할 만한 가치가 있는 두 가지:

• 호버링, 켜짐에서 일시 중지합니다. 헤드라인이 링크라면 사람들은 고정된 표적이 필요합니다.
• 물건을 짧게 보관하십시오. 90자 헤드라인이 포함된 티커는 순환하는 데 너무 오랜 시간이 걸려 아무도 항목 4를 볼 수 없습니다. 약 50자로 자릅니다.

실제로 원하는 것이 스크롤 없이 텍스트를 이동하는 것이라면 단어가 제자리에서 회전하는 헤드라인 중 하나입니다 애니메이션 헤드라인 위젯 는 어떤 큰천막보다 더 가까운 핏입니다.

방법 3: CSS로 하나를 빌드합니다

위젯이 다루지 않는 모든 것 (평가 인용문 스트립, 아이콘 행, 혼합 콘텐츠) 의 경우 천막은 CSS의 열두 줄입니다. HTML 위젯에 마크업을 넣고 Elementor의 사용자 정의 CSS 필드 또는 자녀 테마에 CSS를 넣으십시오.

<div class="ma-marquee">
  <div class="ma-marquee__track">
    <span>Item one</span><span>Item two</span><span>Item three</span>
    <span>Item one</span><span>Item two</span><span>Item three</span>
  </div>
</div>

내용이 두 번 뜨는 것을 주목하세요. 아까의 중복 트랙이지 복사-붙여넣기 실수가 아닙니다.

.ma-marquee {
  overflow: hidden;
}
.ma-marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
  animation-play-state: paused;
}
@keyframes ma-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ma-marquee__track { animation: none; }
}

거기에 중요한 네 가지:

• translateX(-50%) 트랙을 정확히 한 복사본의 너비로 이동합니다. 왜냐하면 트랙은 두 복사본이기 때문입니다. 이것이 루프를 보이지 않게 만드는 것입니다.
• linear, 아니다 ease. 완화 된 천막은 버그처럼 보이는 모든 사이클의 속도를 높이고 속도를 늦춥니다.
• width: max-content 플렉스 트랙 래핑을 중지합니다.
• 축소된 모션 쿼리입니다 선택 사항이 아닙니다. 연속 수평 운동은 문서화 된 편두통과 전정 트리거이며 천막은 현대 웹에서 가장 흔한 단일 범죄자입니다. 설정을 존중하십시오.

방향을 바꾸려면 에서 애니메이션을 적용하세요 translateX(-50%) 에 0. 수직의 경우 로 교체합니다 translateY 그리고 컨테이너 높이를 설정한다.

천막은 얼마나 빨리 움직여야 합니까?

본능이 말하는 것보다 느리다. 좋은 출발점은 6 개 항목 트랙의 전체 사이클 1 회에 30 초인데,편집기에서는 거의 너무 느리게 느껴지고 라이브 페이지에서는 자신감 있게 읽힌다.

The test: 방문자가 눈으로 추적하지 않고 한 항목을 읽을 수 있습니까? 움직임을 따라야한다면 너무 빠르며 전체 스트립은 멀리 볼 수있는 것이됩니다.

로고는 읽기보다는 로고가 인식되기 때문에 텍스트보다 빠르게 진행될 수 있습니다. 텍스트에는 체류 시간이 대략 두 배로 필요합니다. 계단식 회전목마는 반대의 경우입니다 자동 재생은 일반적으로 실수입니다 아이템들이 클릭 가능하기 때문에.

천막은 SEO 또는 접근성에 좋지 않습니까?

SEO,아니요. 내용은 DOM 의 실제 텍스트이며 크롤링 및 인덱싱이 가능합니다. 트랙을 복제한다는 것은 텍스트가 소스에 두 번 표시된다는 것을 의미하며,이는 인식할 가치가 있지만 이 규모에서는 중복 콘텐츠 문제가 아닙니다. 한 요소 안에 있는 소수의 단어이기 때문에 귀찮다면 두 번째 복사본을 표시하십시오 aria-hidden="true"어쨌든 해야 할 일입니다.

접근성은 진정한 고려 사항이며 세 가지 진정한 문제가 있습니다:

• 모션 감도. 위의 축소된 모션 쿼리에 의해 처리됩니다. 협상 불가.
• 링크 대상 이동. 항목을 클릭할 수 있는 경우 호버링과 포커스를 일시 중지합니다. 누군가가 도달하면 사라지는 링크는 문자가 아닌 경우 정신적으로 WCAG 2.2의 목표 크기 기대에 실패합니다.
• 화면 독자들이 두 번 읽습니다. 중복 트랙은 접근성 트리에서 두 번째 복사본을 숨기지 않는 한 두 번 발표됩니다. 한 속성이 이를 수정합니다.

그 어느 것도 천막을 나쁜 생각으로 만들지 않습니다. 구성되지 않은 것을 나쁜 생각으로 만듭니다.

자주 묻는 질문

어떤 방법을 사용할 것인가

로고: 무료 로고 슬라이더, 자동 재생 지연 제로. 2분 안에 완료되며 반응형 밀도를 처리합니다.

스무 명 중 아무도 위젯 빌더 디자인은 천막이므로 로고 슬라이더는 이 작업의 도구로 유지됩니다. 그만큼 가격 페이지 특수 제작된 버전을 원하는 경우 News Ticker가 어디에 있는지 보여줍니다.

스크롤 헤드라인: 뉴스 티커. 쿼리 소스와 고정 레이블이 그 자체로 라이선스를 받을 가치가 있기 때문입니다.

그 외의 것: CSS. 짧고,여러분의 것이고,아무것도 더 이상 사용하지 않을 수 없습니다. 독립형 슬라이더 빌더도 연속 트랙을 할 수 있고,그리고 슬라이더 플러그인 비교 페이지 비용을 충당합니다.

천막 임무를 수행하는 위젯을 포함하여 모든 캐러셀과 슬라이더 위젯이 수집됩니다 요소 회전목마 위젯 페이지와 함께 20개의 수입 가능한 캐러셀 및 슬라이더 디자인, 그들 중 8 무료. 캐싱 플러그인 업데이트 후 천막이 잘못 동작하는 경우, 에서 수정 swiper 슬라이더 문제 해결 가이드 여기도 신청.