qhqowls0403

이미지 전환 후 잔상 효과

<p>답변 해주셔서 감사합니다!</p><p>** 먼저 HTML 입니다.</p><pre class="hljs"><code><!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Window</title>
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
  <script src="script/transition.js" defer></script>
  <link rel="stylesheet" href="css/transition.css">
</head>
<body>
  <div class="container">
    <div class="open-navi">
      <i class="xi-arrow-right"></i>
    </div>
    <div class="close-navi">
      <i class="xi-arrow-left"></i>
    </div>
    <div class="front">
      <img src="img/temp-image-01.jpg" alt="">
    </div>
    <div class="back">
      <img src="img/temp-image-02.jpg" alt="">
    </div>
  </div>
</body>
</html></code></pre><p>** CSS 입니다.</p><pre class="hljs"><code>@charset "utf-8";

@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.front {
  z-index: 1;
}
.front img,
.back img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
.open-navi,
.close-navi {
  background-color: #000;
  color: #fff;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 1.5em;
  cursor: pointer;
  transition: 0.5s;
}
.open-navi {
  left: 0;
}
.open-navi.active {
  left: -40px;
}
.close-navi {
  right: -40px;
}
.close-navi.active {
  right: 0;
}</code></pre><p>** 스크립트 입니다.</p><pre class="hljs"><code>$('.open-navi').click(function(){
  $(this).addClass('active');
  $('.close-navi').addClass('active');
  $('.front').fadeOut();
  $('.back').fadeIn();
});
$('.close-navi').click(function(){
  $(this).removeClass('active');
  $('.open-navi').removeClass('active');
  $('.back').fadeOut();
  $('.front').fadeIn();
});</code></pre><p>** 완성 후 이미지 입니다.<img src="https://cdn.inflearn.com/public/files/posts/60edd13c-29e6-4ed9-9d70-5eeb60496014/initial.jpg" alt="image" title="image"><img src="https://cdn.inflearn.com/public/files/posts/d76c766b-24cb-478c-bbbd-8ae7b36b7f91/open.jpg" alt="image" title="image">-> 이미지 안의 표시된 부분과 같이 잔상 효과가 남습니다!</p><p><img src="https://cdn.inflearn.com/public/files/posts/7594fc8d-dffc-4ed7-a1a4-acb63de7c7de/강의화면.jpg" alt="image" title="image">-> 강의 화면 입니다!</p><p>이 부분이 혹시 말씀하신 크로스페이드 되면서 생기는 현상일까요??</p><p>사진까지 첨부하느라 글이 길어진 점 죄송합니다!</p><p>감사합니다!</p>

qhqowls0403

Posts