0719 금 uiux 76일차
클릭할 때마다 배경색 변경, no 변수로 구분 ( https://codepen.io/YoungHeom/pen/ExBPBZR )
클릭할 때마다 배경색 변경, isRed 변수로 구분 ( https://codepen.io/YoungHeom/pen/NWZxZYp )
어떤 버튼을 눌러도 배경색이 바뀌게 하기 ( https://codepen.io/YoungHeom/pen/PorZrVG )
변경 ( https://codepen.io/YoungHeom/pen/eYwJqNb ) 온오프( https://codepen.io/YoungHeom/pen/Rwzrzza )
active(addClass)를 사용하는 방법이 더 좋다. js에서 css를 다루는 건 별로 좋지 않다. '클릭할 때마다~~ 구분' 이거 두개는 이런 방법도 있다 참고만 하기
두 이미지 교차 페이드 인/아웃 애니메이션 ( https://codepen.io/YoungHeom/pen/yLdezVY )
페이드 인/아웃 애니메이션 3장 ( https://codepen.io/YoungHeom/pen/abgdVbK )
phone_site 푸터 ( https://codepen.io/YoungHeom/pen/VwJYGWx )
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uiux_0719</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<style>
body {
height: 300vh;
position: relative;
}
.abc {
width: 300px;
height: 300px;
background-image: url("https://picsum.photos/id/101/300/300");
transition: all .2s;
position: fixed;
left: 0;
top: 0;
}
</style>
<body>
<div class="abc"></div>
<script>
$(function(){
$(Window).scroll(
function(){
let a = $(window).scrollTop;
let maxa = $(document).height()-$(window).height();
let halfa = maxa/2;
let ra;
if(a<=halfa){
ar = parseInt(a/halfa*150);
console.log(ra);
}
}
);
});
</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_0719</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<style>
body {
height: 300vh;
position: relative;
}
.abc {
width: 300px;
height: 300px;
background-image: url("https://picsum.photos/id/101/300/300");
transition: all .2s;
position: fixed;
left: 0;
top: 0;
}
</style>
<body>
<div class="abc"></div>
<script>
$(function(){
$(Window).scroll(
function(){
let a = $(window).scrollTop;
let maxa = $(document).height()-$(window).height();
let halfa = maxa/2;
let ra;
if(a<=halfa){
ar = parseInt(a/halfa*150);
$(".abc").css("border-radius",ra+"px");
$(".abc").css("transform", "rotate(0deg)")
$(".abc").css("left", "0px");
}
else {
ra = parseInt(a/halfa*360-360);
ww = $(window).width()-$(".abc").width();
lt = parseInt(a/halfa*ww-ww);
$(".abc").css("border-radius", 150 + "px");
$(".abc").css("transform", "rotate("+ra+"deg)");
$(".abc").css("left", lt+"px");
}
}
);
});
</script>
</body>
</html>
ㄴ |
|
<script>
$(function(){
$(Window).scroll(
function(){
let a = $(window).scrollTop();
let maxa = $(document).height()-$(window).height();
let halfa = maxa/2;
let ra;
if(a<=halfa){
ra = parseInt(a/halfa*150);
$(".abc").css("border-radius",ra+"px");
$(".abc").css("transform", "rotate(0deg)");
$(".abc").css("left", "0px");
}
else {
ra = parseInt(a/halfa*360-360);
ww = $(window).width()-$(".abc").width();
lt = parseInt(a/halfa*ww-ww);
$(".abc").css("border-radius", 150 + "px");
$(".abc").css("transform", "rotate("+ra+"deg)");
$(".abc").css("left", lt+"px");
}
}
);
});
</script>
s |
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0723 화 uiux 78일차 (1) | 2024.07.23 |
|---|---|
| 0722 월 uiux 77일차 (0) | 2024.07.22 |
| 0718 목 uiux 75일차 (0) | 2024.07.18 |
| 0717 수 uiux 74일차 (0) | 2024.07.17 |
| 0716 화 uiux 73일차 (2) | 2024.07.16 |