0625 화 uiux 58일차
@내가 내는 숙제~
구글에 라이브러리 검색 많이 하기(영어로) ex) 마우스 이펙트, 클릭 이펙트, 슬라이더, 스크롤 등등...
@충격 내일 능력단위평가
정보 구조도 - ( https://brunch.co.kr/@applehong/80 ), ( https://velog.io/@kangtsby/3 )
위처럼 이렇게 그리거나 또는 엑셀 형식
| fadeIn, fadeOut 시험범위임! |
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uiux</title>
<!-- <link rel="stylesheet" href="index2.css"> -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
main {
height: 1700px;
background: antiquewhite;
}
.button {
width: 200px;
height: 50px;
align-content: center;
text-align: center;
background-color: lightblue;
cursor: pointer;
}
.wrap{
position: relative;
}
.pop {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px; height: 400px;
background-color: salmon;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<main>
<div class="button">버튼<div>
</main>
<div class="pop">
공지<br>
공지<br>
공지<br>
공지<br>
<a href="#" class="close">닫기</a>
</div>
</div>
<script>
$(function(){
$(".button").click( // .버튼을 클릭했을때 실행한다.
function(){
$(".pop").show(); // 숨겨놓은 걸 보여준다.
}
);
})
$(function(){
$(".close").click(
function(){
$(".pop").hide();
}
);
})
</script>
</body>
</html>
ㄴㄴ |
|
<script>
$(function(){
$(".button").click( // .버튼을 클릭했을때 실행한다.
function(){
$(".pop").toggle(); // 숨겨놓은 걸 보여준다.
}
);
})
$(function(){
$(".close").click(
function(){
$(".pop").hide();
}
);
})
</script>
toggle 버튼을 클릭하면 보여주고 버튼을 클릭하면 숨김 $(".close").click, $(".pop").hide(); 닫기를 누르면 꺼짐 |
|
<script>
$(function () {
function pt(){
$(".pop").toggle();
}
$(".button").click(pt);
$(".close").click(pt);
})
</script>
이렇게 내가 만들어도 됨! |
|
<script>
$(function () {
function pt(){
$(".pop").toggle();
}
$(".button").click(pt);
$(".close").click(pt);
$(".wrap").click(pt);
})
</script>
.wrap을 클릭하면 닫힘 |
- 페이드아웃(fadeOut) 효과 과정
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uiux</title>
<!-- <link rel="stylesheet" href="index2.css"> -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.img_box {
position: relative;
}
.img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="img_box">
<div class="img">
<img src="https://picsum.photos/id/137/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/237/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/337/200/300" alt="">
</div>
</div>
<script>
let i = 0;
$(".img").hide().first().show()// 첫번째만 표시한다.;
</script>
</body>
</html>
. |
|
<script>
let i = 0;
$(".img").hide().first().show()// 첫번째만 표시한다.;
setInterval(function(){}, 3000);
</script>
3000= 3초 .eq n번째 |
|
<script>
let i = 0;
$(".img").hide().first().show() // 첫번째만 표시한다.;
setInterval(function(){
let ni = (i+1)%3; // %3인 이유 - 이미지가 세 개라서
$(".img").eq(i).fadeOut(1000);
$(".img").eq(ni).fadeIn(1000);
i = ni;
}, 3000);
</script>
ㄴ 페이드아웃 효과 $(".img").hide().first().show()// .img를 모두 선택 후 숨김, 그리고 첫번째만 표시한다.; |
|
<script>
let i = 0;
$(".img").hide().first().show()// 첫번째만 표시한다.;
setInterval(function(){
let ni = (i+1)%(".img").length;
$(".img").eq(i).fadeOut(1000);
$(".img").eq(ni).fadeIn(1000);
i = ni;
}, 3000);
</script>
let ni = (i+1)%(".img").length; .img의 개수만큼(숫자를 일일이 바꿀 필요가 없음) |
혜지쌤
aos 사용법( https://codepen.io/YoungHeom/pen/NWVzjmW )
백그라운드 컬러가 있고 z-index 순서 제일 위인 로딩중 제이쿼리로 없애는 방법 3 가지
| $('body').imagesLoaded(function(){ $('.loading').css('display', 'none'); AOS.init(); }); |
| // $('body').imagesLoaded(function(){ // $('.loading').hide(); // AOS.init(); // }); |
| $('body').imagesLoaded(function(){ $('.loading').remove(); AOS.init(); }); |
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0627 목 uiux 60일차 (0) | 2024.06.27 |
|---|---|
| 0626 수 uiux 59일차 (0) | 2024.06.26 |
| 0624 월 uiux 57일차 (0) | 2024.06.20 |
| 0621 금 uiux 56일차 (0) | 2024.06.20 |
| 0620 목 uiux 55일차 (0) | 2024.06.20 |