0711 목 uiux 70일차
circleProgress ( https://codepen.io/YoungHeom/pen/OJePwXx )
버튼 호버 효과, 라인색 변경 ( https://codepen.io/YoungHeom/pen/LYKEBeZ )
탭메뉴와 스와이퍼 조합 1부 ( https://codepen.io/YoungHeom/pen/OJePwKo )
탭메뉴와 스와이퍼 조합 2부 ( https://codepen.io/YoungHeom/pen/poXvZMM )
탭메뉴와 스와이퍼 조합 3부 ( https://codepen.io/YoungHeom/pen/JjQoabJ )
검색창 만들기 ( https://codepen.io/YoungHeom/pen/ExBxdNO )
테두리 흐려보이게 하깅( https://codepen.io/YoungHeom/pen/poXvZdG )
phone_web 푸터 만들기 ( 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_0710</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<style>
.container {
width: 100%;
height: 100%;
}
.section {
width: 100%;
height: 100vh;
margin: 0 10px;
}
.section:nth-child(2n){
background-color: #dfdfdf;
}
.section:nth-child(2n+1){
background-color: #dfefef;
}
.menu {
position: fixed;
top: 5%;
right: 10%;
gap: 5%;
display: flex;
font-size: 20px;
text-align: center;
align-content: center;
}
.menu > .s {
width: 40px;
height: 50px;
cursor: pointer;
background-color: #8dd;
line-height: 50px;
border-radius: 6px;
}
</style>
<body>
<div class="container">
<div class="section">s1</div>
<div class="section">s2</div>
<div class="section">s3</div>
<div class="section">s4</div>
</div>
<div class="menu">
<div class="s">1</div>
<div class="s">2</div>
<div class="s">3</div>
<div class="s">4</div>
</div>
<script>
$(function(){
$(".s").click(
function(){
// contsole.log($(this).index);
let i = $(this).index();
let st = $(".section").eq(i).offset().top;
$("html").stop().animate({scrollTop:st}, 1000);
}
);
});
</script>
</body>
</html>
ㄴ |
|
<script>
$(function(){
$(".s").click(
function(){
// contsole.log($(this).index);
let i = $(this).index();
let st = $(".section").eq(i).offset().top;
$("html").stop().animate({scrollTop:st}, 1000);
}
);
$(window).scroll(
function(){
console.log($(window).scrollTop);
}
);
});
</script>
ㄴ |
|
<script>
$(function(){
$(".menu > .s").click(
function(){
// contsole.log($(this).index);
let i = $(this).index();
let st = $(".section").eq(i).offset().top;
$("html").stop().animate({scrollTop:st}, 1000);
$(".section").eq(i).fadeOut(1000).fadeIn(1000);
}
);
// $(window).scroll(
// function(){
// console.log($(window).scrollTop);
// }
// );
});
</script>
. |
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0715 월 uiux 72일차 (0) | 2024.07.15 |
|---|---|
| 0712 금 uiux 71일차 (0) | 2024.07.12 |
| 0710 수 uiux 69일차 (0) | 2024.07.10 |
| 0709 화 uiux 68일차 (0) | 2024.07.09 |
| 0708 월 uiux 67일차 (0) | 2024.07.08 |