카운터 업
숫자는 강력한 이야기를 들려줍니다 – 특히 방문자의 눈앞에서 애니메이션을 적용 할 때. 카운터 업 요소는 주요 통계를 매력적이고 역동적 인 디스플레이로 바꿉니다. 행복한 고객,완료 된 프로젝트 또는 중요한 측정 기준을 0 에서 시작하여 최종 번호까지 롤업하는 부드러운 계산 애니메이션으로 보여줍니다. 깨끗한 그리드에 여러 카운터를 배치하고 아이콘이나 이미지를 추가하고 브랜드에 맞게 모든 세부 사항을 스타일링하십시오. 이는 신뢰를 구축하고 성과를 강조하며 사이트의 모든 섹션에 현대적인 상호 작용을 추가하는 입증 된 방법입니다.
유연한 다중 열 그리드 레이아웃
하나의 통계만 표시하지 말고 – 일련의 업적을 보여주세요. 여러 카운터 항목을 추가한 다음 반응형 그리드에 배열하세요. 1~6 개의 열 중에서 선택하여 꽉 조이는 바닥글이든 넓은 영웅 섹션이든 레이아웃에 완벽하게 맞춥니다. 그리드는 모바일에서 자동으로 조정되고 아름답게 쌓여 모든 장치에서 통계가 멋지게 보이도록 합니다. 이 구조는 고전적인 “이정표” 또는 “재미있는 사실” 섹션을 만드는 데 적합합니다.
- 반응형 그리드 시스템: 태블릿과 모바일에서 자동 스태킹 기능을 통해 데스크탑용 카운터를 최대 5열로 배열합니다.
- 무제한 카운터: 필요한 만큼 카운터 아이템을 추가하세요 - 클라이언트, 프로젝트, 시간, 커피 한잔 등 무엇이든 가능합니다.
- 균형 잡힌 간격: 그리드는 전문적이고 균형 잡힌 모양을 위해 일관된 간격과 정렬을 유지합니다.
부드러운 애니메이션 계산
마법은 움직이고 있습니다. 카운터는 정적인 숫자를 보여주는 대신 0 에서 시작하여 목표 숫자까지 부드럽게 애니메이션됩니다 (6000+와 같은). 이 미묘한 애니메이션은주의를 끌고 성장을 강조하며 통계가 더 중요하고 획득 된 느낌을줍니다. 당신은 완벽한 극적인 효과를 위해 마지막 숫자,접두사/접미사 (“+”기호와 같은) 및 카운트의 속도를 제어합니다.
- 주의-잡기 모션: 롤링 카운트는 자연스럽게 방문자의 눈을 주요 측정항목으로 끌어당깁니다.
- 사용자 정의 가능한 형식: 숫자에 접두사 (“$” 와 같은) 와 접미사 (“K” 또는 “+” 와 같은) 를 추가합니다.
- 제어된 기간: 사이트의 속도에 맞게 계산 애니메이션의 속도에 영향을 줍니다.
완전한 시각적 사용자 정의
카운터는 디자인의 필수적인 부분처럼 보여야 합니다. 배경색,패딩, 여백,테두리, 그림자로 전체 카운터 박스의 스타일을 지정합니다. 그런 다음 각 구성 요소를 사용자 정의합니다: 아이콘/이미지 (크기,위치, 배경), 애니메이션 숫자 (색상,타이포그래피), 그리고 그 아래의 제목,모든 부분의 색상,글꼴, 간격 등을 독립적으로 제어할 수 있어 끝없는 창의적인 조합이 가능합니다.
- 개별 구성 요소 스타일링: 아이콘, 숫자 및 제목을 별도의 색상과 타이포그래피로 독립적으로 스타일링합니다.
- 아이콘 및 이미지 유연성: 활성화된 라이브러리의 아이콘을 사용하거나 사용자 정의 이미지를 각 통계에 대한 시각적 앵커로 업로드합니다.
- 전문 프레이밍: 상자 그림자, 테두리 반경 및 배경색을 사용하여 각 카운터 항목을 팝업으로 만듭니다.
카운터업을 위해 자주 묻는 질문
누군가가 스크롤하여 지나갈 때마다 계산 애니메이션이 재생됩니까?
일반적으로 애니메이션은 페이지 로드 중에 요소가 뷰포트에 처음 들어올 때 한 번 트리거됩니다. 사용자가 스크롤을 훑어보고 뒤로 이동하면 일반적으로 페이지를 새로 고치지 않으면 재생되지 않습니다. 이렇게 하면 애니메이션이 반복적이고 산만해지는 것을 방지할 수 있습니다.
카운터 그래픽에 아이콘 대신 이미지를 사용할 수 있나요?
예! 아이콘 설정에서 아이콘을 선택하는 대신 사용자 지정 이미지를 업로드하도록 선택할 수 있습니다. 그런 다음 이미지 크기와 위치를 제어하여 로고,사용자 지정 그림 또는 사진을 사용하여 각 통계를 나타낼 수 있습니다.
애니메이션이 포함된 카운터가 여러 개 있으면 페이지 속도가 느려지나요?
애니메이션은 가볍고 효율적인 JavaScript 를 사용합니다. 페이지에 4-5 개의 카운터가 있으면 성능에 미미한 영향을 미칩니다. 그러나 모든 페이지 요소와 마찬가지로 수십 개의 카운터가 있으면 페이지 속도를 테스트하는 것이 좋습니다. 주요 성능 요소는 항상 이미지/아이콘 최적화입니다.
단일 열 카운터 레이아웃의 좋은 사용 사례는 무엇입니까?
단일 열 레이아웃은 사이드바, 좁은 섹션 또는 각 카운터가 제목 아래에 더 큰 아이콘과 더 자세한 설명이 있는 자체 라인의 주요 초점이 되기를 원할 때 적합합니다.
카운터를 0이 아닌 숫자부터 시작하게 할 수 있나요?
고전적이고 가장 매력적인 효과는 0 부터 목표 숫자까지 세는 것입니다. 이는 성장이나 축적을 시각적으로 강조하기 때문입니다. 표시된 설정은 해당 효과에 초점을 맞추고 있습니다. 다른 숫자에서 시작하려면 사용자 정의 코드를 탐색하거나 위젯에서 고급 설정을 확인해야 할 수도 있습니다.
카운터가 Elementor의 동적 데이터와 호환됩니까?
카운터 업 요소는 주로 고정된 마일스톤 또는 업적을 나타내는 수동으로 입력된 정적 숫자를 위해 설계되었습니다. 자동으로 변경되는 동적 데이터를 표시하려면 (실시간 방문자 수와 같이) 일반적으로 다른 보다 특화된 위젯 또는 통합이 필요합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
