0627 목 uiux 60일차
animate({ }, ): (애니메이션, n초 동안)
|
<!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>
.con {
width: 200px;
height: 200px;
}
.imgbox {
display: flex;
}
</style>
</head>
<body>
<div class="con">
<div class="imgbox">
<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/437/200/300" alt="">
</div>
</div>
</div>
<script>
let i = 0;
setInterval(function(){
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()},600);
});
</script>
</body>
</html>
ㄴ |
|
<!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>
.con {
width: 200px;
height: 300px;
overflow: hidden;
}
.imgbox {
display: flex;
}
</style>
</head>
<body>
<div class="con">
<div class="imgbox">
<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/437/200/300" alt="">
</div>
</div>
</div>
<script>
let i = 0; //append=추가해줘.
$(".imgbox").append($(".img").first().clone(true));
setInterval(function(){
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
if(i==$(".img").length-1){
i=0;
}
}, 2000);
</script>
</body>
</html>
ㄴ |
|
<script>
let i = 0; //append=추가해줘.
$(".imgbox").append($(".img").first().clone(true));
setInterval(function(){
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
if(i===$(".img").length-1){
setTimeout(function(){
$(".imgbox").animate({ marginLeft: 0 },0);
i = 0;
}, 700);
}
}, 2000);
</script>
가로로 넘어가는 이미지(슬릭슬라이더 같은 역할) |
|
<!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>
.con {
width: 200px;
height: 300px;
/* overflow: hidden; */
}
.imgbox {
display: flex;
flex-direction: column;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="con">
<div class="imgbox">
<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/437/200/300" alt="">
</div>
</div>
</div>
<script>
let i = 0; //append=추가해줘.
$(".imgbox").append($(".img").first().clone(true));
setInterval(function(){
i++;
$(".imgbox").animate({marginTop:-$(".img").height()*i},600);
if(i===$(".img").length-1){
setTimeout(function(){
$(".imgbox").animate({ marginTop: 0 },0);
i = 0;
}, 700);
}
}, 2000);
</script>
</body>
</html>
세로로 넘어가는 이미지 |
|
<script>
let i = 0; //append=추가해줘.
$(".imgbox").append($(".img").first().clone(true));
setInterval(function(){
i++;
$(".imgbox").animate({marginRight:-$(".img").width()*i},600);
if(i===$(".img").length-1){
setTimeout(function(){
$(".imgbox").animate({ marginRight: 0 },0);
i = 0;
}, 700);
}
}, 2000);
</script>
이건 왜 안될까? 오른쪽으로 넘어가는 이미지 |
.
웹(혜지쌤)
특정 구간에서 스크롤시, 횡으로 이동하는 효과 1부 ( https://codepen.io/YoungHeom/pen/rNgbJjM )
특정 구간에서 스크롤시, 횡으로 이동하는 효과 2부 ( https://codepen.io/YoungHeom/pen/LYovQOQ )
특정 구간에서 스크롤시, 횡으로 이동하는 효과 3부 ( https://codepen.io/YoungHeom/pen/qBGwxMo )
( id 501번이 200*300px에서 예쁘긴 한데 사진 크기 커지면 사람나와서 ㅂㄹ )
( https://picsum.photos/id/435/1440/810 이게 더 간zl남)
background-attachment: fixed;
/* background-image에만 적용됨 */
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0701 월 uiux 62일차 (1) | 2024.07.01 |
|---|---|
| 0628 금 uiux 61일차 (0) | 2024.06.28 |
| 0626 수 uiux 59일차 (0) | 2024.06.26 |
| 0625 화 uiux 58일차 (0) | 2024.06.25 |
| 0624 월 uiux 57일차 (0) | 2024.06.20 |