본문 바로가기
jQuery

jQuery(페이드 효과)_2024-07-30

by 앵보몬 2024. 7. 30.
728x90
반응형

페이드(fade) 효과

제이쿼리에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다.

이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.

1. .fadeIn()

2. .fadeout()

3. .fadeTo()

4. .fadeToggle()

 

페이드 인(fade in)과 페이드 아웃(fade out)

.fadeIn() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.

예제
$(function() {

    $("#fadeInBtn").on("click", function() {

        $("#divBox").fadeIn();  // id가 "divBox"인 요소를 점점 나타나게 함.

    });

    $("#fadeOutBtn").on("click", function() {

        $("#divBox").fadeOut(); // id가 "divBox"인 요소를 점점 사라지게 함.

    });

});

 

위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지의 레이아웃에서 완전히 사라지게 됩니다.

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 페이드 효과의 속도를 조절할 수도 있습니다.

예제
$(function() {

    $("#fadeInBtn").on("click", function() {

        $("#divBox").fadeIn("slow"); // id가 "divBox"인 요소를 느리게 점점 나타나게 함.

    });

    $("#fadeOutBtn").on("click", function() {

        $("#divBox").fadeOut(2000);  // id가 "divBox"인 요소를 2초에 걸쳐 점점 사라지게 함.

    });

});

 

페이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle() 메소드를 사용할 수 있습니다.

선택한 요소가 현재 사라진 상태라면 .fadeIn() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut() 메소드의 동작을 수행합니다.

예제
$(function() {

    $("#fadeToggleBtn").on("click", function() {

        // id가 "divBox"인 요소를 1초에 걸쳐 점점 나타나게 하거나 사라지게 함.

        $("#divBox").fadeToggle(1000);

    });

});

 

페이드 효과의 투명도 설정

.fadeTo() 메소드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있습니다.

예제
$(function() {

    $("#fadeBtn").on("click", function() {

        // id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.

        $("#divBox_01").fadeTo(2000, 0.2);

        // id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.

        $("#divBox_02").fadeTo(2000, 0.5);

        // id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.

        $("#divBox_03").fadeTo(2000, 0.8);

    });

});

 

페이드 효과와 관련된 메소드

.fadeIn() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함.
.fadeOut() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
.fadeTo() 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.
.fadeToggle() 선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함.

https://www.tcpschool.com/jquery/jq_effect_fade

 

images.zip
3.13MB
package.json
0.00MB
sandbox.config.json
0.00MB
test31.html
0.00MB
test32.html
0.00MB
test33.html
0.00MB
test34.html
0.00MB
test35.html
0.00MB

 

test31.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
      rel="stylesheet"
    />
    <style>
        body {
            width: 100%;
        }
        .bxslider img {
            width: 100%;
            height: auto;
        }

        .bxslider{
            max-width: 600px;
            margin: 0 auto;
        }

        .bx-wrapper{
            margin: 0 auto;
        }
    </style>
</head>
  <body>
    <div class="bxslider">
      <div>
        <img
          src="images/flower1.jpg"
          title="flower 1"
        />
      </div>
      <div>
        <img
          src="images/flower2.jpg"
          title="flower 2"
        />
      </div>
      <div>
        <img
          src="images/flower3.jpg"
          title="flower 3"
        />
      </div>
      <div>
        <img
          src="images/flower4.jpg"
          title="flower 4"
        />
      </div>
    </div>
    </div>

    <script>
      $(function () {
        $(".bxslider").bxSlider({
          mode: "fade", // horizontal 가로방향 vertical 새로방향
          captions: true,
          slideWidth: 600,
          auto: true, // 자동 실행 여부 (false) : 자동실행 안됨
          autoControls: true, // 자동 재생을 위한 컨트롤을 표시
          stopAutoOnClick: true, // 슬라이드를 클릭해도 자동 재생
          pager: true,
          speed : 50, // 숫자가 작을수록 속도가 빨라짐 1000초에 1초
          slideWidth: 600,
          controls : true // 좌우 화살표 controls : true
        });
      });
    </script>
  </body>
</html>

 

test32.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
      rel="stylesheet"
    />
    <style>
    .bx-wrapper .bx-pager {
    bottom: -95px;
    height: 80px;
  }

  .bxslider li img{
    width: 60%;
    height: 60%;
    object-fit: cover;
    margin: 0 auto;
  }

  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
    width: 100px;
    height: 20%;
  }

  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }

  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>

<ul class="bxslider">
  <li><img src="images/flower1.jpg" /></li>
  <li><img src="images/flower2.jpg" /></li>
  <li><img src="images/flower3.jpg" /></li>
  <li><img src="images/flower4.jpg" /></li>
</ul>
    </style>
</head>
<body>
    <script>
        $('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="flower1.jpg">';
      case 1:
        return '<img src="flower2.jpg">';
      case 2:
        return '<img src="flower3.jpg">';
      case 3:
        return '<img src="flower4.jpg">';
    }
  }
});
    </script>
</body>
</html>

 

test33.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
      rel="stylesheet"
    />
    <style>
        .bx-wrapper{
            margin: 0 auto;
        }
    </style>
    <ul class="bxslider">
        <li><img src="images/flower1.jpg" /></li>
        <li><img src="images/flower2.jpg" /></li>
        <li><img src="images/flower3.jpg" /></li>
        <li><img src="images/flower4.jpg" /></li>
        <li><img src="images/animal1.jpg" /></li>
        <li><img src="images/animal2.jpg" /></li>
        <li><img src="images/sea1.jpg" /></li>
        <li><img src="images/sea2.jpg" /></li>
      </ul>
  </head>
  <body>
    <script>
      $(".bxslider").bxSlider({
        minSlides: 3,
        maxSlides: 4,
        slideWidth: 170,
        slideMargin: 10,
      });
    </script>
  </body>
</html>

 

test34.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>swiper</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        vertical-align: top;
        width: 100%;
      }
      body {
        font-family: "돋움", sans-serif;
        font-size: 14px;
        color: #000;
      }
      header {
        height: 80px;
        background: #000;
        color: #fff;
        text-align: center;
        line-height: 80px;
      }
      .content {
        height: 330px;
        background: #ddd;
        text-align: center;
        line-height: 330px;
      }
      footer {
        height: 100px;
        border-top: 1px solid #ccc;
        text-align: center;
        line-height: 100px;
      }

      .bx-wrapper {
        margin: 0 auto;
      }

      .bx-pager.bx-default-pager{
        position: absolute;
        top: 80%;
      }
    </style>

    <script>
      $(function () {
        $(".bxslider").bxSlider({
          mode: "fade", // horizontal 가로방향 vertical 새로방향
          captions: true,
          slideWidth: 600,
          auto: true, // 자동 실행 여부 (false) : 자동실행 안됨
          autoControls: false, // 자동 재생을 위한 컨트롤을 표시
          stopAutoOnClick: true, // 슬라이드를 클릭해도 자동 재생
          pager: true,
          speed: 50, // 숫자가 작을수록 속도가 빨라짐 1000초에 1초
          slideWidth: 1200,
          controls: true, // 좌우 화살표 controls : true
        });
      });
    </script>
  </head>
  <body>
    <header>헤더</header>
    <div class="visual">
      <div class="bxslider">
        <div><img src="images/visual1.jpg" /></div>
        <div><img src="images/visual2.jpg" /></div>
        <div><img src="images/visual3.jpg" /></div>
        <div><img src="images/visual4.jpg" /></div>
      </div>
    </div>
    <section class="content">콘텐츠</section>
    <footer>푸터</footer>
  </body>
</html>

 

test35.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" navigation="true" space-between="30"
    centered-slides="true" autoplay-delay="2500" autoplay-disable-on-interaction="false">
    <swiper-slide><img src="images/그리스_산토리니.jpg"/></swiper-slide>
    <swiper-slide><img src="images/부탄.jpg"/></swiper-slide>
    <swiper-slide><img src="images/스페인_바르셀로나.jpg"/></swiper-slide>
    <swiper-slide><img src="images/아이슬란드.jpg"/></swiper-slide>
    <swiper-slide><img src="images/에콰도르_갈라파고스.jpg"/></swiper-slide>
    <swiper-slide><img src="images/이탈리아_베니스.jpg"/></swiper-slide>
    <swiper-slide><img src="images/태쿡_코카이섬.jpg"/></swiper-slide>
    <swiper-slide><img src="images/페루_마추픽추.jpg"/></swiper-slide>
    <div class="autoplay-progress" slot="container-end">
      <svg viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="20"></circle>
      </svg>
      <span></span>
    </div>
  </swiper-container>

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    const progressCircle = document.querySelector(".autoplay-progress svg");
    const progressContent = document.querySelector(".autoplay-progress span");

    const swiperEl = document.querySelector("swiper-container");
    swiperEl.addEventListener("autoplaytimeleft", (e) => {
      const [swiper, time, progress] = e.detail;
      progressCircle.style.setProperty("--progress", 1 - progress);
      progressContent.textContent = `${Math.ceil(time / 1000)}s`;
    });
  </script>
</body>

</html>

 

728x90
반응형

'jQuery' 카테고리의 다른 글

jQuery(jQuery.fx 객체)_2024-07-29  (0) 2024.07.30
jQuery(슬라이드 효과)_2024-07-25  (0) 2024.07.29
jQuery(jQuery 기본 및 DOM 조작 가이드)_2024-07-29  (0) 2024.07.29
jQuery(요소의 복사 및 삭제)_2024-07-25  (0) 2024.07.25
jQuery(getter 메소드와 setter 메소드)_2024-07-25  (0) 2024.07.25

관련글

티스토리툴바