728x90
반응형
JavaScript 단일 객체로 가져옴
this : 내 객체 하나만
jQuery $(this) => 하나라도 배열 객체로 가져옴
array => 인덱스, 요소, length
const $el = $(this);

 el.addClass("active");
 $(this).addClass("active");
 this.classList.add('active');
  
5
<!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://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
      p {
        width: 400px;
        height: 90px;
      }
      #oneDiv {
        margin-bottom: 30px;
      }
      #oneDiv div,
      #twoDiv div {
        position: absolute;
        width: 400px;
        height: 70px;
        font-size: 35px;
        text-align: center;
        color: yellow;
        background: #333;
        padding-top: 25px;
        display: none;
      }
      /* #ondDiv div {
        top: 46px;
        left: 8px;
      }
      #twoDiv div {
        top: 166px;
        left: 8px;
      } */
      #textAni {
        display: none;
      }
    </style>
    <script>
      $(function () {
        // fadeIn([duration][,easing][,complete])
        // -선택한 요소를 서서히 나타나게 하는 기능.
        // duration(시간): fast(대략:200)|slow(대략:600)|숫자값 입력(1/1000초)
        // 입력값이 없을 경우 기본값 400으로 설정됨
        // easing(모양-시간당 속도 함수값) : 'swing'(기본값)|'linear'
        // swing : 시작과 끝은 느리게, 중간은 빠른 속도로 default
        // linear : 일정한 속도로
        // complete : 실행할 함수
        $(".fadeIn").click(function () {
          $("#oneDiv div").fadeIn(2000, function () {
            $("#textAni").css({ backgroundColor: "#f00", color: "#fff" });
            $("#textAni").fadeIn(2000);
          });

          $("#twoDiv div").fadeIn(2000, "linear", function () {
            $("#textAni").css({ border: "3px solid #000" });
            $("#textAni").fadeIn(2000, "linear");
          });
        });

        $(".fadeOut").click(function () {
          $("#oneDiv div").fadeOut(2000, function () {
            $("#textAni").fadeOut(2000);
          });
        });

        $(".fadeToggle").click(function () {
          $("#oneDiv div").fadeToggle(2000, function () {
            if ($("#textAni").is(":hidden") == true) {
              $("#textAni").css({ backgroundColor: "#f00", color: "#fff" });
            }
            $("#twoDiv div").fadeToggle(2000, "linear", function () {
              if ($("#textAni").is(":hidden") == true) {
                $("#textAni").css({ border: "3px dotted #f00" });
              }
              $("#textAni").fadeToggle(2000, "linear");
            });
          });
        });

      });
    </script>
  </head>
  <body>
    <button class="fadeIn">fade In</button>
    <button class="fadeOut">fade Out</button>
    <button class="fadeToggle">fade Toggle</button>
    <div id="oneDiv">
      <p>
        불투명도 조절. speed는 fast, normal, slow 또는 0 이상의 숫자(밀리세컨드
        단위)를 설정할 수 있다. 애니메이션이 끝난 후에 실행할 함수를 지정할 수
        있다.
      </p>
      <div><span>S U C C E S S !</span></div>
    </div>
    <div id="twoDiv">
      <p>
        불투명도 조절. speed는 fast, normal, slow 또는 0 이상의 숫자(밀리세컨드
        단위)를 설정할 수 있다. 애니메이션이 끝난 후에 실행할 함수를 지정할 수
        있다.
      </p>
      <div><span>S U C C E S S !</span></div>
    </div>
    <br /><br />
    <div id="textAni">
      <p>
        불투명도 조절. speed는 fast, normal, slow 또는 0 이상의 숫자(밀리세컨드
        단위)를 설정할 수 있다. 애니메이션이 끝난 후에 실행할 함수를 지정할 수
        있다.
      </p>
      <div><span>S U C C E S S !</span></div>
    </div>
  </body>
</html>​

 

 

f
<!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://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <style>
      #region {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        margin: auto;
        /* margin: auto; 좌우정렬 */
        border: 1px solid #333;
      }
      #images {
        width: 400px;
        height: 200px;
      }
      #images a img {
        width: 200px;
        height: 200px;
        border: 0;
        position: relative;
      }
      #direction {
        width: 350px;
        margin: auto;
      }
      .leftbtn {
        float: left;
      }
      .rightbtn {
        float: right;
      }

      #divPa {
        position: relative;
        height: 300px;
        border: 1px solid#000;
      }
      #divCh {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 50px;
        height: 50px;
        border: 1px solid#000;
      }
    </style>
    <script>
      $(function () {
        // animate({스타일속성}, 적용시간|가속도|콜백함수) : 다양한 동작효과를 적용할 수 있다.
        // 스타일속성명은 -를 제외하고, 카멜기법으로 표기
        $(".leftbtn").click(function (event) {
          $("#images").animate({ marginleft: -200 }, 1000);
        });
        $(".rightbtn").click(function (event) {
          $("#images").animate({ marginleft: -0 }, 1000);
        });

        $("#divCh").click(function () {
          $("#divCh")
            .animate({ "background-color": "red", top: 50, left: 400 }, 1000)
            .animate(
              { "background-color": "yellow", top: "150px", left: "400px" },
              1000
            )
            .animate(
              { "background-color": "blue", top: "150px", left: "50px" },
              1000
            )
            .animate(
              { "background-color": "green", top: "50px", left: "50px" },
              1000
            );
        });
      });
    </script>
  </head>
  <body>
    <div id="region">
      <div id="images">
        <a href="#"><img src="C:\hwork\img\cute_dog.jpg" /></a
        ><a href="#"><img src="C:\hwork\img\namu.png" /></a>
      </div>
    </div>
    <div id="direction">
      <button class="leftbtn">&lt;</button>
      <button class="rightbtn">&gt;</button>
    </div>
    <br /><br />
    <div id="divPa">
      <div id="divCh"></div>
    </div>
  </body>
</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://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
      .boxDiv {
        width: 100%;
        height: 100vh;
        background-color: rgb(20, 181, 193);
      }
      .scroll_wrap {
        background-color: yellow;
        overflow: hidden;
      }
      .scroll_on {
        padding: 50px 0;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        opacity: 0;
        transition: all 1s;
      }

      .scroll_on.active {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
      }

      .scroll_on.type_top {
        transform: translate(0, -50px);
      }
      .scroll_on.type_bottom {
        transform: translate(0, 50px);
      }
      .scroll_on.type_left {
        transform: translate(-50px, 0);
      }
      .scroll_on.type_right {
        transform: translate(50px, 0);
      }
    </style>
    <script>
      $(document).ready(function () {
        // 클래스가 "scroll_on"인 모든 요소를 선택합니다.
        const $counters = $(".scroll_on");

        // 노출 비율(%)과 애미네미션 반복 여부(true/false)를 설정합니다.
        const exposurePercentage = 100;
        // ex)스크롤 했을 때 $counters 컨텐츠가 화면에 100% 노출되면 숫자가 올라갑니다.
        const loop = true;
        // 애니메이션 반복 여부를 설정합니다. (true로 설정할 경우, 요소가 화면에서 사라질 때 다시 숨겨집니다.)

        // 윈도우의 스크롤 이벤트를 모니터합니다.
        $(window).on("scroll", function () {
          $counters.each(function () {
            const $el = $(this);

            // 요소의 위치 정보를 가져옵니다.
            //<div class="scroll_on">제자리에서 나타납니다.</div>
            const rect = $el[0].getBoundingClientRect();
            $el[0].setAttribute(
              "style",
              "border:1px solid #000; background-color:red;"
            );
            // 현재 브라우저 창의 높이
            const winHeight = window.innerHeight;
            // 요소의 높이
            const contentHeight = rect.height;
            // const contentHeight = rect.bottom - rect.top;

            // 요소가 화면에 특정 비율만큼 노출될 때 처리합니다.
            if (
              rect.top <= winHeight - contentHeight &&
              rect.bottom >= contentHeight
            ) {
                // el.addClass("active");
                // $(this).addClass("active");
              this.classList.add('active');
            }
            // 요소가 화면에서 완전히 사라졌을 때 처리합니다.
            if (loop && (rect.bottom <= 0 || rect.top >= window.innerHeight)) {
              $el.removeClass("active");
            }
          });
        }).scroll();
      });
    </script>
  </head>
  <body>
    <div class="boxDiv"></div>
    <div class="scroll_wrap">
        <div class="scroll_on">제자리에서 나타납니다.</div>
        <div class="scroll_on type_top">위에서 나타납니다.</div>
        <div class="scroll_on type_left">왼쪽에서 나타납니다.</div>
        <div class="scroll_on type_right">오른쪽에서 나타납니다.</div>
        <div class="scroll_on type_bottom">밑에서 나타납니다.</div>
    </div>
    <div class="boxDiv"></div>
  </body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

jqueryui  (0) 2024.03.11
jqueryui  (0) 2024.03.08
on  (0) 2024.03.07
search  (0) 2024.03.07
prop(), attr(), map방식  (0) 2024.03.06

+ Recent posts

티스토리툴바