티스토리 뷰
fade (페이드)
▏fade in / fade out
$(function () {
let slides = $('.slideshow img'),
slideCount = slides.length,
currentIdx = 0;
slides.eq(currentIdx).fadeIn();
setInterval(()=>{
let nextIdx = (currentIdx + 1)%slideCount;
slides.eq(currentIdx).fadeOut();
slides.eq(nextIdx).fadeIn();
currentIdx = nextIdx
}, 4000);
});
sticky
< 상단에서의 거리 >
대상.offset().top;
< window 스크롤양 >
$(window).scrollTop();
< A요소 안의 모든 요소 선택 >
A.contents();
< contents의 크기반영 >
대상.width();
대상.height();
< padding까지의 크기 반영 >
대상.innerWidth();
대상.innerHeight();
< border까지의 크기 반영 >
대상.outerWidth();
대상.outerHeight();
< margin까지의 크기 반영 >
대상.outerWidth(true);$(function () {
let header = $('.page-header');
// 고정값이라서 밖에 작성
let headerOST = header.offset().top;
/*
윈도우에 스크롤이 생기면 할일
그 양이 header가 상단에서 떨어진 거리 이상이라면
header를 고정
아니라면
header 고정 풀기
*/
$(window).scroll(function(){
// 스크롤이 생길 때마다 바껴야 하는 변수는 안에다 작성
let sct = $(window).scrollTop();
if(sct >= headerOST){
header.addClass('sticky');
} else{
header.removeClass('sticky');
}
})
});▏요소 내용 생성
< A를 B의 기존 내용 뒤에 추가 >
A.appendTo(B)
< B를 A의 내용 뒤에 추가 >
A.append(B)
< A를 B의 기존 내용 앞에 추가 >
A.prependTo(B)
< B를 A의 기존 내용 앞에 추가 >
A.prepend(B)🙾 기존에 있으면 내용 뒤에 추가
<body>
<span>I have nothing more to say... </span>
<div id="foo">FOO! </div>
<script>$("span").appendTo("#foo"); </script>
</body>
▏요소 내용 추가
// JS
window.innerWidth
window.outerWidth
window.innerHeight
대상.offsetWidth
대상.offsetHeight
shrinking-nav-bar
▏changeLogo / attr
let $window = $(window),
header = $('#main-header'),
logo = $('#logo'),
defaultLogo = "images/logo.svg"
smallLogo = "images/logo-shrink.svg";
/*
윈도우에 스크롤이 생기면 할일
그 양이 0보다 크면
header에 클래스명 shrink 추가
아니면
header에 클래스명 shrink 제거
*/
$window.scroll(function(){
let sct = $(this).scrollTop();
if(sct > 0){
header.addClass('shrink');
// 로고의 경로를 작은 이미지로 변경
// logo.attr('src',smallLogo);
changeLogo(smallLogo);
} else {
header.removeClass('shrink');
// 로고의 경로를 큰 이미지로 변경
// logo.attr('src',defaultLogo);
changeLogo(defaultLogo);
}
});
/*
changeLogo
매개변수 newPath로 경로가 들어오면
현재로고는 사라지면 할일
현재 로고의 이미지 경로를 newPath 변경하고
현재 로고 스윽 나타난다.
*/
function changeLogo(newPath){
logo.fadeOut(400, function(){
logo.attr('src',newPath).fadeIn();
});
}
'jQuery' 카테고리의 다른 글
| jQuery? (0) | 2023.10.10 |
|---|---|
| Tab / light box / back to top (0) | 2023.10.10 |
| animation 한 번만 작동하게 하기 (0) | 2023.10.10 |
| each 함수 / aside menu (0) | 2023.10.10 |
| submenu(서브메뉴) / Loading animation bar (0) | 2023.10.10 |