0710 수 uiux 69일차
https://picsum.photos/id/103/200/300
ㄴ 이 사진 좀 괜찮음
textarea 라는 태그가 있단걸 이제 앎. ( https://codepen.io/YoungHeom/pen/vYqEKyx ) gpt가 알려줌
탭메뉴에 따라 화면이 전체적으로 바뀌는 효과
작업 1, 파트 스위치 ( https://codepen.io/YoungHeom/pen/ExBaygx )
작업 2, 파트 스위치 ( https://codepen.io/YoungHeom/pen/WNqbxEa )
작업 3, 배경이미지 배치, 프리로딩 (https://codepen.io/YoungHeom/pen/GRbgqMO )
작업 4, 배경이미지 흐르도록( https://codepen.io/YoungHeom/pen/yLdyJqd )
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uiux_0710</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<style>
.con {
width: 200px;
height: 300px;
border: 1px solid #000;
}
.imgbox {
display: flex;
width: 800px;
}
.a {
width: 40px;
height: 50px;
background-color: indianred;
cursor: pointer;
}
.b {
width: 40px;
height: 50px;
margin-top: 20px;
background-color: PowderBlue;
cursor: pointer;
}
</style>
<body>
https://picsum.photos/id/103/200/300-->
<div class="con">
<div class="imgbox">
<div class="img">
<img src="https://picsum.photos/id/100/200/300" alt="">
</div>
<div class="img">
<img src=" https://picsum.photos/id/103/200/300 " alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/104/200/300" alt="">
</div>
</div>
</div>
<div class="a"></div>
<div class="b"></div>
<script>
let i = 1;
$(function () {
$(".a").click(function() {
console.log(-$(".img").width());
$(".imgbox").animate({ "margin-left": -$(".img").width() * i }, 300);
i++;
});
$(".b").click(function(){
i--;
$(".imgbox").animate(
{ "margin-left": -$(".img").width() * (i - 1) },
300
);
});
});
</script>
let i = 0; //append=추가해줘.
$(function(){
$(".a").click({
function(){
$(".imgbox").animate({ marginLeft:-$(.img)width() }, 300)
}
});
});
</script>
</body>
</html>
(독타입선언은 생략함) |
(. |
<div class="part part-1 active" onclick="Part__showPart(1);">파트 1</div>
ㄴ onclick : 얘(해당 태그)를 클릭했을 때
탭메뉴에 따라 화면이 전체적으로 바뀌는 효과
작업 1, 파트 스위치 ( https://codepen.io/YoungHeom/pen/ExBaygx )
작업 2, 파트 스위치 ( https://codepen.io/YoungHeom/pen/WNqbxEa )
작업 3, 배경이미지 배치, 프리로딩 (https://codepen.io/YoungHeom/pen/GRbgqMO )
작업 4, 배경이미지 흐르도록( https://codepen.io/YoungHeom/pen/yLdyJqd )
| /* 이미지 프리로드 함수 */ function preloading (imageArray) { let n = imageArray.length; for (let i = 0; i < n; i++) { let img = new Image(); img.src = imageArray[i]; } } /* 이미지 프리로드 */ preloading([ 'https://picsum.photos/id/103/1000/1500', 'https://picsum.photos/id/103/1000/1500', 'https://picsum.photos/id/435/1000/1500', 'https://picsum.photos/1000/1500' ]); /* ㄴ html 에 넣은 이미지을 적으면 됨*/ ]); |
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0712 금 uiux 71일차 (0) | 2024.07.12 |
|---|---|
| 0711 목 uiux 70일차 (0) | 2024.07.11 |
| 0709 화 uiux 68일차 (0) | 2024.07.09 |
| 0708 월 uiux 67일차 (0) | 2024.07.08 |
| 0705 금 uiux 66일차 (0) | 2024.07.05 |