Elementor 스크롤 효과: 16 이미지 스크롤 애니메이션

주요 시사점

• 스톡 편집기의 요소 스크롤 효과는 고급 > 모션 효과 > 스크롤 효과(수직 스크롤, 수평 스크롤, 투명성, 흐림, 회전 및 크기 조정) 아래의 6개 컨트롤이며 각 컨트롤은 단일 요소를 이동합니다.
• 스크롤 효과 컨트롤은 Elementor Pro 기능이며 무료 Elementor 4.3.2 플러그인에는 해당 기능이 포함되어 있지 않습니다.
• 이 페이지의 16 이미지 스크롤 효과는 전체 화면 스테이지를 고정하고 3D 큐브, 페이지 넘기기 책 및 스태킹 카드 덱을 포함하여 스크롤 위치에 대한 전체 이미지 세트를 애니메이션화하는 Master Addons Widget Builder 위젯입니다.
• 16 개의 스크롤 위젯 각각에는 하나의 JSON 파일과 README 를 보유하는 자체 zip 다운로드가 있으며 JSON 은.json 파일만 허용하는 마스터 애드온 > 위젯 빌더 > 위젯 가져오기를 통해 가져옵니다.
• 16개 위젯에는 모두 선호 모션 감소 규칙이 포함되어 있으므로 운영 체제에서 모션을 끄는 방문자는 애니메이션 대신 스틸 레이아웃을 얻습니다.

대부분의 사람들이 그들을 충족 Elementor 스크롤 효과는,모션 효과 패널에 스크롤 효과 컨트롤입니다: 수직 스크롤,수평 스크롤,투명도, 흐림,회전 및 규모. 각각은 페이지가 이동으로 하나의 이미지 또는 제목을 넛지,그만큼 멀리 그들이 큐브가 내부를 회전하는 동안 섹션을 고정하는 것은 그들 너머입니다.

이 게시물은 그 큰 규모에서 작동하는 16 개의 이미지 스크롤 애니메이션을 보여줍니다. 각각은 Master Addons Widget Builder 를위한 기성품 위젯으로,무엇이든 설치하기 전에 열 수있는 라이브 데모입니다. 아래에서 각 효과가 수행하는 작업,어떠한 종류의 사이트가 적합한지,세트를 가져 오는 방법 및 속도와 접근성을 확인하는 방법을 찾을 수 있습니다.

Elementor 스크롤 효과가 스스로 할 수 있는 일

Elementor 자신의 스크롤 효과는 방문자가 스크롤할 때 한 요소의 속성 하나를 변경합니다. 위젯이나 컨테이너를 선택하고 엽니다 고급 > 모션 효과, 켜세요 스크롤 효과, 그리고 여섯 가지 옵션 중에서 선택하세요. Elementor 의 모션 이펙트 도움말 페이지 수직 스크롤, 수평 스크롤, 투명성, 흐림, 회전 및 축소로 나열합니다.

이러한 컨트롤은 Elementor Pro 에 속합니다. 무료 Elementor 4,3.2 플러그인을 확인했는데 스크롤 컨트롤이 없습니다.

스크롤 효과는 자신의 요소와 뷰포트만 알고 있습니다. 내부의 콘텐츠가 변경되는 동안 섹션을 제자리에 고정할 방법이 없으며,열 개의 이미지를 순서대로 도착하도록 조정할 수 없습니다. 영웅 이미지의 시차는 이러한 방식으로 설정하기 쉽습니다. 퍼즐 조각으로 깨지고 읽으면서 다시 조립되는 사진에는 사용자 정의 위젯이 필요하며,이것이 이 게시물의 나머지 부분에서 다루는 내용입니다.

일반 시차만 있으면 됩니다 Rellax 확장 master Addon에서는 이를 처리합니다 애니메이션 개요 입구 및 부동 효과를 다룹니다.

이 위젯을 실행하는 데 필요한 것

Elementor,Master Addons 및 Widget Builder 가 필요합니다. Elementor 측에서는 무료 Elementor 플러그인으로 충분합니다. 왜냐하면 이러한 디자인 중 어느 것도 Elementor Pro 위젯이나 모션 이펙트 패널을 사용하지 않기 때문입니다.

위젯은 에서 가져오고 편집됩니다 위젯 빌더마스터 애드온 프로 기능입니다. 계획은 에 있습니다 가격 페이지. 아래의 모든 디자인은 라이브 데모 옆에 자체 다운로드 링크가 있으며 전자 메일 게이트가 없습니다.

또한 자신만의 이미지를 원할 것입니다. 데모는 공개 도메인과 공개 라이선스 사진을 사용하며 각 위젯에는 이미지 필드 또는 리피터가 있으므로 교체하는 데 몇 분이 걸립니다.

라이브 데모는 아무것도 설치할 필요가 없습니다. 하나를 열고 몇 가지 창 크기로 스크롤하면 모션 스타일이 콘텐츠에 적합한지 여부를 가장 빠르게 알 수 있습니다.

Elementor 에 대한 16 이미지 스크롤 효과

16 개의 이미지 스크롤 효과는 다섯 그룹으로 나뉩니다: 고정 된 공개,3D 개체,카드 데크,끝없는 갤러리,색인 또는 상점 레이아웃. 대부분은 동일한 기초를 사용합니다. 위젯은 그 자체로 높은 활주로를 제공하고 끈적 끈적한 위치 지정으로 그 안에 하나의 화면 스테이지를 고정하고 활주로를 스크롤하여 애니메이션을 구동 한 거리를 읽습니다. 뒤로 스크롤하면 모든 것이 반대로 재생됩니다.

고정 된 이미지가 드러납니다

이 네 개는 프레임을 가만히 잡고 그 안에 있는 것을 바꿉니다. 각각의 그림에 단락이 있는 긴 형식의 페이지에 어울립니다.

1. 가늠구멍 색인

각 항목은 얇은 수평 밴드로 시작하여 화면 중앙,리프 셔터가 열리는 방식에 도달하면 전체 사진으로 열립니다. 제목은 이미지 건너편에 있고 항목은 페이지 아래 왼쪽과 오른쪽을 번갈아 가며 나타납니다. 프레임은 텍스트가 스크롤되는 동안 고정되어 있다가 놓습니다.

어두운 바탕에 스크롤에 드러나는 이미지이므로 야간 촬영과 블랙에 제품 샷을 아첨합니다. 4~6개의 항목이 편안한 범위입니다.

2. 지붕 널 프레임

사본이 왼쪽에 스크롤하는 동안 하나의 프레임은 오른쪽에 고정되어 있습니다. 각각의 새로운 텍스트 블록이 도착하면 해당 그림은 지붕의 지붕 널처럼 동일한 프레임 내부의 이전 블록 위로 미끄러집니다. 페이지 배경은 모든 그림에 따라 색상이 변경됩니다.

색상 이동은 독자에게 새로운 장이 시작되었음을 알려주기 때문에 구분선과 하위 제목을 삭제할 수 있습니다. 각각 단락에 해당하는 4~5개 항목이 포함된 사례 연구 및 특집 투어에 사용하십시오.

3. 비둘기 꼬리 장

모든 챕터에는 서로 맞물린 직소 조각으로 잘라낸 그림이 들어 있습니다. 흩어지고 회전하기 시작합니다. 스크롤을 통해 집으로 이동하면 그림이 전체화되면 캡션이 나타납니다.

모든 조각의 위치는 스크롤 오프셋에서 계산되므로 애니메이션은 결코 독자보다 앞서거나 뒤처지지 않습니다. 두 개에서 네 개의 큰 이미지가있는 스토리 텔링 페이지에 잘 작동합니다. 트릭이 얇아지기 때문에 네 개를 넘지 않을 것입니다.

4. 씨실 격자

섹션은 한 장의 사진에서 풀 블리드로 열립니다. 스크롤,그리고 다른 그림이 그 주위로 날아가는 동안 3 열 격자에서 그 자리로 축소됩니다. 계속 스크롤하고 행이 헤드 라인과 버튼을위한 공간을 만들기 위해 분할합니다.

이것은 상점이나 스튜디오 홈 페이지에 대한 강력한 영웅입니다,그것은 하나의 큰 그림에서 전체 컬렉션으로 이동하기 때문에,단일 섹션에서 행동에 대한 호출에. 정적 대안에 대한,우리의 참조 Elementor 영웅 섹션 템플릿.

3D 스크롤 효과

이 네 가지는 CSS 3D 변환과 원근법을 사용하며 스크롤 위치가 이를 구동합니다. 타이머에서 재생되거나 화살표에 반응하는 3D 를 원한다면,우리의 가이드는 엘리멘터 3D 캐러셀 그 쪽을 덮는다.

5. 패싯 큐브

여섯 장의 사진이 큐브의 여섯 면에 놓여 있습니다. 큐브는 스크롤 한 번 당 한 면을 돌리고,당신이 마주보고 있는 사진은 배경 전체에 퍼져 있습니다. 오른쪽에 있는 썸네일 레일은 당신이 어디에 있는지 보여주고 어떤 면으로도 점프할 수 있게 해줍니다.

큐브는 6 개의 변을 가지므로 6 이 하드 리미트입니다. 그래서 짧은 포트폴리오 세트나 6 개의 제품 범위에 딱 맞습니다.

6. 궤도 관

사진 카드의 반지는 수직 축 주위에 서서 튜브를 형성하기 위해 서로 겹쳐져 있습니다. 바로 바깥에서 볼 수 있으므로 가까운 벽이 화면을 크게 통과하고 먼 벽이 틈새를 통해 작고 희미하게 보입니다. 데모에서는 유리 지구본이 축에 위치하며 위젯은 구체, 원자, 고리 행성, 와이어 큐브, 이미지 또는 아이콘을 포함한 다른 중앙 개체를 제공합니다.

튜브로 읽으려면 많은 이미지가 필요하므로 16개 이상의 갤러리를 생각해 보세요.

7. 이젤 랙

이젤 랙 깊이 서 스크롤 갤러리입니다. 각 그림은 스크롤이 화면의 중간과 수평을 가져올 때까지 당신에게서 멀리 돌려 접시입니다,어디 당신을 향해 둥근 스윙. 캡션은 접시 옆에 앉아 항목 지그재그 왼쪽과 오른쪽.

데모는 도자기 스튜디오의 여섯 단계를 통해 산책, 그리고 그것은 그것을 위해 자연 사용: 프로세스 단계 또는 서비스의 번호가 매겨진 목록입니다.

8. Quire 책

닫힌 책은 스크롤하면서 열리고,한 번에 한 페이지씩 회전합니다. 각 시트는 양쪽에 인쇄되어 있고 척추에서 회전하므로 페이지 뒷면이 넘어가는 것을 볼 수 있습니다. 위로 스크롤하면 책이 다시 닫힙니다.

데모는 왼쪽 페이지에 사진이 있고 오른쪽에는 요리가있는 레스토랑 메뉴입니다. 룩북과 브로셔에도 적합합니다. JavaScript 를 끄면 페이지가 읽기 순서로 일반 열로 돌아가므로 검색 엔진이나 화면 판독기에서 숨겨지는 것은 없습니다.

카드 덱

9. 리플데크

이것은 초상화 카드로 수행되는 스크롤 패턴의 카드 쌓기입니다. 각 스크롤 단계는 다음 카드를 파일 위에 약간의 각도로 놓습니다. 배경 색상은 각 카드에 맞게 이동하며 작은 진행률 표시줄이 세트를 통해 계산됩니다.

초상화 이미지는 제일 일합니다: 포스터, 책 표지, 포장, 앱스크린. 6 개에서 8 개의 카드는 우측에 관하여 입니다.

10. 산산조각 갑판

Shatter Deck 은 풀프레임 사진 덱으로,각각 캡션과 버튼이 있고,두 개의 화살표가 있어 사진을 통과합니다. 이미지 사이를 이동하면 사진이 작은 타일 격자로 잘려서 흩어져 다음 사진으로 다시 모입니다.

상자 밖으로 당신은 화살표,수평 드래그 또는 화살표 키와 함께 그것을 통해 이동하면 갑판에 초점이 있습니다. 페이지는 정상적인 수직 스크롤을 유지합니다. 스위치 on the 스크럽으로 스크롤 제어 및 스크롤은 대신 전환을 구동합니다. 감소 된 모션을 활성화하면 타일이 비행을 멈추고 데크가 교차 페이드됩니다.

끝없는 스크롤 갤러리

이 세 개의 루프. 첫 번째 또는 마지막 그림이 없으며,읽기보다 탐색에 더 적합합니다.

11. 살롱 걸이

살롱 걸이는 정상 및 바닥이 없는 벽입니다. 그림은 1 개의 란에서 걸고,다른 총계에 의하여 중앙의 좌우로 밀리고 다른 폭에 커트,살롱 걸림새가 갤러리 벽을 군중을 두는 방법. 마지막 그림 후에 첫번째 다시 그림을 누르고 자막과 뒤 단추를 가진 그것의 자신의 페이지로 성장합니다.

순서가 중요하지 않고 각 이미지를 자세히 살펴볼 가치가 있는 사진 포트폴리오에 사용하십시오.

12. 필라멘트 실

우표 크기의 사진은 화면을 가로질러 구불구불하게 감기는 닫힌 실을 따라 묶여 있습니다. 스크롤을 통해 실을 따라 이동합니다. 무대 중앙을 지나는 곳마다 그림이 루페 아래처럼 부풀어 오르고 캡션이 앞에 있는 사진을 클릭하여 엽니다.

작은 썸네일은 한 번에 화면에 많은 사진이 들어맞는다는 것을 의미하기 때문에 대규모 아카이브의 경우 16개 중 최고입니다. JavaScript가 없으면 위젯은 모든 사진을 일반 그리드로 표시합니다.

13. 릴 초상화

릴 인물 사진은 한 번에 한 장씩 전체 화면 인물 사진을 루프에서 보여줍니다. 각각은 매우 큰 단어 세트를 가로질러 전달하며,회전하는 드럼의 유형처럼 곡선을 따라 옆으로 달리며,다른 방향으로 가로지르는 손으로 쓴 선으로 사진이 유형 뒤의 시차 드리프트로 움직이고,왼쪽에는 번호가 매겨진 인덱스가 낮게 위치합니다.

열여섯의 가장 시끄러운 디자인이며,패션과 편집 사이트에 어울립니다. 다섯 개나 여섯 개의 강한 이미지와 한 단어씩을 주면.

색인 및 매장 레이아웃

14. 벨로우즈 지수

Bellows Index 는 한 번에 한 항목씩 작품 본문을 보여줍니다. 각각은 큰 제목,같은 그림과 캡션이 겹치는 두 개의 판을 가지고 있으며 전체 페이지는 모든 항목에 대해 새로운 색상을 취합니다. 제목은 가변 글꼴로 설정되고 위젯은 너비 축에 스크롤 압력을 기록하므로 이동함에 따라 단어가 늘어나고 안정됩니다.

네 개에서 여덟 개의 출품작으로 가장 잘 읽혀집니다. 전시회나 특집 프로젝트 세트에 사용해 보세요.

15. 조수 지수

Tide Index 에는 서로 반대 방향으로 움직이는 두 개의 열이 있습니다. 제목은 왼쪽으로 내려가고 오른쪽으로 내려간 사람들은 스크롤 할 때 각 선은 파도에 옆으로 미끄러지고 왼쪽 열은 한 방향으로 오른쪽은 거울로 미끄러지며 현재 행에 대한 사진이 그 사이에 있습니다.

이것은 유형별로 주도되며 이미지는 지원 역할을 합니다. 신용 목록과 긴 프로젝트 인덱스에 적합합니다.

16.스와치샵

Swatch Shop 은 스크롤을 통해 걸어 내려가는 제품 사진의 복도입니다. 제품이 앞에있는 동안 방 전체가 색상을 취하고 그 옆에있는 카드는 이름,짧은 설명,가격, 크기 옵션 및 버튼을 보여줍니다. 오른쪽의 색상 점 열은 장소를 표시합니다.

그것은 작은 카탈로그를 위해 건축됩니다: 꽃집, 도자기, 초, 인쇄. 7 개의 제품은 데모를 채웁니다.

16 개의 스크롤 효과를 한눈에 모두

이 표를 사용하여 스크롤 효과를 가지고 있는 콘텐츠와 일치시킵니다. 항목 개수는 레이아웃이 편안하게 처리하는 것입니다.

16 스크롤 효과 위젯을 다운로드

각 위젯은 별도의 zip이므로 사용하려는 것만 다운로드합니다. 모든 zip 에는 두 개의 파일이 있습니다: 위젯의 JSON 과 컨트롤을 나열하는 README.

파일을 가져오기 전에 압축을 풉니다. Widget Builder 가져오기는.json 파일을 읽고 zip 자체를 수락하지 않습니다.

Elementor로 스크롤 위젯을 가져오는 방법

Master Addons Widget Builder 를 통해 각 위젯을 가져온 다음 다른 Elementor 위젯처럼 페이지로 드래그합니다. 전체 작업은 디자인 당 약 2 분 정도 걸립니다.

1. 원하는 위젯을 다운로드하고 압축을 풉니다. 내부에는 like 라는 이름의 파일이 있습니다 widget-facet-cube.json, README도 있습니다.
2. WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 > 위젯 빌더 그리고 클릭하세요 위젯 가져오기.
3. 하나의.json 파일을 업로드 영역으로 드래그하거나 클릭합니다 파일 찾아보기 그리고 골라보세요. 수입업자는 한 번에 하나의 파일을 가져 가므로 원하는 각 디자인에 대해 이것을 반복하십시오.
4. Elementor 에서 아무 페이지나 열고 위젯 패널에서 디자인 이름,예를 들어 “Facet Cube”를 검색합니다. 전폭 컨테이너로 드래그합니다.
5. 콘텐츠 탭에서 데모 이미지와 텍스트를 바꾼 다음 스타일 탭에서 색상과 타이포그래피를 설정합니다.

이 파일들은 Elementor 자신의 것을 거치지 않습니다 템플릿 > 가져오기 화면. 그 수입자는 우리가에서 다루는 페이지와 섹션 템플릿에 대한 것입니다 elementor 템플릿을 가져오는 방법. 고정 된 위젯도 공간이 필요합니다. 패딩없이 전체 너비로 설정된 컨테이너에 넣거나 무대가 좁은 기둥 안에 앉아 비좁게 보입니다.

또한 읽어보세요: Elementor에서 GSAP 애니메이션을 추가하는 방법를, 스크롤 트리거 애니메이션을 처음부터 직접 작성하려는 경우.

이미지 스크롤 위젯 대 이미지 스크롤 효과

이미지 스크롤 위젯과 이미지 스크롤 효과는 서로 다른 두 가지이며,이름은 혼란을 야기합니다. 대부분의 Elementor 애드온에서 “이미지 스크롤”은 고정 프레임 내부의 키가 큰 스크린 샷을 의미하며,그 위에 마우스를 올리면 위로 미끄러집니다. 테마 상점은 작은 상자에서 긴 페이지를 미리보기 위해 사용합니다.

이미지 스크롤 효과는 페이지 스크롤에 묶인 애니메이션입니다: 방문자가 페이지를 아래로 이동하면서 드러내거나 쌓거나 돌리거나 이동하는 이미지. 이 게시물의 모든 것이 두 번째 종류입니다. 호버 미리보기가 당신이 온 것이라면 이미지 스크롤 위젯이있는 애드온이 필요합니다. 왜냐하면이 16 개 중 어느 것도 그렇게하지 않기 때문입니다.

Elementor의 스크롤 텔링

Scrollytelling 는 스크롤이 스토리를 발전시키는 페이지입니다: 옆에있는 텍스트가 이동하는 동안 시각적 인 것은 고정 된 상태로 유지되며 각 단계에서 시각적 인 변화가 있습니다. Elementor 는 끈적 끈적한 열로 기본 버전을 만들 수 있습니다. 더 어려운 부분은 독자가있는 위치에 정확하게 시각적으로 반응하게하는 것입니다.

이 위젯 중 세 개는 이를 위해 제작되었습니다. Shingle Frame 은 각 단락을 마지막 단락을 대체하는 그림과 쌍을 이루고,Dovetail Chapters 는 읽을 때 장당 하나의 그림을 조립하며,Quire Book 은 모든 섹션에 대해 페이지를 넘깁니다. 더 긴 스토리의 경우 그 중 두 개를 일반 텍스트 섹션이 중간에 있는 한 페이지에 쌓아두면 독자가 모션에서 휴식을 취할 수 있습니다.

스크롤 효과로 인해 사이트 속도가 느려지나요?

스크롤 효과는 부주의하게 구축되면 사이트 속도가 느려지고 일반적인 범인은 모든 프레임의 레이아웃을 변경하는 대형 이미지와 애니메이션입니다. 이러한 위젯은 두 번째 문제를 피합니다. 브라우저가 그래픽 카드에 전달할 수있는 CSS 변환 및 불투명도로 애니메이션을 적용하고 IntersectionObserver 를 사용하여 위젯이 화면에 표시되는 시간을 알 수 있습니다.

열두 장의 사진을 보여주는 위젯은 열두 장의 사진을 로드하기 때문에 이미지 무게는 사용자에게 달려 있습니다. WebP 로 내보내고,표시되는 가장 큰 치수로 크기를 조정하고,각각 약 150KB 미만으로 유지합니다.

접근성 측면에서 16개 위젯 모두 다음을 수행합니다 prefers-reduced-motion 규칙. 더 적은 동의에 그들의 장치를 요구한 방문자는 정지 배치를 얻는다: 씨실 격자는 그것의 끝낸 격자를 위에 원본으로 보여주고,산산조각 갑판은 교차 퇴색한다. 산산조각 갑판은 또한 진짜 탭 정지이다,그래서 화살표 키는 초점이 있고지 않 페이지를 그렇지 않으면 공중 납치하지 않으면 일단 작동한다.

휴대폰의 경우 여러 디자인에는 자체적인 좁은 화면 레이아웃이 포함됩니다. Facet Cube 는 썸네일 레일을 무대 아래에 있는 행으로 이동하고 Reel Portraits 는 인덱스를 숫자 행으로 바꿉니다. 그래도 게시하기 전에 실제 휴대폰에서 선택한 위젯을 테스트하십시오. 키가 큰 고정 섹션은 마우스 휠 아래보다 엄지손가락 아래에서 더 길게 느껴집니다. 사이트에서 비표준 중단점을 사용하는 경우 가이드 요소 중단점 그것들을 조정하는 방법을 설명합니다.

저는 한 페이지에 하나의 고정된 스크롤 효과를 사용할 것입니다. 최대 두 개입니다. 고정된 각 스테이지에는 스크롤 거리가 추가되며,그 중 세 개를 연속으로 스크롤해야 하는 방문자가 이를 느낄 것입니다.

자주 묻는 질문

최종 생각

Elementor 의 내장 스크롤 효과는 한 요소를 이동하는 6 가지 방법을 제공하며 Elementor Pro 에 살고 있습니다. 여기 16 개의 위젯은 그 너머의 땅을 덮습니다: 4 개의 고정 된 공개,4 개의 3D 조각,2 개의 카드 덱,3 개의 끝없는 갤러리 및 3 개의 인덱스 또는 상점 레이아웃,각각 라이브 데모 및 감소 된 모션 폴백이 있습니다.

하나를 선택하려면 이미지를 세고 순서가 중요한지 결정한 다음 위 표에서 선택하세요. 다음에서 이러한 디자인을 변경하거나 새 디자인을 만들 수 있습니다 위젯 빌더.

관련 읽기

• Elementor 이미지 상자: 라이브 데모 및 다운로드가 포함된 16가지 디자인
• 20개의 Elementor 슬라이더 템플릿: 커버플로, 타임라인, 추천서 등
• Elementor 3D 회전 목마: 커버 플로우,플립, 아크 및 궤도
• 4 코드 없는 Elementor 애니메이션 효과 확장
• Elementor Marquee: 무한한 스크롤 텍스트, 로고 및 티커