JavaScript를 사용한 페이드인 이미지

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript를 사용한 페이드인 이미지
Anika Tabassum Era 2023년10월12일
JavaScript JavaScript Image
  1. className 속성을 사용하여 이미지 페이드 인
  2. requestAnimationFrame() 메서드를 사용하여 이미지 페이드 인
JavaScript를 사용한 페이드인 이미지

JavaScript가 없으면 이미지의 페이드 인 스타일을 CSS로 평가할 수 있습니다. 그러나 프로세스는 동적으로 처리할 수 없으므로 신뢰할 수 없습니다.

따라서 CSS와 setTimeout() 메서드에 완전히 의존하는 대신 requestAnimationFrame() 메서드를 사용하는 JavaScript 방식은 경로를 더 빠르고 신속하게 만듭니다. 예제 세그먼트에서 requestAnimationFrame() 메소드의 구현과 className 속성을 참조하여 이미지를 페이드 인할 수 있는 코드를 포함하는 코드 인스턴스를 볼 수 있습니다.

className 속성을 사용하여 이미지 페이드 인

실행 가능한 src가 있는 img 태그를 생성합니다. 이미지의 페이드 인을 시작하기 위해 클릭 가능한 이벤트가 있습니다. 여기서 주요 작업은 특정 CSS 블록을 참조하고 이를 img id 인스턴스와 정렬하는 className 속성을 사용하는 것입니다.

코드 - HTML 파일:

<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>

코드 - CSS 파일:

img {
            opacity: 0;
            filter: alpha(opacity=40);
    }
.animation {
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            opacity: 1;
        }

코드 - 자바스크립트 파일:

function myFunction() {
  document.getElementById('img').className = 'animation';
}

출력:

className 속성을 사용하여 이미지 페이드 인

requestAnimationFrame() 메서드를 사용하여 이미지 페이드 인

이와 관련하여 img 태그의 인스턴스를 사용하는 fadeIn 함수가 있습니다. 나중에 fadeIn 함수는 requestAnimationFrame() 및 setTimeout()에서 작동하고 현재 브라우저 세부 정보를 기반으로 시간 프레임을 찾습니다.

코드 - HTML 파일:

<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>

코드 - CSS 파일:

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

코드 - 자바스크립트 파일:

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity < 1) {
      var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
          setTimeout(tick, 16)
    }
  };
  tick();
}

function myFunction() {
  var el = document.getElementById('what');
  console.log(el);
  fadeIn(el);
}

출력:

requestAnimationFrame() 메서드를 사용하여 이미지 페이드 인

작가: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

관련 문장 - JavaScript Image