Front-end/jQuery

[jQuery 활용하기] 03. jQuery 2

Dev다D 2021. 2. 23. 15:53
반응형

음악 스트리밍 사이트 I

 

스크롤을 하면서 플레이리스트가 스르륵 나타나는 효과를 만들어봅시다. 우선 'playlist' 클래스에 적용된 스타일을 살펴봅시다.

 

.playlist {
opacity: 0;
}

 

'playlist'는 처음에 opacity가 0이기 때문에 보이지 않는데요. 'playlist'가 브라우저에 반 이상 걸치면 opacity가 서서히 1로 바뀌어야 합니다. 그 과정에서 반복을 해야 하는 일이 있으면, each 대신 for문을 사용해주세요. each는 다음 과제에서 사용할 것입니다.

 

<!DOCTYPE html>
<html>
<head>
    <title>Music</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar -->
<div class="navbar">
    <a class="logo" href="#">
        <img src="images/logo.png" width="34" height="33">
    </a>

    <ul class="menu-left navbar-menu">
        <li class="menu-item"><a href="#">인기차트</a></li>
        <li class="menu-item"><a href="#">추천음악</a></li>
        <li class="menu-item"><a href="#">뮤직비디오</a></li>
    </ul>

    <div class="search-box">
        <img src="images/search.png" width="24" height="24">
        <input type="text" placeholder="오늘은 무슨 음악을 들을까?">
    </div>

    <ul class="menu-right navbar-menu">
        <li class="menu-item"><a href="#">회원가입</a></li>
        <li class="menu-item"><a href="#">로그인</a></li>
    </ul>
</div>

<!-- go to top button -->
<button class="to-top-btn">
    <img src="images/arrow.png" width="24" height="24">
</button>

<!-- main -->
<div class="container">
    <div class="popular">
        <h2>인기 검색어</h2>

        <ol class="top10">
            <li class="keyword"><a href="#">아이유 (IU)</a></li>
            <li class="keyword"><a href="#">방탄소년단 (BTS)</a></li>
            <li class="keyword"><a href="#">레드벨벳</a></li>
            <li class="keyword"><a href="#">아이콘 (iKON)</a></li>
            <li class="keyword"><a href="#">멜로망스</a></li>
            <li class="keyword"><a href="#">다비치</a></li>
            <li class="keyword"><a href="#">윤딴딴</a></li>
            <li class="keyword"><a href="#">수지</a></li>
            <li class="keyword"><a href="#">김동률</a></li>
            <li class="keyword"><a href="#">폴킴</a></li>
        </ol>
    </div>

    <ul class="playlists">
        <li class="playlist">
            <span class="pl-topic">수면</span>

            <img class="pl-img" src="images/playlist1.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user1.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">꿀잠 자게 해줄 잔잔한 음악 플레이리스트</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#오늘의선곡</a></li>
                    <li class="tag"><a href="#">#꿀잠</a></li>
                    <li class="tag"><a href="#">#수면유도</a></li>
                    <li class="tag"><a href="#">#불면증</a></li>
                    <li class="tag"><a href="#">#낮잠</a></li>
                    <li class="tag"><a href="#">#힐링</a></li>
                    <li class="tag"><a href="#">#굳밤</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">108</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">여행</span>

            <img class="pl-img" src="images/playlist2.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user2.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">어디론가 떠나고 싶을 때 듣는 트렌디한 음악</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#오늘의선곡</a></li>
                    <li class="tag"><a href="#">#힐링</a></li>
                    <li class="tag"><a href="#">#여행</a></li>
                    <li class="tag"><a href="#">#Life</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">76</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">힙합</span>

            <img class="pl-img" src="images/playlist3.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user3.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">그때 그 시절, 90년대 미국 인기 힙합 플레이리스트</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#오늘의선곡</a></li>
                    <li class="tag"><a href="#">#힙합</a></li>
                    <li class="tag"><a href="#">#90년대</a></li>
                    <li class="tag"><a href="#">#HipHop</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">79</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">30곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">일렉트로</span>

            <img class="pl-img" src="images/playlist4.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user4.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">스트레스를 한 방에 날려줄 신나는 일렉트로댄스 음악</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#일렉트로</a></li>
                    <li class="tag"><a href="#">#일렉트로댄스</a></li>
                    <li class="tag"><a href="#">#클럽</a></li>
                    <li class="tag"><a href="#">#전자음악</a></li>
                    <li class="tag"><a href="#">#댄스</a></li>
                    <li class="tag"><a href="#">#스트레스</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">92</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">20곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">재즈</span>

            <img class="pl-img" src="images/playlist5.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user5.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">여유로운 카페 음악</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#공부</a></li>
                    <li class="tag"><a href="#">#집중</a></li>
                    <li class="tag"><a href="#">#카페음악</a></li>
                    <li class="tag"><a href="#">#보사노바</a></li>
                    <li class="tag"><a href="#">#재즈</a></li>
                    <li class="tag"><a href="#">#힐링</a></li>
                    <li class="tag"><a href="#">#휴식</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">78</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">계절음악</span>

            <img class="pl-img" src="images/playlist6.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user6.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">추운 겨울, 당신의 마음을 녹여줄 따뜻한 음악</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#계절음악</a></li>
                    <li class="tag"><a href="#">#겨울</a></li>
                    <li class="tag"><a href="#">#날씨</a></li>
                    <li class="tag"><a href="#">#휴식</a></li>
                    <li class="tag"><a href="#">#집</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">46</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
                </div>
            </div>
        </li>

        <li class="playlist">
            <span class="pl-topic">하우스 EDM</span>

            <img class="pl-img" src="images/playlist7.jpg" width="397" height="240">

            <div class="pl-info">
                <div class="header">
                    <img class="pl-user-img" src="images/user7.png" width="60" height="60">

                    <h2 class="pl-title"><a href="#">기분 좋은 연말, 디너파티를 위한 일렉트로 하우스 음악</a></h2>
                </div>

                <ul class="tags">
                    <li class="tag"><a href="#">#하우스</a></li>
                    <li class="tag"><a href="#">#파티</a></li>
                    <li class="tag"><a href="#">#연말</a></li>
                    <li class="tag"><a href="#">#크리스마스</a></li>
                    <li class="tag"><a href="#">#디너파티</a></li>
                </ul>

                <div class="stats">
                    <img src="images/like_count.png" width="20" height="20"><span class="like-count">57</span>

                    <img src="images/song_count.png" width="20" height="20"><span class="song-count">32곡</span>
                </div>
            </div>
        </li>
    </ul>
</div>

<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script src="  script.js"></script>
</body>
</html>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #fafafa;
    font-family: 'Noto Sans KR', sans-serif;
    min-width: 1200px;
}

/* navigation bar */

.navbar {
    background-color: white;
    height: 59px;
    line-height: 59px;
    padding: 0 82px;
    position: relative;
}

.navbar .logo {
    float: left;
}

.navbar .logo img {
    vertical-align: middle;
}

.navbar .navbar-menu {
    padding: 0;
    margin: 0 10px;
    list-style: none;
}

.navbar .menu-left {
    float: left;
}

.navbar .menu-right {
    float: right;
}

.navbar .navbar-menu li {
    display: inline-block;
    font-size: 16px;
    margin: 0 10px;
}

.navbar .navbar-menu li a {
    color: #4a4a4a;
    text-decoration: none;
}

.navbar .search-box {
    display: inline-block;
    vertical-align: middle;
    width: 371px;
    height: 34px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 12px;
    left: 0;
    right: 0;
}

.navbar .search-box img {
    position: absolute;
    left: 13px;
    top: 6px;
}

.navbar .search-box input {
    display: block;
    width: 371px;
    height: 36px;
    border-radius: 22px;
    background-color: white;
    border: solid 1px #4a90e2;
    padding: 0 51px;
    font-size: 14px;
    color: #4a4a4a;
    outline: none;
}

/* go to top button */

.to-top-btn {
    background-color: white;
    padding: 15px;
    border: none;
    outline: none;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.05), 0 5px 5px 0 rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1;
    display: none;
}

/* container */

.container {
    width: 992px;
    margin: 34px auto;
}

/* popular */

.popular {
    border-radius: 7px;
    width: 231px;
    background-color: white;
    float: left;
    margin-right: 24px;
    padding: 17px 14px;
}

.popular h2 {
    font-size: 14px;
    color: #4a4a4a;
}

.top10 {
    counter-reset: counter;
    padding-left: 0;
    list-style: none;
}

.top10 .keyword:not(:last-child) {
    margin-bottom: 12px;
}

.top10 .keyword:before {
    content: counter(counter,decimal-leading-zero);
    counter-increment: counter;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    margin-right: 10px;
    padding: 3px 5px;
    position: relative;
    bottom: 2px;

    width: 18px;
    height: 18px;
    border-radius: 6px;
    background-color: #2391e9;
}

.top10 .keyword:nth-of-type(1n+4):before {
    background-color: #dbdbdb;
}

.top10 .keyword a {
    font-size: 14px;
    color: #4a4a4a;
    text-decoration: none;
}

.top10 .keyword a:hover {
    text-decoration: underline;
}

/* playlists */

.playlists {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}

.playlist {
    width: 737px;
    height: 240px;
    border-radius: 7px;
    background-color: white;
    margin-bottom: 35px;
    position: relative;
    opacity: 0;
}

.pl-topic {
    position: absolute;
    top: 16px;
    left: 26px;
    text-align: center;

    width: 79px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.64;
    color: white;

    border-bottom: 1px solid white;
}

.pl-img {
    float: left;
}

.pl-info {
    float: left;
    width: 340px;
    padding: 10px 15px;
}

.pl-user-img {
    vertical-align: middle;
    margin-right: 14px;
}

.pl-title {
    display: inline-block;
    vertical-align: middle;
    width: 231px;
    font-weight: 300;
    line-height: 1.45;
}

.pl-title a {
    color: #4a4a4a;
    font-size: 20px;
    text-decoration: none;
}

.pl-title a:hover {
    text-decoration: underline;
}

.tags {
    padding: 0;
    margin: 0;

}

.tags .tag {
    display: inline;
    margin-right: 3px;
    white-space: nowrap;
}

.tags .tag a {
    color: #9b9b9b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.64;
}

.stats {
    vertical-align: middle;
    border-top: solid 0.3px #9b9b9b;
    padding-top: 11px;
    margin-top: 11px;
}

.stats img {
    vertical-align: middle;
    margin-right: 9px;
}

.stats span {
    vertical-align: middle;
    margin-right: 20px;

    font-size: 14px;
    font-weight: 300;
    line-height: 2.21;
    text-align: left;
    color: #4a4a4a;
}
function scrollHandler() {
    var windowBottom = $(window).scrollTop() + $(window).height();
    var playlists = $('.playlist');
    for (var i = 0; i <playlists.length; i++) {
        var playlist = $(playlists[i]);
        var playlistHalf = playlist.position().top + playlist.outerHeight() / 2;

        if(playlistHalf < windowBottom) {
            playlist.animate({'opacity': '1'}, 1500);
        }
    }
}

$(window).on('scroll', scrollHandler)

scrollHandler();
본 내용은 Codeit의  'jQuery' 강의를
참고하여 작성한 내용입니다.

 

반응형
저작자표시 비영리 동일조건

'Front-end > jQuery' 카테고리의 다른 글

[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오  (0) 2021.02.24
[jQuery 활용하기] 03. jQuery 2  (0) 2021.02.23
[jQuery 활용하기] 03. jQuery 2  (0) 2021.02.22
[jQuery 활용하기] 03. jQuery 2  (0) 2021.02.21
[jQuery 활용하기] 01. jQuery 1  (0) 2021.02.19

'Front-end/jQuery'의 다른글

  • 현재글[jQuery 활용하기] 03. jQuery 2

관련글

티스토리툴바