이미지 업로드 미리보기 구현

HTML

<div class="image-container" id="imageBox">
     <img src="https://placehold.co/600x400?text=sample+image" id="previewImage">
</div>

<input type="file" id="imageInput" accept="image/*">

CSS

.image-container {
     width: 300px;
     height: 200px;
     border: 2px dashed #ccc;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     overflow: hidden;
     border-radius: 10px;
     transition: border 0.3s;
}

.image-container:hover {
     border-color: #888;
}

.image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

#imageInput {
     display: none;
}

JS

$(document).ready(function () {
     $("#imageBox").on("click", function () {
          $("#imageInput").click(); // 파일 선택 창 열기
     });

     $("#imageInput").on("change", function (event) {
          const file = event.target.files[0];
          if (file && file.type.startsWith("image/")) {
               const reader = new FileReader();
               reader.onload = function (e) {
                    $("#previewImage").attr("src", e.target.result); // 미리보기 변경
               };
               reader.readAsDataURL(file);
          }
     });
});

See the Pen Untitled by Juyeon (@Juyeon) on CodePen.

스크롤 up, down에 반응하는 헤더

HTML

<div id="fixedNav">header</div>
<div style="height:800px"></div>

CSS

#fixedNav {
     position: sticky;
     height: 50px;
     background: black;
     color: #fff;
     display: flex;
     align-items: center;
     top: 0;
     transition: all 0.3s ease;
}
#fixedNav.nav-up {
     top: -50px;
     transition: 0.2s;
}

JS

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#fixedNav').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);
function hasScrolled() {
    var st = $(this).scrollTop();
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#fixedNav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#fixedNav').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

See the Pen 스크롤시 반응하는 헤더 by Juyeon (@Juyeon) on CodePen.

팝업 외 영역 클릭시 닫기

HTML

<a href="javascript:;" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 공유하기 클릭</a>
<div class="share-pop">
     <div class="inner">팝업내용</div>
</div>

CSS

.share-pop {
     display: none;
     width: 200px;
     height: 200px;
     background: tomato;
}
.share-pop .inner {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     color: #fff;
}

JS

$(".share").click(function () {
     $(".share-pop").stop().fadeToggle(500);
     return false; //중요
});
//공유하기 팝업 외에 영역 클릭
$(document).click(function (e) {
     //문서 body를 클릭했을때
     if (e.target.className == "share-pop") {
          return false;
     } //내가 클릭한 요소(target)를 기준으로 상위요소에 .share-pop이 없으면 (갯수가 0이라면)
     $(".share-pop").stop().fadeOut(500);
});

See the Pen 다른영역 클릭시 팝업 닫기 by Juyeon (@Juyeon) on CodePen.

HTML

<div id="load">
     <span class="loader"></span>
</div>

CSS

#load {position: fixed;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 9999;display: flex;align-items:center;justify-content:center}
.loader {
     width: 48px;
     height: 48px;
     border: 5px dotted #fff;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     box-sizing: border-box;
     animation: rotation 2s linear infinite;
}

@keyframes rotation {
     0% {
          transform: rotate(0deg);
     }
     100% {
          transform: rotate(360deg);
     }
} 

JS

$(document).ready(function () {
     $("#load").fadeOut(500);
});

결과

See the Pen loader by Juyeon (@Juyeon) on CodePen.

aos-data-delay 순차적으로 실행하기

HTML

<div class="grid">
  <div class="grid-item" data-aos="fade-up">Item 1</div>
  <div class="grid-item" data-aos="fade-up">Item 2</div>
  <div class="grid-item" data-aos="fade-up">Item 3</div>
  <div class="grid-item" data-aos="fade-up">Item 4</div>
  <div class="grid-item" data-aos="fade-up">Item 5</div>
  <div class="grid-item" data-aos="fade-up">Item 6</div>
  <div class="grid-item" data-aos="fade-up">Item 7</div>
  <div class="grid-item" data-aos="fade-up">Item 8</div>
</div>

CSS

.grid {display: flex; flex-wrap: wrap; margin: 0 -5px; overflow: hidden;}
.grid-item {width: calc(25% - 10px);margin: 0 5px;margin-top: 10px; height: 200px;background: #f8f8f8}

JS

$(document).ready(function () {
  const $gridItems = $(".grid-item");
  let delay = 0; // 초기 delay 값
  const delayIncrement = 100; // delay 증가 값 (밀리초 단위)

  $gridItems.each(function () {
    $(this).attr("data-aos-delay", delay);
    delay += delayIncrement; // delay 값을 증가시킴
  });
});

결과보기

See the Pen aos-data-delay 순차적으로 by Juyeon (@Juyeon) on CodePen.