Elementor에서 스크롤 시 애니메이션을 추가하는 방법(예: Apple AirPods)

게시 됨: 2022-07-21

Apple 및 Sony가 웹사이트에서 사용하는 것과 같은 Elementor에서 스크롤에 애니메이션을 추가하는 방법을 찾고 계십니까?

Elementor Pro에는 모션 효과 기능을 통해 모든 종류의 깔끔한 애니메이션 효과가 포함되어 있지만 Apple 웹 사이트(및 기타 여러 사이트)에서 볼 수 있는 것과 같은 스크롤 효과에 대해 정말 매력적인 이미지 시퀀스를 만들 수는 없습니다. 예를 들어, AirPods Pro 페이지 .

Scrollsequence 플러그인을 사용하면 이러한 유형의 영화 스크롤 애니메이션을 Elementor에 쉽게 추가할 수 있습니다(Elementor 무료 버전 포함 ).

말로 설명하기 어렵기 때문에 아래 예를 확인하세요( 방문자가 페이지를 스크롤할 때 애니메이션이 움직입니다 ).

일반적으로 Scrollsequence에 대해 자세히 알아보려면 전체 Scrollsequence 리뷰를 읽을 수 있습니다.

하지만 이 게시물에서는 Scrollsequence를 사용하여 Elementor에서 스크롤에 애니메이션을 추가하는 방법에 특히 중점을 둘 것입니다.

파헤쳐보자!

Scrollsequence를 사용하여 Elementor에서 시네마틱 스크롤 애니메이션을 만드는 방법

다음은 관련된 단계에 대한 개략적인 설명입니다. 자세한 자습서를 보려면 계속 읽으십시오.

Scrollsequence 플러그인 설치
애니메이션 만들기
Elementor에 스크롤 애니메이션 추가

1. Scrollsequence 플러그인 설치

시작하려면 Elementor 웹사이트에 Scrollsequence 플러그인을 설치해야 합니다.

Scrollsequence는 WordPress.org에 무료 버전과 더 많은 기능을 추가하는 프리미엄 버전이 있습니다. 무료 버전을 사용하면 최대 3개의 장면과 장면당 최대 100개의 이미지로 기본 애니메이션을 설정할 수 있으며 프리미엄 버전은 모든 제한을 제거하고 고급 애니메이션 및 기능을 추가합니다.

Scrollsequence – 시네마틱 스크롤 이미지 애니메이션 플러그인

작성자: 스크롤 시퀀스

현재 버전: 1.2.7

최종 업데이트: 2022년 5월 9일

scrollsequence.1.2.7.zip

98% 등급 1,000+ 설치 WP 5.0+ 필요

또한 14일 무료 평가판을 통해 모든 프리미엄 기능을 무료로 사용해 볼 수 있으므로 테스트를 위해 비용을 지불할 필요가 없습니다.

평가판 후에 프리미엄 버전을 원하면 $69.99부터 시작합니다. 그러나 독점 Scrollsequence 쿠폰을 사용하여 20%를 절약할 수 있습니다.

20 % 할인

스크롤 시퀀스

WPMAYOR20 쿠폰으로 Scrollsequence에서 독점 20% 할인을 받으십시오. 몇 분 안에 스크롤 애니메이션을 만드십시오.

WPMAYOR20 쿠폰으로 Scrollsequence에서 독점 20% 할인을 받으십시오. 몇 분 안에 스크롤 애니메이션을 만드십시오. 적게 표시

2. 애니메이션 만들기

플러그인을 설치했으면 Scrollsequence → Add New Scrollsequence 로 이동하여 첫 번째 스크롤 애니메이션을 설정합니다.

각 애니메이션은 하나 이상의 장면으로 구성되며 각 장면에는 시퀀스로 배열된 여러 이미지가 포함됩니다. 그런 다음 플러그인은 시퀀스의 모든 이미지를 기반으로 애니메이션을 생성합니다.

"장면"은 하나의 완전한 애니메이션 시퀀스입니다. 여러 장면을 추가하기로 결정한 경우 사용자는 첫 번째 장면의 애니메이션을 완전히 스크롤하면 다음 장면으로 넘어갑니다.

대부분의 경우 시퀀스의 이미지는 기본 비디오를 기반으로 합니다. 기존 비디오를 일련의 개별 이미지로 변환하려면 플러그인 설명서에서 이러한 도구 중 하나를 사용할 수 있습니다. 가장 간단한 옵션은 브라우저 기반 Ezgif 변환기이지만 전용 소프트웨어를 사용하면 더 나은 품질을 얻을 수 있습니다.

장면 생성 및 이미지 추가

고급 애니메이션을 만든 후에는 장면 추가 버튼을 클릭하여 첫 번째 장면을 추가합니다.

그러면 애니메이션 시퀀스에 대한 모든 이미지를 업로드할 수 있는 새로운 옵션 세트가 확장됩니다. 개발자는 원활한 애니메이션을 위해 장면당 최소 50-100개의 이미지를 업로드할 것을 권장합니다.

이미지를 업로드하면 정렬 옵션을 사용하여 이미지가 올바른 순서로 되어 있는지 확인할 수 있습니다. 순서가 올바르지 않으면 애니메이션이 제대로 표시되지 않습니다 .

Elementor에서 스크롤할 때 애니메이션을 만들기 위해 장면에 이미지 추가

다른 장면을 만들려면 장면 0 탭 옆에 있는 더하기 아이콘을 클릭하면 됩니다.

고정 콘텐츠 및 애니메이션 추가

애니메이션 이미지 위에 표시되는 고정 콘텐츠를 추가하려면 콘텐츠 자체에 고정 콘텐츠 상자를 사용할 수 있습니다.

그런 다음 고정 콘텐츠 애니메이션 섹션을 사용하여 애니메이션 규칙을 설정할 수 있습니다. Scrollsequence 검토의 4단계에서 자세히 다루지만 기본 아이디어는 다음과 같습니다.

텍스트 탭을 사용하여 고정 콘텐츠 상자의 콘텐츠에 CSS 선택기를 추가합니다.
고정 콘텐츠 애니메이션 상자에서 해당 CSS 선택기를 대상으로 한 다음 해당 선택기 내에서 콘텐츠를 애니메이션하는 방법에 대한 타이밍을 선택하여 애니메이션 규칙을 설정합니다. 예를 들어, 이미지 30-55에 대한 특정 텍스트를 표시하고 싶다고 말할 수 있습니다.

다음은 콘텐츠에 CSS 선택기를 추가하는 예입니다.

애니메이션 규칙을 설정하는 방법은 다음과 같습니다.

고정 콘텐츠에 애니메이션을 적용하는 것 외에도 이미지 지속 시간을 조정할 수도 있습니다.

필요에 따라 기타 설정 구성

장면, 이미지 및 고정 콘텐츠를 설정하는 것은 애니메이션을 만드는 데 가장 중요한 부분입니다.

그러나 Scrollsequence는 이 인터페이스에서 탐색할 수 있는 몇 가지 다른 설정도 제공합니다.

예를 들어 장면 설정 영역 하단에서 이미지 배율과 정렬을 조정할 수 있습니다.

또한 사이드바의 스크롤 시퀀스 설정 영역에서 몇 가지 일반 설정을 얻을 수 있습니다. 이 위젯에서 이미지 너비와 스크롤 지연을 제어하고 원하는 경우 사용자 정의 CSS를 추가할 수 있습니다.

애니메이션 게시

작업을 마치려면 블로그 게시물을 게시하는 것처럼 게시 버튼을 클릭하여 애니메이션을 게시합니다.

게시하면 Scrollsequence → Scrollsequence 로 이동하여 이 애니메이션의 단축 코드를 찾을 수 있습니다.

Elementor에서 스크롤할 때 애니메이션을 추가하려면 1초 안에 필요하므로 이 단축 코드를 편리하게 보관하세요.

3. Elementor에 스크롤 애니메이션 추가

스크롤 애니메이션이 만족스러우면 Elementor 디자인에 추가할 준비가 된 것입니다.

스크롤 애니메이션 전용으로 별도의 Elementor 디자인을 만들 수 있습니다. 또는 더 큰 디자인의 일부로 스크롤 애니메이션을 포함할 수도 있습니다. 이 경우 스크롤 애니메이션 위와 아래의 콘텐츠는 정적으로 유지됩니다.

시작하려면 스크롤 애니메이션을 추가하려는 콘텐츠에 대해 Elementor 편집기를 시작합니다.

그런 다음 스크롤 애니메이션을 추가하는 방법은 다음과 같습니다.

스크롤 애니메이션을 표시할 Elementor의 Shortcode 위젯을 추가합니다.
애니메이션의 단축 코드를 붙여넣습니다(다시 Scrollsequence → Scrollsequence 로 이동하여 찾을 수 있음) .
Elementor가 편집기에서 애니메이션의 실시간 미리보기를 생성하도록 하려면 Shortcode 위젯의 설정에서 적용 버튼을 클릭하십시오.

Elementor 편집기를 종료하지 않고도 전체 애니메이션을 경험할 수 있습니다. 시각적 미리 보기에서 아래로 스크롤하기만 하면 됩니다!

그리고 그게 전부입니다. Apple이 수많은 랜딩 페이지에서 하는 것처럼 Elementor에서 시네마틱 스크롤 애니메이션을 설정하는 방법을 배웠습니다.

추가 애니메이션을 만들거나 애니메이션에 새 장면을 추가하려면 위의 단계를 반복하기만 하면 됩니다.

오늘 Scroll Animation에서 첫 번째 Elementor를 만드십시오.

사람들은 디자인을 생성할 때 유연성을 제공하기 때문에 Elementor를 좋아합니다.

그러나 Elementor 가 자체적 으로 할 수 없는 한 가지는 Apple 및 기타 업체에서 볼 수 있는 스크롤 애니메이션의 시네마틱 유형을 설정하는 것입니다.

Elementor를 Scrollsequence와 페어링하면 이러한 유형의 애니메이션을 Elementor 디자인에 쉽게 추가할 수 있습니다.

사용해 보고 싶다면 두 가지 옵션이 있습니다.

WordPress.org에서 무료 버전의 Scrollsequence를 사용하세요.
14일 무료 평가판을 사용하여 Scrollsequence의 모든 프리미엄 기능에 액세스하십시오.

Scrollsequence의 프리미엄 버전을 사용하기로 결정한 경우 독점적인 Scrollsequence 쿠폰을 사용하여 주문 시 20%를 절약할 수 있습니다.

20 % 할인

스크롤 시퀀스

WPMAYOR20 쿠폰으로 Scrollsequence에서 독점 20% 할인을 받으십시오. 몇 분 안에 스크롤 애니메이션을 만드십시오.

WPMAYOR20 쿠폰으로 Scrollsequence에서 독점 20% 할인을 받으십시오. 몇 분 안에 스크롤 애니메이션을 만드십시오. 적게 표시

Elementor에서 스크롤에 애니메이션을 추가하는 방법에 대해 여전히 질문이 있습니까? 의견 섹션에서 우리에게 소리를 지르고 무슨 생각을 하는지 알려주십시오.

Elementor에서 스크롤 시 애니메이션을 추가하는 방법(예: Apple AirPods)

Scrollsequence를 사용하여 Elementor에서 시네마틱 스크롤 애니메이션을 만드는 방법

1. Scrollsequence 플러그인 설치

20i 워드프레스 호스팅

세부

아스트라

세부

아스트라 생일 세일

세부

오토나미

세부

아바다

세부

헛간2

세부

비버 빌더

세부

블루호스트

세부

Bluehost가 있는 무료 도메인

세부

회보

세부

엘리멘터 프로

세부

엔진테마

세부

필수 플러그인

세부

프론토 올인원

세부

그라운드호그

세부

그로우나이저

세부

인간의 존재

세부

아이코닉WP

세부

아이코닉WP

세부

KBucket

세부

언어

세부

액체 웹

세부

액체 웹

세부

확대 비디오 위젯

세부

Elementor용 마스터 애드온

세부

뉴스레터 글루

세부

알림 X

세부

오션WP

세부

주문 가능

세부

아웃퍼널

세부

결제 페이지

세부

핍소

세부

퀵

세부

스크롤 시퀀스

세부

ShopReady

세부

스포트라이트 프로

세부

스텔라 세일

세부

스텔라 세일

세부

트리페토 프로