📅 2024-02-29, 56일차
TODO
- 메인 이미지에서 로고삭제하고 로고는 텍스트로 넣어서 로고도 동적으로 구현(제발 구현 좀 해 나자신아) o
- 헤더수정
- 동적으로 제발 구현 좀 해줘 나자신아 △
- 날씨위젯 o
- 메인- 추천카페 섹션 o
- 회원가입 페이지 x
- 게시글 목록페이지 x
- 작성페이지 x
나의 요구사항:
- 메인페이지의 배경이미지가 스크롤을 내릴때 점점 커지는 것을 구현하고 싶다!
window.addEventListener('scroll', function() {})은 함수는 스크롤 이벤트를 감지하는 JavaScript 코드. 페이지를 스크롤할 때마다 실행된다!
<script>
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', function() {
// 스크롤된 양 계산
var scroll = window.scrollY;
// 배경 이미지 요소 선택
var backgroundImage = document.querySelector('.background-image');
// 배경 이미지 크기를 동적으로 조절
backgroundImage.style.backgroundSize = 100 + scroll / 5 + '%';
});
</script>
나의 요구사항:
- 메인페이지 한 가운데에 보이는 로고와 텍스트가 페이지 접속시 스르륵 나타나는 기능을 구현하고 싶다!
<script>
// 요소들이 화면에 나타나는 시점을 계산하는 함수
function appearOnScroll() {
var vector = document.querySelector('.Vector');
var crma = document.querySelector('.CrMa');
var coffeeMoments = document.querySelector('.ForTheBestCoffeeMoments');
var cafeFinder = document.querySelector('.MyCafeFinder');
var vectorDelay = vector.getBoundingClientRect().top - window.innerHeight;
var crmaDelay = crma.getBoundingClientRect().top - window.innerHeight;
var coffeeMomentsDelay = coffeeMoments.getBoundingClientRect().top - window.innerHeight;
var cafeFinderDelay = cafeFinder.getBoundingClientRect().top - window.innerHeight;
// 투명도를 0에서 1로 변경하여 나타나게 함
if (vectorDelay < 0) setTimeout(() => vector.style.opacity = 0.9, 150); // 0.15초 지연
if (crmaDelay < 0) setTimeout(() => crma.style.opacity = 0.9, 100); // 0.15초 지연
if (coffeeMomentsDelay < 0) setTimeout(() => coffeeMoments.style.opacity = 0.9, 150); // 0.15초 지연
if (cafeFinderDelay < 0) setTimeout(() => cafeFinder.style.opacity = 0.9, 150); // 0.15초 지연
}
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', appearOnScroll);
// 초기에 한 번 호출하여 초기 화면에서도 적용되게 함
appearOnScroll();
나의 요구사항:
- 헤더바를 메인페이지에 처음 접속 했을 때는 나타나지 않게 하고
일정 양 만큼 스크롤을 내리면 헤더가 스르륵 나타나게 하는 기능을 구현하고 싶다!
<style>
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background-color: transparent; /* 투명한 배경색 설정 */
opacity: 0; /* 처음에는 투명도를 0으로 설정하여 숨김 */
transition: opacity 0.5s ease; /* 투명도 변화에 애니메이션 적용 */
}
</style>
<script>
window.addEventListener('scroll', function() {
var scroll = window.scrollY;
var header = document.querySelector('header');
// 스크롤이 일정 양 이상 되면 헤더를 나타나게 함
if (scroll > 870) {
header.style.opacity = 1;
} else {
header.style.opacity = 0;
}
});
</script>문제상황
- 메인페이지에서 내가 목적대로 메뉴바(헤더)가 사라지고 스크롤을 일정 구간까지 내리면 메뉴바가 나타나는 기능이 되서 정말 좋았다!
- 그.런.데! 메인페이지 이외의 jsp에서도 같은 기능이 적용 된것
- 게시판에 들어가도 메뉴바가 사라져있고, 로그인 페이지에 들어가도 메뉴바가 사라져있는 것ㅋㅋㅋㅋㅋ
- 일정 구간까지 스크롤을 내리면 메뉴바 나타남...ㅋㅋㅋㅋ 아놔
그래서 아래 로직을 사용해봤다!
페이지가 완전히 로드되었을 때 DOMContentLoaded 이벤트가 실행되고
document.querySelector('header')를 사용하여 문서 내에서 첫 번째 header 요소를 선택한다. 선택한 header 요소의 opacity 스타일 속성을 1로 설정하여 헤더를 표시한다.
쉽게 말해 페이지가 로드될 때 헤더를 표시해주는건데...
document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('header');
header.style.opacity = 1; // 페이지가 로드될 때 헤더를 표시
// 필요한 경우 추가적인 초기화 작업 수행
});문제상황
- 나의 목적대로 이제 다른 jsp 페이지로 접속하면 헤더가 나타난다. 그런데, 역시 스크롤을 내리면 사라진다.. 접속하자마자 사라져있는 메뉴바를 잠시 나타나게 해준 것 뿐이었다.
멘 to the 붕
내가 원하는 동적인 메인 페이지 구현은 내 선에서는 안되는 것인가...? 🥲
일단 여기에 너무 매여있지 않기로했다, 다른 페이지도 퍼블리싱해야하기 때문에!
헤더를 두개 만들면 되지 않을까?
head.jspf와 같은 걸 두개 만들어서 하나는 메인페이지에 표시되게하고
사라졌다가 나타나게 구현하고,
다른 헤더는 다른 페이지들에 정적으로 표시되게 하면..?
되지 않을까..?
라는 생각이 들지만 일단 TODO에 적어놓고 다시 차근차근 구현해보도록 하자!
hello world