230321 - classList ์‘์šฉ(modal popup), jQuery(animate)

๋ฐฑ์Šน์—ฐยท2023๋…„ 3์›” 22์ผ
1

๐Ÿšฉ classList ์‘์šฉ

์ด์ „, ๋‹ค์Œ ๋ฒ„ํŠผ์ด ์žˆ๋Š” modal ํŒ์—…์ฐฝ ๋งŒ๋“ค๊ธฐ


โœ’๏ธ ์ฝ”๋“œ์ž‘์„ฑ

์ž…๋ ฅ

css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: cornsilk; }
li { list-style: none; }
.wrap {
  max-width: 1080px;
  min-width: 700px;
  margin: 100px auto;
}
.list {}
.list li {
  float: left;
  width: 25%;
  height: 200px;
  padding: 6px;
}
.list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pop {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  display: none;
  justify-content: center;
  align-items: center;
}
.pop section {
  position: relative;
  padding: 50px;
  background: #fff;
}
.pop section .pop_img {
  max-height: 70vh;
}
.pop section .closeBtn {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: steelblue;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  text-align: center;
  line-height: 40px;
}
.pop p {
  text-align: center;
  margin-top: 20px;
}
.pop p button {
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
.pop.active { display: flex; }

html

<div class="wrap">
  <h2>Modal PopUp</h2>
  <ul class="list">
    <li><img src="../img/pic1.jpg" alt=""></li>
    <li><img src="../img/pic2.jpg" alt=""></li>
    <li><img src="../img/pic3.jpg" alt=""></li>
    <li><img src="../img/pic4.jpg" alt=""></li>
    <li><img src="../img/pic5.jpg" alt=""></li>
    <li><img src="../img/pic6.jpg" alt=""></li>
    <li><img src="../img/pic7.jpg" alt=""></li>
    <li><img src="../img/pic8.jpg" alt=""></li>
    <li><img src="../img/pic9.jpg" alt=""></li>
  </ul>
</div>

<div class="pop">
  <section>
    <img src="../img/pic1.jpg" alt="" class="pop_img">
    <a href="#" class="closeBtn">x</a>
    <p>
      <button class="prev">&lt; ์ด์ „</button>
      <button class="next">๋‹ค์Œ&gt;</button>
    </p>
  </section>
</div>

js

const elList = document.querySelectorAll(".list li img"); // ์ธ๋„ค์ผ ์ด๋ฏธ์ง€
const elPop = document.querySelector(".pop") // ํŒ์—…์ฐฝ
const elClose = document.querySelector(".closeBtn") // ๋‹ซ๊ธฐ ๋ฒ„ํŠผ(ํŒ์—… ์•ˆ)
const elPopImg = document.querySelector(".pop_img") // ํฐ ์ด๋ฏธ์ง€(ํŒ์—… ์•ˆ)
const elBtns = document.querySelector(".pop p") // ๋ฒ„ํŠผ๋“ค์˜ ๋ถ€๋ชจ p(ํŒ์—…)
let elTotalImg = elList.length;

let num = 0; // ์ด๋ฏธ์ง€ ์ˆœ์„œ๋ฅผ ๋‚˜ํƒ€๋‚ผ ๋ณ€์ˆ˜

// ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋ฅผ ๋ˆ„๋ฅด๋ฉด ํŒ์—…์ฐฝ ๋ฐœ์ƒ
elList.forEach(function(item, index){ // index : parameter๋กœ ๋ช‡ ๋ฒˆ์งธ ์„ ํƒํ–ˆ๋Š”์ง€ ์•Œ์•„์˜ฌ ์ˆ˜ ์žˆ์Œ
  item.onclick = function(){
    elPop.classList.add("active");
    elPopImg.src = item.src;
    num = index; // ๋ช‡ ๋ฒˆ์งธ ์•„์ดํ…œ์„ ๋ˆŒ๋ €๋Š”์ง€ ์•Œ์•„์™€์„œ ์ „์—ญ๋ณ€์ˆ˜ num์— ๋Œ€์ž…
  }
});

// ํŒ์—…์ฐฝ ๋‹ซ๊ธฐ
elClose.onclick = function(e){
  e.preventDefault();
  elPop.classList.remove("active");
};

// ์ด์ „, ๋‹ค์Œ ๋ฒ„ํŠผ
elBtns.onclick = function(e){
  if(e.target.classList.contains("prev")) { // e๊ฐ€ ๋ณด๋‚ด์ฃผ๋Š” ์ •๋ณด ์ค‘ classList๋งŒ
    if (num == 0) { // ๋ฌดํ•œ๋ฃจํ”„
      num = elTotalImg;
    }
    num = num - 1;
  } else {
    // if (elTotalImg - 1) {
    //   num = -1;
    // }
    // num++;
    if (num != (elTotalImg - 1)) { // num์ด 8์ด ์•„๋‹๋•Œ๋งŒ 1์ถ”๊ฐ€
      num++;
    } else {
      num = 0;
    }
  }
  console.log("ํ˜„์žฌ num : ", num);
  elPopImg.src = elList[num].src;
};

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด








๐Ÿšฉ jQuery

animate()

๐Ÿ“ ์„ค๋ช…

  • ์ œ์ด์ฟผ๋ฆฌ์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ


โœ’๏ธ ์‚ฌ์šฉ๋ฒ•

์ž…๋ ฅ

์˜ˆ์ œ1

css

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #d3d3d3;
}
h1 { font-weight: normal; }

.banner { background: #fff; }
.banner div {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 80px;
}
.banner span {
  font-size: 3em; /* 16px * 3 */
  line-height: 80px;
  font-weight: bold;
}
.banner img { 
  height: 60px;
}
.banner a {
  position: absolute;
  top: 30px;
  right: 0;
}

main { 
  display: table; /* ๋ถ€๋ชจ ์š”์†Œ */
  width: 100%;
  background: #818181; 
}
main > div { 
  display: table-cell; /* ์ž์‹ ์š”์†Œ */
  height: 600px; 
}
main > div > h1 {
  font-size: 1px;
  opacity: 0;
  color: #fff;
  text-align: center;
}


footer { padding: 30px 0; } 
footer div {
  max-width: 1000px;
  margin: auto;
  text-align: right;
}
footer small {
  color: #fff;
  font-size: 0.8em;
}

html

<div class="banner">
  <div>
    <img src="./img/logo.png" alt="">
    <span>JUST DO IT.</span>
    <a href="#">๋‹ซ๊ธฐ X</a>
  </div>
</div>

<main>
  <div>
    <h1>Practice jQuery</h1>
  </div>
</main>

<footer>
  <div><small>jQuery ์—ฐ์Šต ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค.</small></div>
</footer>

js

// $(document).ready(function () {});
$(function () {
  // $("main h1").css({ fontSize: 150, opacity: 1 }); // ์• ๋‹ˆ๋ฉ”์ด์…˜ ์—†์ด ํ•œ ๋ฒˆ์— ๋ณ€๊ฒฝ
  $("main h1").animate({ fontSize: 150, opacity: 1, color: "red", "font-size": 150 }, 2000, "linear"); // ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ์ ์šฉ
  /*
    A.animate({ key: value,... }, ์‹œ๊ฐ„, easing)
      - ์ƒ‰์ƒ ๊ด€๋ จ ์†์„ฑ์€ ์ ์šฉโŒ
      - css style ์†์„ฑ๋„ ์ ์šฉ๋จ(fontSize = "font-size")
      - easing : swing / linear
  */

  $(".banner a").click(function () {
    $(".banner").animate({ height: 0, opacity: 0 }, 500);
    // $(".banner").slideUp(500); // ์œ„์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘
  });
});

์˜ˆ์ œ2

css

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #d3d3d3;
}
h1 { font-weight: normal; }

.banner { background: #fff; }
.banner div {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 80px;
}
.banner span {
  font-size: 3em; /* 16px * 3 */
  line-height: 80px;
  font-weight: bold;
}
.banner img { 
  height: 60px;
}
.banner a {
  position: absolute;
  top: 30px;
  right: 0;
}

main { 
  display: table; /* ๋ถ€๋ชจ ์š”์†Œ */
  width: 100%;
  background: #818181; 
}
main > div { 
  display: table-cell; /* ์ž์‹ ์š”์†Œ */
  height: 600px; 
}

.b1, .b2 {
  width: 150px;
  height: 150px;
  margin: 50px;
}
.b1 { background: powderblue; }
.b2 { background: thistle; }


footer { padding: 30px 0; } 
footer div {
  max-width: 1000px;
  margin: auto;
  text-align: right;
}
footer small {
  color: #fff;
  font-size: 0.8em;
}

html

<div class="banner">
  <div>
    <img src="./img/logo.png" alt="">
    <span>JUST DO IT.</span>
    <a href="#">๋‹ซ๊ธฐ X</a>
  </div>
</div>

<main>
  <div>
    <div class="b1"></div>
    <div class="b2"></div>
  </div>
</main>

<footer>
  <div><small>jQuery ์—ฐ์Šต ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค.</small></div>
</footer>

js

// $(document).ready(function () {});
$(function () {
  $(".banner a").click(function () {
    $(".banner").animate({ height: 0, opacity: 0 }, 500);
    // $(".banner").slideUp(500); // ์œ„์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘
  });

  $(".b1").mouseover(function () {
    $(this).animate({ "margin-left": "1000px" }, 2000, "swing", function () {
      $(this).animate({ marginLeft: 50 }, 300);
    });
  });

  $(".b2")
    .mouseover(function () {
    $(this).animate({ marginLeft: "+=100px" }, 300, "swing");
  })
    .click(function () {
    $(this).animate({ marginLeft: "50px" }, 100, "swing");
  });
  // ๋ฉ”์†Œ๋“œ ์ฒด์ธ - ์„ ํƒ์ž๊ฐ€ ๊ฐ™์€ ๊ฒฝ์šฐ ๋งจ ์œ„ ํ•œ๋ฒˆ๋งŒ ์ ๊ณ  .์œผ๋กœ ์—ฐ๊ฒฐ
});

/*
    A.animate({ key: value,... }, ์‹œ๊ฐ„, easing, ์ฝœ๋ฐฑํ•จ์ˆ˜)
      - ์ƒ‰์ƒ ๊ด€๋ จ ์†์„ฑ์€ ์ ์šฉโŒ
      - css style ์†์„ฑ๋„ ์ ์šฉ๋จ(fontSize = "font-size")
      - easing : swing / linear
  */

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด

์˜ˆ์ œ1

์˜ˆ์ œ2
์œ„์น˜์ด๋™


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






profile
๊ณต๋ถ€ํ•˜๋Š” ๋ฒจ๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€