나는 작업이 이미지 회전 목마를 내가 이 코드 하지만 이 코드에서는 내가 무엇을 원하는 삽입 9 유 어느 지역 이미지/이미지 url 의 대신 이 로직 https://picsum.photos/id/'+(i+32)+'/600/400/ 에 backgroundImage:(i)=>
하지만 교체하는 동안 위 https:// 링크와 함께 하 는 로컬 이미지/이미지 url 에 만 있는 단 하나의 유사한 이미지는 것을 보여주고 내가 알지 못하는 어떻게 추가할 수 있습니 뚜렷한 이미지를 반복하지 않는 회전 목마에
예를 들어의 이미지를 삽입하고 싶
image1- https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg
이미지 2- https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg
이미지 3- https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092__480.png
이미지 4- https://www.destructoid.com/wp-content/uploads/2021/09/Lost-in-Random-Shadowman-screenshot.jpg
이미지 5- https://static1.srcdn.com/wordpress/wp-content/uploads/2021/03/Among-Us-Random-Name-Generator.jpg
이미지 6- https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTL71W2u3jfYvvp2MXCfvVwHoyM-cioxCZkA&usqp=CAU
이미지 7- https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg
.png){kind=link}
이미지 9- https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB9VVgVQhCfCnD7udlz3tJnAR61x76JZ3Ftw&usqp=CAU
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>scrolling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<style type="text/css">
html, body, .stage, .ring, .img {
width:100%;
height: 100%;
transform-style: preserve-3d;
user-select:none;
}
html, body, .stage {
overflow:hidden;
background:#000;
}
div, svg {
position: absolute;
}
.container {
perspective: 2000px;
width: 1000px;
height: 500px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
<body>
<!-- partial:index.partial.html -->
<div class="stage">
<div class="container">
<div class="ring">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<script>
let xPos = 0;
gsap.timeline()
.set('.ring', { rotationY:180, cursor:'grab' }) //set initial rotationY so the parallax jump happens off screen
.set('.img', { // apply transform rotations to each image
rotateY: (i)=> i*-36,
transformOrigin: '50% 50% 1600px',
z: -1600,
backgroundImage:(i)=>'url(https://picsum.photos/id/'+(i+32)+'/600/400/)',
backgroundPosition:(i)=>getBgPos(i),
backfaceVisibility:'hidden'
})
.from('.img', {
duration:1.5,
y:200,
opacity:0,
stagger:0.1,
ease:'expo'
})
.add(()=>{
$('.img').on('mouseenter', (e)=>{
let current = e.currentTarget;
gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'})
})
$('.img').on('mouseleave', (e)=>{
gsap.to('.img', {opacity:1, ease:'power2.inOut'})
})
}, '-=0.5')
$(window).on('mousedown touchstart', dragStart);
$(window).on('mouseup touchend', dragEnd);
function dragStart(e){
if (e.touches) e.clientX = e.touches[0].clientX;
xPos = Math.round(e.clientX);
gsap.set('.ring', {cursor:'grabbing'})
$(window).on('mousemove touchmove', drag);
}
function drag(e){
if (e.touches) e.clientX = e.touches[0].clientX;
gsap.to('.ring', {
rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ),
onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
});
xPos = Math.round(e.clientX);
}
function dragEnd(e){
$(window).off('mousemove touchmove', drag);
gsap.set('.ring', {cursor:'grab'});
}
function getBgPos(i){ //returns the background-position string to create parallax movement in each image
return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*36)/360*500 )+'px 0px';
}
</script>
</body>
</html>