3D 회전 목마는 슬라이드가 평평한 평면을 가로 지르는 것이 아니라 깊이를 통해 이동하는 회전 목마입니다: 회전,스케일링 또는 궤도를 돌기 때문에 비활성 슬라이드가 활성 슬라이드 뒤에 눈에 띄게 앉습니다. Elementor 에서 당신은 어느 쪽이든에서 그것을 얻습니다 이미지 회전목마 위젯의 커버플로우 레이아웃또는 에서 특수 제작된 디자인.
네 가지 스타일은 시간을 들일 가치가 있습니다. 그들은 다른 작업을 수행하며,그 중 하나는 잘못된 콘텐츠에 대해 선택하면 아무런 이익없이 페이지를 느리게 만듭니다. 각각에 대한 라이브 데모와 더불어 부드러운 3D 캐러셀과 끊김없는 캐러셀을 분리하는 설정.
Coverflow: 가장 많은 사람들이 의미하는 것
중앙 슬라이드는 정사각형으로 향합니다. 양쪽 슬라이드는 Y 축에서 멀리 회전하고 약간 수축되며 어두워집니다. 눈은 가운데를 제외하고는 갈 곳이 없습니다.
그게 전체 트릭이고,coverflow 가 iTunes 의 죽음에서 살아남은 이유입니다. 주변 슬라이드는 더 많은 것을 증명할만큼 충분히 보이고,읽을 수 없을 정도로 흐려집니다. 사람들은 화살표를 클릭하여 긴장을 해결합니다.
세 가지 설정이 대부분의 작업을 수행합니다:
- 회전하다: 측면 슬라이드가 얼마나 멀리 회전하는지. 50° 를 지나면 이웃은 읽을 수 없는 슬라이버가 됩니다. 30~40° 는 왜곡이 아닌 깊이로 읽는 범위입니다.
- 깊이: 얼마나 뒤로 앉는지. 너무 멀리 밀면 측면 슬라이드가 축소판으로 줄어들고 구성이 균형을 잃습니다.
- 보기당 슬라이드: coverflow 는 최소 3 개가 보이거나 “흐름”이 없습니다. 데스크톱에서는 3,모바일에서는 1 로 설정하고 어색한 2 는 건너뜁니다.
이거 프로 필요없어요 The 무료 이미지 회전목마 위젯 커버플로우 레이아웃이 내장되어 있습니다.
좋은 용도: 사례 연구, 포트폴리오 작품, 앨범 스타일 컬렉션.
나쁜: 사람들이 비교해야 할 모든 것. Coverflow 는 한 가지를 보게하기 위해 만들어졌습니다.
뒤집기: 양면 카드
카드는 수직 축에서 전체 180° 회전합니다. 앞면은 바깥쪽으로,뒷면은 안으로. 두 면 모두 실제 내용을 담고 있습니다.
대부분의 3D 효과는 장식입니다. 이것은 아닙니다. 슬라이드 당 콘텐츠를 두 배로 늘리기 때문에 팀 페이지에서 그 자리를 얻습니다. 앞면의 사진과 이름,역할, 바이오 및 뒷면의 링크. 동일한 발자국,두 배의 정보.
사람들이 틀리는 설정은 백페이스 가시성. 그대로 두면 중간 회전을 통해 피를 흘리는 앞면의 거울 유령이 보입니다. 편집기에서 놓칠 정도로 미묘하고 망막 화면에서 분명합니다. 끄십시오.
두 번째: 플립을 600ms 미만으로 유지하십시오. 플립은 공개이며,전체 초가 걸리는 공개는 반응하는 느낌을 멈추고 로딩 상태처럼 느껴지기 시작합니다.
좋은 용도: 팀 그리드, 이전/이후, 사양 카드, 가격 책정 세부 사항은 반대입니다.
나쁜: 뒷면이 비었을 모든 것. 뒤에 아무것도 없는 뒤집기는 낭비되는 클릭입니다.
회전목마 슬라이드가 아닌 스탠딩 카드와 동일한 양면 공개를 원하십니까? 그게 Elementor 플립박스 위젯's 직업.
호: 곡선 위에서 미끄러집니다
슬라이드는 그 중심이 접힌 부분 아래에 앉아 원의 테두리를 타고. 각 하나는 원호의 상단에 똑바로 도착하고 떨어져 여행으로 멀리 팁.
아크는 워드프레스 사이트에서 가장 흔하지 않은 3D 스타일이며,이는 대부분의 가치입니다. 방문자는 커버플로우를 백 번 보았습니다. 그들은 이것을 보지 못했습니다.
그것은 당신에게 대가로 뭔가를 비용: 팁 모션은 슬라이드가 호의 상단에서 만 완전히 읽을 수 있다는 것을 의미합니다. 주변 (가격,날짜, 사양) 에서 읽을 필요가있는 콘텐츠는 디자인과 싸울 것입니다. 이미지와 짧은 제목은 그렇지 않습니다.
좋은 용도: 카탈로그, 표본 목록, 메뉴, 유사한 항목 모음.
나쁜: 데이터. 사람들이 한 번에 세 개의 슬라이드를 읽어야 한다면 격자를 사용하세요.
궤도: 중심 주위의 원운동
항목은 고정 된 중심 주위에 전체 원을 여행. 상단에있는 항목은 활성 및 전체 크기; 나머지는 뒤에 통과로 축소.
Orbit 은 다른 레이아웃이 말하지 않는 구조적인 것을 말합니다: 이것은 반복됩니다. 진정으로 시작으로 돌아가는 4 단계 프로세스는 완벽하게 읽습니다. 끝나는 5 단계 온보딩 흐름은 그렇지 않습니다. 원은 반환을 약속하며 콘텐츠가 반환되지 않으면 사람들은 결코 오지 않는 것을 기다립니다.
내용이 사이클일 때 궤도를 사용합니다. 목록일 때 커버플로우를 사용합니다.
좋은 용도: 프로세스 휠, 생태계 다이어그램, 기능 맵, 서비스 주기.
나쁜: 시작과 끝이 있는 시퀀스입니다.
끊김 없는 3D 회전목마 만드는 법
3D 변환은 GPU 에서 저렴하고 잘못하면 비쌉니다. 네 가지가 부드러운 회전목마와 들쭉날쭉한 회전목마를 분리합니다. 순서대로 물 것입니다:
- 변환과 불투명도만 활성화합니다. 너비,높이, 상단 또는 왼쪽을 애니메이션하면 모든 프레임에 레이아웃 재계산이 강제됩니다. 변환 및 불투명도는 컴포지터로 바로 이동합니다. 여기있는 모든 디자인은 그 두 가지를 고수합니다.
- 이미지 크기를 캡핑합니다. 3D 캐러셀은 여러 개의 슬라이드가 모두 표시되기 때문에 한 번에 메모리에 보관합니다. 400KB 의 슬라이드 6 개는 각각 2,4MB 로 움직이기 전에 이동합니다. 200KB 이하로 가져 와서 WebP 를 제공합니다.
- 3D 안에 3D 쌓지 마세요. 커버플로우 트랙 안에 있는 플립 카드는 중첩된 3D 컨텍스트를 생성하고 브라우저는 이를 일관되지 않게 처리합니다. 특히 Safari 는 예측할 수 없는 순간에 내부 변환을 평평하게 만듭니다. 하나를 선택하세요.
- 감소된 움직임을 존중하십시오. 어떤 사람들은 전정 장애를 가지고 있으며,깊이 애니메이션은 일반적인 트리거입니다. 여기에있는 모든 디자인은 때 일반 페이드로 떨어집니다
prefers-reduced-motion가 설정되어 있습니다. 자신만의 것을 구축한다면,동일하게.
브라우저의 장치 에뮬레이터가 아닌 중급 Android 휴대 전화에서 테스트하십시오. 에뮬레이터는 뷰포트의 크기를 조정하지만 데스크톱의 GPU 를 유지합니다. “내 기계에서는 괜찮 았어”가 나오는 곳입니다.
3D 회전 목마는 페이지 속도를 손상 시킵니까?
그 자체로는 아닙니다. 변환 기반 애니메이션은 컴포지터 스레드에서 실행되고 기본 스레드를 차단하지 않으므로 상호 작용을 다음 페인트로 많이 이동하지 않습니다.
상처를 주는 것: 이미지들. 6 개의 풀사이즈 슬라이드가 있는 접힌 부분 위의 회전목마는 가장 큰 내용의 페인트와 경쟁하는 6 개의 렌더링 차단 이미지 요청입니다. 첫 번째 슬라이드를 지나서 모든 것을 게으르게 로드하고,명시적인 너비와 높이를 설정하여 아무것도 이동하지 않고,첫 번째 슬라이드의 이미지를 150KB 미만으로 유지합니다.
3D 는 당신 문제가 아니에요 페이로드는.
캐러셀이 애니메이션을 제대로 생성하지 않고 전혀 애니메이션하지 않는 경우 이는 일반적으로 변환 문제 대신 Swiper가 초기화에 실패하는 것입니다. Swiper 문제 해결 가이드 로딩을 중지하는 내용을 다룹니다.
자주 묻는 질문
Elementor 에 3D 캐러셀이 있습니까?
네이티브는 아닙니다. Elementor 의 미디어 캐러셀 (Pro) 은 가벼운 3D 효과를 주는 커버플로우 스킨을 가지고 있지만 플립,아크 또는 궤도 옵션은 없습니다. 애드온이 필요한 분들을 위해 마스터 애드온의 무료 이미지 회전목마 커버플로우 레이아웃을 포함하고 있으며, 이 페이지의 4 가지 Pro 디자인이 나머지를 다룹니다.
Elementor 에서 커버플로우 캐러셀을 어떻게 만듭니까?
드롭 더 이미지 회전목마 위젯 페이지에 이미지를 추가한 다음 캐러셀 설정 아래에서 레이아웃을 표준에서 커버플로로 전환합니다. 보기당 슬라이드를 3 으로 설정하고 약 35° 로 회전한 다음 중앙 슬라이드를 켜면 활성 이미지가 왼쪽 플러시가 아닌 가운데에 위치합니다.
커버플로우와 3D 캐러셀의 차이점은 무엇인가요?
Coverflow 는 3D 회전 목마의 한 종류입니다: 측면 슬라이드가 Y 축에서 회전하고 후퇴하는 것입니다. 플립,아크 및 궤도도 3D 회전 목마입니다; 그들은 단지 다른 축과 경로를 사용합니다. 네 가지 모두 평평한 평면을 가로 지르는 것이 아니라 깊이를 통해 슬라이드를 움직입니다.
3D 캐러셀은 모바일에서 작동합니까?
예,조정이 있습니다. 커버 플로우는 768px 이하에서보기 당 하나의 슬라이드로 떨어지거나 측면 패널이 사용할 수없는 슬라이버가되어야합니다. 플립은 변경되지 않고 작동합니다. 아크와 궤도는 제대로 읽으려면 더 넓은 뷰 포트가 필요하므로 둘 다 전화기의 표준 수평 슬라이드로 돌아갑니다.
왜 사파리에서 3D 회전목마가 깜박일까요?
거의 항상 백페이스 가시성. Safari 는 회전된 요소를 명시적으로 숨기지 않는 한 역방향으로 렌더링하며,이는 회전 중간에 깜박임 또는 고스트 미러 이미지로 표시됩니다. 설정 backface-visibility: hidden 회전하는 요소에 그리고 그것은 멈춘다.
어느 것을 골라야 할 지
확실하지 않은 경우 커버 플로우. 사람들이 이미 이해하고있는 스타일이며 무료 이미지 회전 목마 위젯이 라이센스없이 제공합니다. 콘텐츠가 진정으로 양면을 가지고 있다면 뒤집으십시오. 틈새 시장의 첫 페이지에 다른 사람이없는 것을 원한다면 아크가 실제로 표시되는 것이 루프 인 경우에만 궤도. 섹션이 회전 목마를 전혀 원하지 않을 수도 있다면 회전목마 대 슬라이더 모션 스타일이 중요하기 전에 이를 해결합니다.
회전하려는 것이 최신 게시물인 경우 당사의 Marquee 레이아웃을 사용하세요 Elementor 블로그 템플릿 블로그 페이지 상단에 추천 게시물 회전목마를 놓습니다.
세트에 있는 20개의 디자인 중 8개입니다 무료 플러그인에서 가져오기. 키스톤 기능 슬라이더가 가까이 오지만 무료 8 중 어느 것도 3D가 아닙니다: 항목을 홍보하면 깊이 변환이 아닌 FLIP 위치 애니메이션이 실행됩니다.
20개의 디자인은 모두 다음과 같이 제작되었습니다 위젯 빌더는 자신만의 것을 만드는 데 사용하는 도구이기도 합니다. 라이센스를 평가하는 경우 가격 페이지 각 계층이 잠금 해제하는 항목을 나열합니다.
네 명 모두 라이브 데모가 있습니다 요소 회전목마 위젯 페이지, 다른 열여섯 가지 디자인과 나란히. 차라리 풀세트를 나란히 먼저 보고 싶다면 스무 슬라이더 템플릿 모두 동일한 처리로 한 곳에 수집됩니다.
20개 중 하나 모두 a입니다 마스터 애드온 위젯 또는 확장, 그래서 그들은 스톡 위젯과 같은 방식으로 설치합니다. for a 썸네일 스트립 갤러리 3d 트랙보다는 갤러리 슬라이더 위젯 는 기성품 옵션입니다.
