엘리멘터를 이용하여 스크롤링 이미지 만들기
여러 플러그인과 엘리멘터에는 이미지 캐러셀, 루프 캐러셀 등 다양한 슬라이드 기능을 제공합니다. 하지만 플러그인이나 위젯을 사용하면 기능 활용에 제약이 있을 수 있습니다.
이 글에서는 플러그인 없이 간단한 코드만으로 무한 스크롤링 이미지를 구현하는 방법을 소개합니다.
코드
컨테이너의 구성은
부모 컨테이너 – (HTML , 자식 컨테이너)
자식 컨테이너 – (이미지, 이미지, 이미지)
부모 컨테이너의 CSS 클래스는 jr-scrolling-image 입니다. 커스텀 CSS에는 아래 코드를 입력해주세요.
selector{
--direction: 1;
--speed: 50;
--image-aspect-ratio: false;
--pause-on-hover: true;
--pause-on-hover-mobile: false;
}
selector{
visibility: hidden;
overflow: hidden;
}
selector.showing{
visibility: visible;
}
selector .e-con,
selector .e-container{
-webkit-animation: sliding calc(var(--est-speed,10) * 1s * 50 / var(--speed)) linear infinite;
-moz-animation: sliding calc(var(--est-speed,10) * 1s * 50 / var(--speed)) linear infinite;
-o-animation: sliding calc(var(--est-speed,10) * 1s * 50 / var(--speed)) linear infinite;
animation: sliding calc(var(--est-speed,10) * 1s * 50 / var(--speed)) linear infinite;
max-width: unset !important;
}
selector:hover .e-con,
selector:hover .e-container{
animation-play-state: var(--poh, running);
}
selector.e-con-boxed:hover .e-con,
selector.e-con-boxed:hover .e-container{
animation-play-state: running;
}
selector.e-con-boxed .e-con-inner:hover .e-con,
selector.e-con-boxed .e-con-inner:hover .e-container{
animation-play-state: var(--poh, running);
}
selector .e-con-inner{
overflow: hidden;
}
selector .e-con.image-aspect-ratio img,
selector .e-container.image-aspect-ratio img{
width: auto !important;
}
@keyframe sliding{w
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--total,2) )); }
}
@-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--total,2) )); }
}
@-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(var(--direction,1)*100%/var(--total,2) )); }
}
@-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--total,2) )); }
}
@keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--total,2) )); }
}
다음으로 엘리멘터의 HTML 위젯에 아래 코드를 복사해서 붙여 넣습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery,
html = [],
prevWidth
/* Set aspect ratio option */
function setAspectRatio(el){
if(el.css('--image-aspect-ratio') && el.css('--image-aspect-ratio').trim() == 'true'){
el.addClass('image-aspect-ratio')
}else{
el.removeClass('image-aspect-ratio')
}
}
/* Get initial summation images width */
function getInitialWidth(el){
var width = 0,
space = parseFloat(el.css('gap'))
el.find('.elementor-widget').each(function(){
width += $(this).width() + space
})
return width
}
/* Set new container width and other values */
function setValues(el, width, indexI, indexJ){
var ratio = Math.ceil(el.parent().width()/width),
total = ratio+1
for( i = 0; i < ratio; i++ ){
el.append(html[indexI][indexJ])
}
el.width(width*total)
el.css('--total', total)
el.css('--est-speed', width/100)
}
/* Set direction option */
function setDirection(el, width){
if(el.css('--direction') == -1){
el.css('margin-left', -1*width + 'px')
}
}
/* Set pause on hover option */
function setPauseOnHover(el){
var pauseOnHover = $(window).width() > 767 ? '--pause-on-hover' : '--pause-on-hover-mobile'
if(el.css(pauseOnHover) && el.css(pauseOnHover).trim() == 'true'){
el.css('--poh', 'paused')
}else{
el.css('--poh', 'running')
}
}
$(document).ready(function(){
prevWidth = $(window).width()
$('.jr-scrolling-image').each(function(indexI){
html[indexI] = []
$(this).find('.e-con, .e-container').each(function(indexJ){
setAspectRatio($(this))
var width = getInitialWidth($(this))
html[indexI].push($(this).html())
if(width){
setValues($(this), width, indexI, indexJ)
setDirection($(this), width)
}
setPauseOnHover($(this))
})
$(this).addClass('showing')
})
})
$(window).on('resize', function(){
if( $(window).width() == prevWidth ){
return
}
prevWidth = $(window).width()
$('.jr-scrolling-image').each(function(indexI){
$(this).find('.e-con, .e-container').each(function(indexJ){
$(this).empty()
$(this).append(html[indexI][indexJ])
var width = getInitialWidth($(this))
if(width){
setValues($(this), width, indexI, indexJ)
setDirection($(this), width)
}
setPauseOnHover($(this))
})
})
})
</script>
마지막으로 자식 컨테이너안에 원하는 이미지와 함께 아래 코드를 커스텀 CSS에 입력해주세요.
direction은 이미지가 이동하는 방향입니다. 반대 방향을 원하신다면 +1로 수정해서 사용하세요.
selector{
--direction: -1;
--speed: 50;
--image-aspect-ratio: false;
--pause-on-hover: true;
--pause-on-hover-mobile: false;
}
예시
