스크롤매직
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
(스크롤매직 사용 CDN)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<style>
section {
width: 1200px;
height: 500px;
margin: 20px;
display: flex;
justify-content: left;
align-items: start;
position: relative;
border: 1px solid;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid;
position: relative;
font-size: .8rem;
display: flex;
justify-content: center;
align-items: center;
transition: 1.2s;
}
.move {
transform: translate(1100px, 400px) scale(1.5) rotate(360deg)
}
section:nth-child(3) {
display: flex;
justify-content: right;
align-items: start;
}
section:nth-child(3) .ball {}
.move2 {
transform: translate(-1100px, -400px) rotate(360deg);
}
</style>
</head>
<body>
<section></section>
<section class="scroll-section scroll-spy first">
<div class="ball">ball</div>
</section>
<section class="scroll-section scroll-spy second">
<div class="ball">ball</div>
</section>
<section></section>
<script>
const spyedEls = document.querySelectorAll('.scroll-spy')
const ball3El = document.querySelector('section:nth-child(3) .ball')
spyedEls.forEach(el => {
console.log(el)
const ballEl = el.querySelector('.ball')
if (el.classList.contains('first')) {
new ScrollMagic
.Scene({
triggerElement: el, //감시할 요소 선택
triggerHook: 0.5, //스크롤의 위치값(0-1)
})
.setClassToggle(ballEl, 'move')
.addTo(new ScrollMagic.Controller())
}
} else if (el.classList.contains('second')) {
{
new ScrollMagic
.Scene({
triggerElement: el, //감시할 요소 선택
triggerHook: 0.5, //스크롤의 위치값(0-1)
})
.setClassToggle(ballEl, 'move2')
.addTo(new ScrollMagic.Controller())
}
})
// const spyedEl = document.querySelector('.scroll-spy');
// const ballEl = document.querySelector('.ball')
// const scrollMagicObject = new ScrollMagic
// .Scene({
// triggerElement:spyedEl, //감시할 요소 선택
// triggerHook:.5, //스크롤의 위치값(0-1)
// })
// .setClassToggle(ballEl,'move')
// .addTo(new ScrollMagic.Controller())
</script>
</body>
</html>
오후에는 거의 다 다음주 월요일에 있을 시험을 대비해서 조별과제 만들기를 계속 진행했다.
'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 09월 10일 (6) | 2024.09.12 |
|---|---|
| 24년 09월 09일 (1) | 2024.09.10 |
| 24년 09월 05일 (1) | 2024.09.08 |
| 24년 09월 04일 (0) | 2024.09.05 |
| 24년 09월 03일 (0) | 2024.09.05 |