이미지 전환 후 잔상 효과
안녕하세요! 시즌 1강의부터 시즌 2 강의까지 유익하게 잘 듣고 있습니다! 다름이 아니라 강의를 듣고 강사님께서 작성해주시는대로 코드는 똑같이 작성했는데 이미지 전환 후 화면 아래에 잔상이 생깁니다. 이것저것 써보다가 혹시나 하여 강의 영상도 확인해보니 영상에서도 아랫쪽에 잔상이 남아있습니다. (24:23초 부분) 혹시 이유가 있거나 해결하는 방법이 있을까요?!
(코드는 영상과 똑같이 작성하였기에 첨부하지 않았습니다!)
감사합니다!
Answer 4
0
답변 해주셔서 감사합니다!
** 먼저 HTML 입니다.
<!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>** CSS 입니다.
@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;
}** 스크립트 입니다.
$('.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();
});** 완성 후 이미지 입니다.
-> 이미지 안의 표시된 부분과 같이 잔상 효과가 남습니다!
-> 강의 화면 입니다!
이 부분이 혹시 말씀하신 크로스페이드 되면서 생기는 현상일까요??
사진까지 첨부하느라 글이 길어진 점 죄송합니다!
감사합니다!
0
자세히 보니까 테두리에 미세하게 보이네요. 아마도 첫번째 이미지의 잔상이 보이는 것 같습니다.
왜 보이는지는 정확히는 모르겠습니다. 하지만 해결방법은 여러가지 있지만 간단하게 제이쿼리에 css 메서드를 추가해 주시면 됩니다.
0
영상을 다시 봤는데 특별한 문제되는 부분이 없는데요.
혹시 이미지가 크로스페이드 되는 부분을 말씀하시는건지요?
잔상이 남는다는 부분을 저는 발견을 못하겠는데요.
pointer-event:none;
1
60
1
실전 반응형 웹사이트 이미지 다운
1
59
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
44
2
목소리 좀 키워주세요.
1
119
2
PDF파일은 어디있나요?
1
170
2
실전 반응형 웹사이트
1
151
2
강의 내용 pdf가 제공되나요?
1
167
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
213
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
186
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
382
2
scss에 active 적용하는 방법
1
314
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1167
2
실전 넷플릭스 6 footer부분
1
261
2
.dark 적용 하는 법
1
206
1
JavaScript & jQuery - 검색창 확장하기(3)에서
1
299
2
포트폴리오 CSS Grid 반응형 레이아웃에서
1
284
1
폰트어썸 4.7 아이콘
2
466
1
넷플릭스 공식사이트 수업 header
1
225
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
547
2
loginForm input type=email, password 위치 css 오류
2
413
1
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
288
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
482
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
410
1
계속 로딩 - [제작노트 및 필수사항] 실전 반응형 웹사이트 - 넷플릭스 공식사이트
2
360
1