인공지능(Copilot)을 이용한 풀페이지(fullpage) 코드 생성
2024. 7. 11. 18:16ㆍ개발/웹 관련
반응형
홈페이지를 방문하다 보면 마우스 휠로 화면을 내리거나 올릴 때 한 섹션씩 이동하는 효과를 가끔 볼 수 있습니다.
이를 풀페이지 효과라고 부르는데, 보통 fullPage.js를 이용해 제작하는데 이번에 Copilot에 해당 코드를 작성하게끔 해봤습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0; padding:0;
.section {position:relative; min-height:100vh; display:flex; justify-content:center; align-items:center; text-align:center;}
#section1 { background-color: #ff7f50; }
#section2 { background-color: #4caf50; }
#section3 { background-color: #f44336; }
#section4 { height:100px; min-height:10vh; background-color: #336979; }
</style>
</head>
<body>
<div id="section1" class="section">
<div style="position:absolute; top:20px; left:50%; transform:translate(-50%, 0); width:1280px; height:80px; border:1px solid #fff">Header</div>
Section 1
</div>
<div id="section2" class="section">Section 2</div>
<div id="section3" class="section">Section 3</div>
<div id="section4" class="section">Footer</div>
<script>
let sections = Array.from(document.querySelectorAll('.section'));
let currentSectionIndex = 0;
window.addEventListener('wheel', (e) => {
if (e.deltaY > 0) {
// Scroll down
currentSectionIndex = Math.min(currentSectionIndex + 1, sections.length - 1);
} else {
// Scroll up
currentSectionIndex = Math.max(currentSectionIndex - 1, 0);
}
sections[currentSectionIndex].scrollIntoView({ behavior: 'smooth' });
});
</script>
</body>
</html>나온 코드에 Header와 Footer부분만 추가했습니다.
예전에 fullPage.js 사용 안 하고 코드 작성했을 때는 엄청 길었던 것 같은데 몇 줄 안 되는 자바스크립트 코드로 가능하네요.
스크롤링 효과는 잘 되는데 가끔 Section1에서 3으로 이동하는 경우가 생기네요.
Copilot에서도 마지막 부연 설명에 더 많은 기능을 사용하려면 fullPage.js와 같은 라이브러리를 사용하라고 하네요.
fullPage 3 버전부터는 유료이기 때문에 2.9 버전을 사용하면 풀페이지 효과를 적용할 수 있고, 그게 아니라 간단한 풀페이지를 원하면 이렇게 간략한 코드로 작업하면 될 것 같습니다.
오늘도 방문해 주셔서 감사드립니다.
반응형
'개발 > 웹 관련' 카테고리의 다른 글
| 인공지능으로 지뢰 찾기 게임 코딩하기 - AskUp ChatGPT (34) | 2024.07.17 |
|---|---|
| 인공지능으로 테트리스 게임 코딩하기 - Copilot GPT (35) | 2024.07.16 |
| php 금액을 한글로 변환 - 인공지능 이용 (55) | 2024.07.02 |
| 구글맵 api 연동 MapOptions 인터페이스 (42) | 2024.06.07 |
| 웹사이트 css flex를 활용한 레이아웃 (79) | 2024.05.21 |