엘리멘터(Elementor)에서 몇 가지 방법으로 시차를 이용한 패럴렉스 스크롤(Parallax Scroll) 효과를 추가할 수 있습니다. 엘리멘터 프로를 사용하는 경우 Scrolling Effects를 사용하여 팰러렉스 효과를 적용할 수 있습니다. 전체 페이지 패럴렉스 스크롤을 원하는 경우에는 플러그인을 사용할 수 있습니다.
엘리멘터(Elementor)에 패럴렉스 스크롤(Parallax Scroll) 효과를 추가하는 방법
아바다, Divi 등 다목적 유료 테마에서는 Parallax(시차 효과) 기능을 제공합니다. 엘리멘터에서도 시차를 이용한 효과를 적용할 수 있습니다.
엘리멘터의 스크롤 효과 사용하기
다음 영상은 CodePen에 공개된 Parallax Scrolling 코드 중에서 선별하여 보여주고 있습니다. 첫 번째 예시는 Firewatch 런칭 사이트에 적용된 효과를 보여줍니다.
Elementor Pro를 사용하는 경우 스타일 탭의 Scrolling Effects 옵션을 이용하거나 고급 탭의 모션 효과에서 Scrolling Effects를 활성화하여 적절한 세팅을 통해 상기 영상과 비슷한 효과를 얻을 수 있습니다.
Parallax 효과를 위해 배경 이미지의 고정 여부를 고정(Fixed)으로 선택하여 테스트해보시기 바랍니다.
전체 페이지 패럴렉스 효과
다음은 전체 페이지 패럴렉스 스크롤 효과(Full Page Parallax Scroll Effect) 예시입니다. 이와 비슷한 효과를 적용한 사이트들을 많이 보았을 것입니다.
위와 같은 효과를 엘리멘터에 적용하려는 경우 플러그인을 사용하거나 직접 코드를 만들어서 추가할 수 있습니다.
무료 플러그인으로는 Granular Controls For Elementor라는 플러그인이 있었지만, 6년 이상 업데이트가 안 되면서 이제는 더 이상 작동하지 않는 것 같습니다. (작동하더라도 오랫동안 업데이트가 안 된 플러그인은 플러그인 충돌 문제나 보안 문제를 야기할 수 있으므로 사용하지 않는 것이 바람직합니다.)
몇 가지 유료 플러그인에서 시차 효과를 제공합니다. 200만 명 이상의 사용자들이 사용하는 Essential Addons for Elementor의 Pro 버전에서 Parallax 기능을 활성화하여 사용할 수 있습니다.
이 플러그인은 한글화가 되어 있지만, 번역에서 어색한 부분이 눈에 띄네요. 유료 버전을 사용하는 경우 필수 애드온 » 확장자(Extensions) 탭에서 시차(Parallax)를 활성화할 수 있습니다. 무료 버전을 사용하는 경우에는 프로 버전으로 업그레이드할 것을 안내하는 창이 표시됩니다. ("확장자"는 "확장 기능"으로 번역하는 것이 보다 올바른 표현 같습니다. "프리미엄 확장"에서 "복제기" 등 일부 익스텐션은 한국어 표현만으로는 정확히 어떤 기능을 하는지 의미가 곧바로 와 닿지 않네요.)
애드센스용 필수 플러그인의 유료 버전에 대한 자세한 내용은 플러그인 소개 페이지를 참고하시기 바랍니다.
자바스크립트 코드를 사용하여 패럴렉스 효과 구현하기
GitHub 저장소에 Sydney 테마에 시차 효과를 추가하는 jQuery 코드를 엘리멘터용으로 변환하여 올라와 있습니다.
코드가 오래되어 최신 엘리멘터 버전에서는 잘 작동하지 않는다고 하는 분들도 계시네요. 깃헙 저장소에 올라온 코드를 자바스크립트로 변환하고 최신 엘리멘터 버전을 고려하여 수정해보았습니다.
/* Code to add Parallax Scroll Effect in Elementor */
function add_parallax_script() {
?>
<script language="JavaScript" type="text/javascript">
;(function() {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var parallax = function() {
var testMobile = isMobile.any();
if (!testMobile) {
var parallaxElements = document.querySelectorAll('.parallax');
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset;
parallaxElements.forEach(function(element) {
var speed = element.getAttribute('data-speed') || 0.3;
element.style.backgroundPosition = "50% " + (scrollPosition * speed) + "px";
});
});
}
};
document.addEventListener('DOMContentLoaded', function() {
parallax();
});
})();
</script>
<?php
}
if (!is_admin()) {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
add_action('wp_head', 'add_parallax_script');
});
}위의 코드를 차일드 테마의 함수 파일에 추가하시기 바랍니다.
그리고 다음 CSS 코드를 디자인 » 사용자 정의하기 » 추가 CSS에 추가하세요.
.parallax {
transition: none !important;
}섹션의 고급 탭에서 CSS 클래스 부분에 parallax를 입력하도록 합니다.
그리고 스타일 탭의 배경 이미지 섹션에서 고정 여부를 고정(Fixed)으로 선택하여 잘 작동하는지 테스트해보시기 바랍니다. 상기 코드는 충분한 테스트를 거치지 않았습니다. 환경에 따라 잘 작동하지 않거나 원하는 대로 작동하지 않을 가능성도 있습니다.
댓글 남기기