develope_kkyu

[HTML] 나만의 음원 차트 웹사이트 만들기 본문

FrontEnd

[HTML] 나만의 음원 차트 웹사이트 만들기

developekkyu37 2022. 12. 22. 15:09
728x90

이름 : Orange Charts

기능

  • 페이지 실행 시 fade in 애니메이션
  • 상단에 고정된 상단바
  • 버튼 클릭 시 영역 숨기기/보여주기
  • 차트가 아래에서 올라오는 애니메이션
  • 더보기 클릭 시 차트 10개 더 보여주기
  • 노래제목 클릭 시 유튜브 뮤직비디오 링크
  • 가수 클릭시 그 가수 페이지로 이동(페이지 미구현)

 

기능이 있는 헤드부분만

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrangeCharts</title>
    <script>
      window.addEventListener("load", function(){
        let today1 = document.getElementById('today1');
        let today2 = document.getElementById('today2');
        let button1 = document.getElementById('button1');
        let button2 = document.getElementById('button2');
        let showmore = document.getElementById('showmore');
        let showmorecharts = document.getElementById('showmorecharts');
        let button11 = document.getElementById('button11');
        let button22 = document.getElementById('button22');

        button1.onclick = function(){
          // 오늘의 음악추천 두번째 내용은 사라지고 첫번째 내용을 보여주는 버튼
          if(today1.style.display == "none") {
            today1.style.display = "block";
            today2.style.display = "none";
          }
        }
        button2.onclick = function(){
          // 오늘의 음악추천 첫번째 내용은 사라지고 두번째 내용을 보여주는 버튼
          if(today2.style.display == "none") {
            today2.style.display = "block";
            today1.style.display = "none"
          }
        }
        showmore.onclick = function(){
          // 더보기 버튼 클릭시 10개의 음악 차트를 더 보여주기
          if(showmorecharts.style.display == "none"){
            showmorecharts.style.display = "block";
          }
        }
      });
    </script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
header {
  /* 스크롤을 내려도 상단에 고정시키기 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0.5px 0.5px 10px;
  z-index: 1;
}
body{
  background-color: rgb(248, 229, 195);
}
.today{
  margin-top: 100px;
  margin-left: 0;
  margin-right: 0;
  background: #f27403;
  position: absolute;
  height: 70%;
  width: 100%;
}
.main{
  animation: fadein 1s;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}
.today{
  animation: fadein 1s;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}

#today1{
  animation: fadein 1s;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}
#today2{
  animation: fadein 1s;
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  -o-animation: fadein 1s;
}
/* fade-in 애니메이션 */
@-webkit-keyframes fadein { 
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
a{
  text-decoration-line: none;
  color: black;
}
/* 마우스를 위에 올렸을 때 밑줄이 생기는 기능 */
a:hover{
  text-decoration-line: underline;
}
/* 더보기를 마우스 위에 올렸을 때 더보기 버튼이 조금 더 커지는 기능 */
#showmore:hover{
  width: 132px;
  height: 43px;
}

/* 음악 차트가 아래에서 위로 올라오는 애니메이션 */
@keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    .charts {
        animation: fadeInUp 5s;
    }
    #showmorecharts{
        animation: fadeInUp 2s;
    }
    #li4{
      text-decoration-line: none;
      color: gray;
    }
    #li4:hover{
      text-decoration-line: underline;
    }
    </style>
</head>

실행 화면

 

 

728x90

'FrontEnd' 카테고리의 다른 글

[HTML] 카페 주문 관리 페이지 만들기  (0) 2022.12.23
'FrontEnd' Related Articles more