Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱) 본문

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)

끈기JK 2023. 2. 6. 20:39

 

 

 

page1.html
<!doctype html>
<html>
 
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="fontello/css/fontello.css">
</head>
 
<body>
  <article>
    <div class="content">
      consectetur adipisicing elit. Eum sequi consequuntur totam placeat tenetur similique, magni ratione vel delectus consequatur consectetur fugiat eius ipsam fuga ullam quas, voluptates ad nemo.
    </div>
 
  </article>
  <div class="control">
    <nav>
      <ul>
        <li><a href="page1.html">page1</a></li>
        <li><a href="page2.html">page2</a></li>
      </ul>
    </nav>
    <ul class="player">
      <li><a href="#play" class="play icon-play-circled"><span>play</span></a></li>
      <li><a href="#stop" class="pause icon-pause-circled"><span>pause</span></a></li>
    </ul>
  </div>
  <script src="page.js"></script>
</body>
 
</html>

 

page.js

history.back();  // 이전 페이지의 객체

history.pushState(null, null, 'a.html');  // a.html 페이지를 history 맨 끝에 넣는다.

$(window).on('popstate', function())  // 뒤로가기 이벤트가 빌생했을때 eventListener 이다.

$(document).ready(function () {
  $(document).on('click', '.control nav a', function (event) {
    history.pushState(null, null, event.target.href);
    $('article').load(event.target.href+' article>.content');
    event.preventDefault();
  })
  $(window).on('popstate', function(event){
    $('article').load(location.href+' article>.content');
  })
  var audio = new Audio('Tyburn - Eden.mp3');
  $(document).on('click', '.control .player .play', function(event){
    audio.play();
  });
  $(document).on('click', '.control .player .pause', function(event){
    audio.pause();
  });
});

 

page.css
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400');
*{
  box-sizing: border-box;
}
body{
  background-image:url(https://source.unsplash.com/category/nature/1600x900);
  background-size:cover;
  min-height:100vh;
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
}
article{
  background-color: rgba(255, 255, 255, 0.59);
  color:black;
  max-width:20rem;
  position: fixed;
  top:50%;
  transform: translateY(-50%);
  font-size:1rem;
  padding:0.5rem;
  font-weight: 200;
}
.control{
  background-color: rgba(0, 0, 0, 0.5);
  color:white;
  position: fixed;
  bottom:0;
  width:100%;
  padding:0 1rem;
}
.control ul{
  list-style: none;
  padding-left:0;
}
.control li{
  display:inline-block;
  padding:0 0.5rem;
}
.control a{
  color:white;
  text-decoration: none;
}
.control>*{
  display: inline-block;
}
.control .player{
  position: absolute;
  right:1rem;
}
.control .player a{
  font-size:1.2rem;
}
.control .player a:hover{
  color:black;
}
.control .player a>span{
  display: none;  
}

 

 

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 랜덤 이미지 생성기  (0) 2023.02.05
[생활코딩 CSS] Parallax(시차를 이용한 효과)  (0) 2023.02.04
[생활코딩 CSS] 링크를 버튼으로 만들기  (0) 2023.02.04
[생활코딩 CSS] 자바스크립트 없이 tree 만들기  (0) 2023.02.04
[생활코딩 CSS] Masonry layout 만들기  (0) 2022.09.29
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more