728x90
패럴렉스 이펙트_07
각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻💻
HTML 코드
HTML 코드는 바탕화면에 5가지 아이콘을 구성하기 위해 icon의 배치만 적절히 해주기 위해서,
각 아이콘을 만들어 주도록 합니다🏄♂️
<header id="header">
<div class="header_cont">
<img src="../assets/music_img/appleLogo.png" alt="">
<h1>gamneeffect</h1>
</div>
<div class="header_icon_cont" style="display:flex;">
<img src="../assets/music_img/logo_4k.png" alt="">
<img src="../assets/music_img/logo_alarm.png" alt="">
<img src="../assets/music_img/logo_moon.png" alt="">
<img src="../assets/music_img/logo_cloud.png" alt="">
<img src="../assets/music_img/logo_sound.png" alt="">
<img src="../assets/music_img/logo_signal.png" alt="">
<img src="../assets/music_img/logo_battery.png" alt="">
<div class="time"></div>
</div>
</header>
<!-- header -->
<div class="mouse__cursor">
<!-- <img src="../../assets/img/mouseCursor.png" alt="유지"> -->
</div>
<div class="sourceContWord">
<div class="sourceContWord_header">
<p>SOURCE VIEW</p>
<img src="../assets/music_img/logo_moon.png" alt="">
</div>
<div class="search__wrap">
<span>얼마나 알고있나</span>
<h1><a href="#"></a>CSS 속성...!</h1>
<div class="desc">
2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다.<br>
기억이 나지 않으면 힌트보기를 한번 이용할 수 있습니다.
</div>
<div class="time">
<span>2:00</span>
</div>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성을 검색해주세요.">
<div class="start">게임 시작 :3</div>
</div>
<div class="search__audio">
<span class="play sound">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 6.3706C15 4.65827 12.9884 3.73774 11.6926 4.85712L8.36317 7.73321C7.99989 8.04704 7.53583 8.21972 7.05576 8.21973L5.49998 8.21974C4.11928 8.21975 3 9.33903 3 10.7197V14.0127C3 15.3934 4.11929 16.5127 5.5 16.5127H7.0558C7.53587 16.5127 7.99993 16.6854 8.36322 16.9992L11.6926 19.8753C12.9884 20.9947 15 20.0741 15 18.3618V12.3662V6.3706Z" fill="#223547" stroke="#223547" stroke-width="1.5"/>
<path d="M18 15.3667C18.6279 14.531 19 13.4923 19 12.3667C19 11.2411 18.6279 10.2024 18 9.3667" stroke="#223547" stroke-width="1.5" stroke-linecap="round"/>
<path d="M20 18.3667C21.2558 16.6954 22 14.6179 22 12.3667C22 10.1155 21.2558 8.03802 20 6.3667" stroke="#223547" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</span>
<span class="stop sound">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 6.3706C14 4.65827 11.9884 3.73774 10.6926 4.85712L7.36317 7.73321C6.99989 8.04704 6.53583 8.21972 6.05576 8.21973L4.49998 8.21974C3.11928 8.21975 2 9.33903 2 10.7197V14.0127C2 15.3934 3.11929 16.5127 4.5 16.5127H6.0558C6.53587 16.5127 6.99993 16.6854 7.36322 16.9992L10.6926 19.8753C11.9884 20.9947 14 20.0741 14 18.3618V12.3662V6.3706Z" fill="#223547" stroke="#223547" stroke-width="1.5"/>
<path d="M18 14.1215L22.2427 9.87891" stroke="#223547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 9.87894L22.2427 14.1216" stroke="#223547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<audio id="audio" src="../../javascript/assets/music/music_audio04.mp3" loop="loop"></audio>
<audio id="success" src="../../assets/music/success.m4a"></audio>
<audio id="fail" src="../../assets/music/fail.m4a"></audio>
</div>
<div class="search__count">
</div>
<div class="search__info center">
<div>전체 속성 갯수 : <span class="all">0</span></div>
현재 맞춘 갯수 : <span class="now">0</span>
</div>
<div class="search__answers"></div>
<div class="search__missAnswers"> </div>
<div class="search__list"></div>
<div class="search__result">
<div class="svg__wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="448px" height="386px" viewBox="0 0 448 386">
<g filter="none" transform="translate(218.184,198.765) translate(-217.528,-187.235)" style="animation: 3.9s linear infinite both bee-a0_ft;">
<g id="bee-Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(217.528,187.235) translate(-218.184,-198.765)">
<g id="bee-Artboard" transform="translate(218.184,198.765) translate(-1258.18,-1122.76)">
<g id="bee-drop" fill="#946BC6" transform="translate(1394.27,1301.5) translate(-27.7667,-6.5)">
<rect id="bee-Rectangle" width="25.9539" height="13" rx="6.5" transform="translate(12.977,6.5) translate(-12.977,-6.5)" />
<path id="bee-Oval" d="M6.5,0C7.80436,3.3445,3.58985,6.5,0,6.5C-3.58985,6.5,-7.26635,3.5071,-6.5,0C-4.53336,-9,-3.53336,-17.5,0,-17.5C3.46664,-17.5,4.55118,-4.99697,6.5,0Z" transform="translate(49.0334,-83.5)" style="animation: 3.9s linear infinite both bee-Oval_t, 3.9s linear infinite both bee-Oval_d;" />
</g>
<g id="bee-scene" transform="translate(1258.18,1122.76) translate(-218.184,-198.765)">
<g id="bee-flower-2" transform="translate(90.0588,372) translate(0,-206.381)" style="animation: 3.9s linear infinite both bee-flower-2_t;">
<path id="bee-Path-9" d="M0.941176,206.381C-1.72549,120.715,1.27451,69.7147,9.94118,53.3814C11.9977,49.5056,14.27,45.7426,16.7582,42.0921L16.7582,42.0921C30.4776,21.9638,51.6942,8.17626,75.6598,3.81498C105.444,-1.60524,131.705,-1.24978,154.441,4.88136C198.941,16.8814,204.941,19.8814,210.441,24.8814C214.108,28.2147,234.275,48.8814,270.941,86.8814" stroke="#7AB6AE" stroke-width="6" transform="translate(135.471,103.191) translate(-135.471,-103.191)" />
<g id="bee-Group-3-Copy-3" fill="#7AB6AE" transform="translate(264.26,81.0804) rotate(91) translate(-15.2019,-15.6629)">
<rect id="bee-Rectangle-2" width="29.6325" height="13.1271" rx="6.56355" transform="translate(15.2019,6.88946) translate(-14.8162,-6.56355)" />
<rect id="bee-Rectangle-Copy-7" width="29.6325" height="12.5416" rx="6.27078" transform="translate(23.7473,16.1837) rotate(-90) translate(-14.8162,-6.27078)" />
</g>
<g id="bee-Flower-Copy-2" transform="translate(288.54,108.447) rotate(133) translate(-30.4805,-32.3833)">
<g id="bee-Group-2" fill="#946BC4" transform="translate(30.2037,10.1784) translate(-22.289,-10.1784)">
<rect id="bee-Rectangle-3" width="11" height="16.6487" rx="5.5" transform="translate(5.5,12.0325) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-5" width="11" height="16.6487" rx="5.5" transform="translate(22.5658,8.32434) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-6" width="11" height="16.6487" rx="5.5" transform="translate(39.078,12.0325) translate(-5.5,-8.32434)" />
</g>
<path id="bee-Combined-Shape" d="M30.3952,4.26124C39.0927,4.26124,46.9394,7.90412,52.4926,13.7473C50.6453,14.7714,49.3952,16.74,49.3952,19.0006L49.3952,19.0006L49.395,34.1675C47.7715,34.6076,46.0485,34.5367,44.4656,33.9634L44.4656,33.9634L44.4666,23.8117C44.4666,20.498,41.7803,17.8117,38.4666,17.8117C35.1529,17.8117,32.4666,20.498,32.4666,23.8117L32.4666,23.8117L32.4657,33.5686L32.0548,33.797C31.0514,34.3544,29.8179,34.2904,28.8775,33.6322L28.8775,33.6322L28.8427,33.6076L28.8432,23.8117C28.8432,20.498,26.1569,17.8117,22.8432,17.8117C19.5295,17.8117,16.8432,20.498,16.8432,23.8117L16.8432,23.8117L16.8427,33.1626L16.31,33.502C15.1865,34.217,13.7261,34.1057,12.7239,33.2288L12.7239,33.2288L11.9147,32.5206L11.9147,19.0006C11.9147,16.6001,10.505,14.5289,8.46835,13.5696C14.0105,7.83045,21.786,4.26124,30.3952,4.26124Z" fill="#CB90EB" transform="translate(30.4805,19.3569) translate(-30.4805,-19.3569)" />
<path id="bee-Combined-Shape-2" d="M55.0037,12.6397C58.2938,12.6397,60.961,15.3069,60.961,18.5971L60.961,33.7508L60.9587,33.9117C60.9602,34.0363,60.961,34.1611,60.961,34.2861C60.961,51.12,47.3144,64.7666,30.4805,64.7666C13.6466,64.7666,0,51.12,0,34.2861L0.00219882,33.9143C0.000736059,33.86,0,33.8055,0,33.7508L0,18.5971C0,15.3069,2.66719,12.6397,5.95733,12.6397C9.24747,12.6397,11.9147,15.3069,11.9147,18.5971L11.9147,32.1618L12.7239,32.87C13.7261,33.7469,15.1865,33.8582,16.31,33.1432L16.8427,32.8038L16.8432,23.4529C16.8432,20.1392,19.5295,17.4529,22.8432,17.4529C26.1569,17.4529,28.8432,20.1392,28.8432,23.4529L28.8427,33.2488L28.8775,33.2734C29.8179,33.9316,31.0514,33.9956,32.0548,33.4382L32.4657,33.2098L32.4666,23.4529C32.4666,20.1392,35.1529,17.4529,38.4666,17.4529C41.7803,17.4529,44.4666,20.1392,44.4666,23.4529L44.4656,33.6046C45.9365,34.1374,47.5285,34.2363,49.0492,33.8944C49.0469,33.8466,49.0463,33.7988,49.0463,33.7508L49.0463,18.5971C49.0463,15.3069,51.7135,12.6397,55.0037,12.6397Z" fill="#946BC6" transform="translate(30.4805,38.7032) translate(-30.4805,-38.7032)" />
</g>
</g>
<g id="bee-flower-3" transform="translate(89.1929,372.5) translate(0,-241)" style="animation: 3.9s linear infinite both bee-flower-3_t;">
<g id="bee-Group-3-Copy-5" fill="#7AB6AE" transform="translate(286.509,69.6629) translate(-15.2019,-15.6629)">
<rect id="bee-Rectangle-4" width="29.6325" height="13.1271" rx="6.56355" transform="translate(15.2019,6.88946) translate(-14.8162,-6.56355)" />
<rect id="bee-Rectangle-Copy-7-2" width="29.6325" height="12.5416" rx="6.27078" transform="translate(23.7473,16.1837) rotate(-90) translate(-14.8162,-6.27078)" />
</g>
<path id="bee-Path-10" d="M0.8071,241C-0.269033,219.056,-0.269033,203.389,0.8071,194C5.58952,152.274,26.6818,123.699,66.3071,107.5C97.6881,94.6713,146.256,109.316,194.807,104C240.474,99,273.64,85.3333,294.307,63" stroke="#7AB6AE" stroke-width="5" transform="translate(147.154,152) translate(-147.154,-152)" />
<g id="bee-Flower-Copy-3" transform="translate(312.878,45.4049) rotate(46) translate(-30.4805,-32.3833)">
<g id="bee-Group-2-2" fill="#946BC4" transform="translate(30.2037,10.1784) translate(-22.289,-10.1784)">
<rect id="bee-Rectangle-5" width="11" height="16.6487" rx="5.5" transform="translate(5.5,12.0325) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-5-2" width="11" height="16.6487" rx="5.5" transform="translate(22.5658,8.32434) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-6-2" width="11" height="16.6487" rx="5.5" transform="translate(39.078,12.0325) translate(-5.5,-8.32434)" />
</g>
<path id="bee-Combined-Shape-3" d="M30.3952,4.26124C39.0927,4.26124,46.9394,7.90412,52.4926,13.7473C50.6453,14.7714,49.3952,16.74,49.3952,19.0006L49.3952,19.0006L49.395,34.1675C47.7715,34.6076,46.0485,34.5367,44.4656,33.9634L44.4656,33.9634L44.4666,23.8117C44.4666,20.498,41.7803,17.8117,38.4666,17.8117C35.1529,17.8117,32.4666,20.498,32.4666,23.8117L32.4666,23.8117L32.4657,33.5686L32.0548,33.797C31.0514,34.3544,29.8179,34.2904,28.8775,33.6322L28.8775,33.6322L28.8427,33.6076L28.8432,23.8117C28.8432,20.498,26.1569,17.8117,22.8432,17.8117C19.5295,17.8117,16.8432,20.498,16.8432,23.8117L16.8432,23.8117L16.8427,33.1626L16.31,33.502C15.1865,34.217,13.7261,34.1057,12.7239,33.2288L12.7239,33.2288L11.9147,32.5206L11.9147,19.0006C11.9147,16.6001,10.505,14.5289,8.46835,13.5696C14.0105,7.83045,21.786,4.26124,30.3952,4.26124Z" fill="#CB90EB" transform="translate(30.4805,19.3569) translate(-30.4805,-19.3569)" />
<path id="bee-Combined-Shape-4" d="M55.0037,12.6397C58.2938,12.6397,60.961,15.3069,60.961,18.5971L60.961,33.7508L60.9587,33.9117C60.9602,34.0363,60.961,34.1611,60.961,34.2861C60.961,51.12,47.3144,64.7666,30.4805,64.7666C13.6466,64.7666,0,51.12,0,34.2861L0.00219882,33.9143C0.000736059,33.86,0,33.8055,0,33.7508L0,18.5971C0,15.3069,2.66719,12.6397,5.95733,12.6397C9.24747,12.6397,11.9147,15.3069,11.9147,18.5971L11.9147,32.1618L12.7239,32.87C13.7261,33.7469,15.1865,33.8582,16.31,33.1432L16.8427,32.8038L16.8432,23.4529C16.8432,20.1392,19.5295,17.4529,22.8432,17.4529C26.1569,17.4529,28.8432,20.1392,28.8432,23.4529L28.8427,33.2488L28.8775,33.2734C29.8179,33.9316,31.0514,33.9956,32.0548,33.4382L32.4657,33.2098L32.4666,23.4529C32.4666,20.1392,35.1529,17.4529,38.4666,17.4529C41.7803,17.4529,44.4666,20.1392,44.4666,23.4529L44.4656,33.6046C45.9365,34.1374,47.5285,34.2363,49.0492,33.8944C49.0469,33.8466,49.0463,33.7988,49.0463,33.7508L49.0463,18.5971C49.0463,15.3069,51.7135,12.6397,55.0037,12.6397Z" fill="#946BC6" transform="translate(30.4805,38.7032) translate(-30.4805,-38.7032)" />
</g>
</g>
<g id="bee-leg-l" transform="translate(192,343.25) translate(-9.5,-40.75)">
<path id="bee-leg1" d="M9,71.5L14,71.5C16.7614,71.5,19,73.7386,19,76.5C19,79.2614,16.7614,81.5,14,81.5L0,81.5L0,81.5L0,80.5C0,75.5294,4.02944,71.5,9,71.5Z" fill="#283138" transform="translate(9.5,76.5) translate(-9.5,-76.5)" />
</g>
<g id="bee-leg-m-r" transform="translate(237.5,340.75) translate(-9.5,-43.25)">
<path id="bee-leg3" d="M9,76.5L14,76.5C16.7614,76.5,19,78.7386,19,81.5C19,84.2614,16.7614,86.5,14,86.5L0,86.5L0,86.5L0,85.5C0,80.5294,4.02944,76.5,9,76.5Z" fill="#283138" transform="translate(9.5,81.5) scale(-1,1) translate(-9.5,-81.5)" />
</g>
<g id="bee-leg-r" transform="translate(258.693,329) translate(-9.5,-55)" />
<g id="bee-plants" transform="translate(94.5778,321.5) translate(-94.5778,-64.5)">
<path id="bee-Rectangle-6" d="M42.5,0C67.9051,0,88.5,20.5949,88.5,46L88.5,96C88.5,100.418,84.9183,104,80.5,104L50.5,104C46.0817,104,42.5,100.418,42.5,96L42.5,0L42.5,0Z" fill="#537B88" transform="translate(65.5,52) translate(-65.5,-52)" />
<path id="bee-Path" d="M13,11.5L63.9874,61.1217C67.3073,64.3527,70.0833,68.0989,72.208,72.2155L73.3927,74.5109C75.7858,79.1475,77.5192,84.0959,78.5425,89.2124L80,96.5L80,96.5L85.9454,92.1761C89.2899,89.7437,93.0299,87.9079,97,86.75L97.3619,86.6444C101.108,85.5518,104.968,84.8927,108.864,84.6801L130.5,83.5L130.5,83.5L133.11,88.4305C134.33,90.735,136.329,92.5316,138.75,93.5L138.964,93.5858C141.228,94.4913,143.759,94.4604,146,93.5C148.265,92.5294,150.129,90.8123,151.282,88.6346L154,83.5L154,83.5L188.5,83.5L186.564,93.1802C185.859,96.7031,184.584,100.087,182.789,103.199L181.04,106.232C179.027,109.72,176.458,112.857,173.434,115.518L171.75,117C167.619,120.636,162.854,123.48,157.693,125.392L152,127.5L152,127.5L66.5,129L10.5,73L7.25395,67.3194C4.11471,61.8257,2.07543,55.7733,1.25,49.5L1.03648,47.8772C0.350899,42.6668,0.592462,37.3762,1.75,32.25C2.90438,27.1377,5.09549,22.3167,8.18776,18.0852L13,11.5L13,11.5Z" fill="#7AB6AE" transform="translate(94.5778,70.25) translate(-94.5778,-70.25)" />
</g>
<g id="bee-flower-1" transform="translate(105,344.5) translate(-62.9058,-344.5)" style="animation: 3.9s linear infinite both bee-flower-1_t;">
<g id="bee-Group-3-Copy-2" fill="#7AB6AE" transform="translate(32.4334,179.29) rotate(-136) translate(-15.2019,-15.6629)">
<rect id="bee-Rectangle-7" width="29.6325" height="13.1271" rx="6.56355" transform="translate(15.2019,6.88946) translate(-14.8162,-6.56355)" />
<rect id="bee-Rectangle-Copy-7-3" width="29.6325" height="12.5416" rx="6.27078" transform="translate(23.7473,16.1837) rotate(-90) translate(-14.8162,-6.27078)" />
</g>
<g id="bee-Group-9" transform="translate(81.0586,181.765) translate(-81.0586,-181.765)">
<g id="bee-Group-3" fill="#7AB6AE" transform="translate(103.222,73.0275) translate(-14.8162,-15.337)">
<rect id="bee-Rectangle-8" width="29.6325" height="13.1271" rx="6.56355" transform="translate(14.8162,6.56355) translate(-14.8162,-6.56355)" />
<rect id="bee-Rectangle-Copy-7-4" width="29.6325" height="12.5416" rx="6.27078" transform="translate(23.3617,15.8578) rotate(-90) translate(-14.8162,-6.27078)" />
</g>
<g id="bee-flower-1-2" transform="translate(81.0586,181.765) translate(-81.0586,-181.765)">
<g id="bee-leaves" transform="translate(35.6112,110.782) translate(-35.4924,-37.2335)">
<path id="bee-Rectangle-9" d="M35.287,0C54.8931,0,70.787,15.8939,70.787,35.5L70.787,59.5C70.787,66.1274,65.4144,71.5,58.787,71.5L53.037,71.5C43.2339,71.5,35.287,63.5531,35.287,53.75L35.287,0L35.287,0Z" fill="#527B88" transform="translate(53.037,35.75) translate(-53.037,-35.75)" />
<path id="bee-Rectangle-10" d="M18,22.0124C36.8613,22.0124,52.2317,37.1494,52.5203,56.0085L52.9848,86.3585L52.9848,86.3585L48.979,85.8952C31.3224,83.8532,18,68.9013,18,51.127L18,22.0124L18,22.0124Z" fill="#7AB6AE" transform="translate(35.4924,54.1855) rotate(-46) translate(-35.4924,-54.1855)" />
</g>
<g id="bee-Group-8" transform="translate(81.0586,181.765) translate(-81.0586,-181.765)">
<g id="bee-Group-7" stroke="#7AB6AE" stroke-width="6" transform="translate(63.9058,205.5) translate(-49.5,-146.5)">
<path id="bee-Path-7" d="M99,0C86.5722,15.2623,78.2389,26.929,74,35C63.5795,54.8408,58.5351,71.8019,57.5,86.5C55,122,58.406,210.019,56,247C53.594,283.981,43.5,285,41,293" transform="translate(70,146.5) translate(-70,-146.5)" />
<path id="bee-Path-8" d="M0,120L13.25,120C17.3956,120,21.5202,120.589,25.5,121.75C29.4648,122.906,33.1775,124.796,36.4455,127.322L37,127.75C40.6505,130.571,43.9104,133.864,46.6944,137.543L56.5,150.5L56.5,150.5" transform="translate(28.25,135.25) translate(-28.25,-135.25)" />
</g>
<g id="bee-flower1" transform="translate(19.4275,179.229) translate(-19.4275,-22.5293)">
<g id="bee-Group-3-Copy" fill="#7AB6AE" transform="translate(32.4334,22.5899) rotate(-136) translate(-15.2019,-15.6629)">
<rect id="bee-Rectangle-11" width="29.6325" height="13.1271" rx="6.56355" transform="translate(15.2019,6.88946) translate(-14.8162,-6.56355)" />
<rect id="bee-Rectangle-Copy-7-5" width="29.6325" height="12.5416" rx="6.27078" transform="translate(23.7473,16.1837) rotate(-90) translate(-14.8162,-6.27078)" />
</g>
<ellipse id="bee-Oval-2" fill="#BB80DC" rx="14.4572" ry="14.4572" transform="translate(14.4572,22.5)" />
</g>
<g id="bee-Flower" transform="translate(128.476,45.4049) rotate(46) translate(-30.4805,-32.3833)">
<g id="bee-Group-2-3" fill="#946BC4" transform="translate(30.2037,10.1784) translate(-22.289,-10.1784)">
<rect id="bee-Rectangle-12" width="11" height="16.6487" rx="5.5" transform="translate(5.5,12.0325) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-5-3" width="11" height="16.6487" rx="5.5" transform="translate(22.5658,8.32434) translate(-5.5,-8.32434)" />
<rect id="bee-Rectangle-Copy-6-3" width="11" height="16.6487" rx="5.5" transform="translate(39.078,12.0325) translate(-5.5,-8.32434)" />
</g>
<path id="bee-Combined-Shape-5" d="M30.3952,4.26124C39.0927,4.26124,46.9394,7.90412,52.4926,13.7473C50.6453,14.7714,49.3952,16.74,49.3952,19.0006L49.3952,19.0006L49.395,34.1675C47.7715,34.6076,46.0485,34.5367,44.4656,33.9634L44.4656,33.9634L44.4666,23.8117C44.4666,20.498,41.7803,17.8117,38.4666,17.8117C35.1529,17.8117,32.4666,20.498,32.4666,23.8117L32.4666,23.8117L32.4657,33.5686L32.0548,33.797C31.0514,34.3544,29.8179,34.2904,28.8775,33.6322L28.8775,33.6322L28.8427,33.6076L28.8432,23.8117C28.8432,20.498,26.1569,17.8117,22.8432,17.8117C19.5295,17.8117,16.8432,20.498,16.8432,23.8117L16.8432,23.8117L16.8427,33.1626L16.31,33.502C15.1865,34.217,13.7261,34.1057,12.7239,33.2288L12.7239,33.2288L11.9147,32.5206L11.9147,19.0006C11.9147,16.6001,10.505,14.5289,8.46835,13.5696C14.0105,7.83045,21.786,4.26124,30.3952,4.26124Z" fill="#CB90EB" transform="translate(30.4805,19.3569) translate(-30.4805,-19.3569)" />
<path id="bee-Combined-Shape-6" d="M55.0037,12.6397C58.2938,12.6397,60.961,15.3069,60.961,18.5971L60.961,33.7508L60.9587,33.9117C60.9602,34.0363,60.961,34.1611,60.961,34.2861C60.961,51.12,47.3144,64.7666,30.4805,64.7666C13.6466,64.7666,0,51.12,0,34.2861L0.00219882,33.9143C0.000736059,33.86,0,33.8055,0,33.7508L0,18.5971C0,15.3069,2.66719,12.6397,5.95733,12.6397C9.24747,12.6397,11.9147,15.3069,11.9147,18.5971L11.9147,32.1618L12.7239,32.87C13.7261,33.7469,15.1865,33.8582,16.31,33.1432L16.8427,32.8038L16.8432,23.4529C16.8432,20.1392,19.5295,17.4529,22.8432,17.4529C26.1569,17.4529,28.8432,20.1392,28.8432,23.4529L28.8427,33.2488L28.8775,33.2734C29.8179,33.9316,31.0514,33.9956,32.0548,33.4382L32.4657,33.2098L32.4666,23.4529C32.4666,20.1392,35.1529,17.4529,38.4666,17.4529C41.7803,17.4529,44.4666,20.1392,44.4666,23.4529L44.4656,33.6046C45.9365,34.1374,47.5285,34.2363,49.0492,33.8944C49.0469,33.8466,49.0463,33.7988,49.0463,33.7508L49.0463,18.5971C49.0463,15.3069,51.7135,12.6397,55.0037,12.6397Z" fill="#946BC6" transform="translate(30.4805,38.7032) translate(-30.4805,-38.7032)" />
</g>
</g>
</g>
</g>
</g>
<g id="bee-bee" transform="translate(224.5,185.29) translate(-105,-114.943)" style="animation: 3.9s linear infinite both bee-bee_t;">
<g transform="translate(99.4377,210.746) translate(-32.0265,-22.3044)" style="animation: 3.9s linear infinite both bee-a1_t;">
<rect id="bee-Rectangle-13" width="29.5" height="44" rx="14.75" fill="#FFA521" transform="translate(11.2509,22.975) translate(-14.75,-22)" style="animation: 3.9s linear infinite both bee-Rectangle-13_t;" />
<rect id="bee-Rectangle-Copy-12" width="29.5" height="44" rx="14.75" fill="#FFA521" transform="translate(45.3387,22.975) translate(-14.75,-22)" style="animation: 3.9s linear infinite both bee-Rectangle-Copy-12_t;" />
</g>
<g transform="translate(112.695,185.347) translate(-112.695,-199.854)" style="animation: 3.9s linear infinite both bee-a2_t;">
<g id="bee-body" transform="translate(105.5,147.52) translate(-77.5,-77.5)">
<ellipse id="bee-Oval-Copy-2" fill="#283138" rx="77.5" ry="77.5" transform="translate(77.5,77.5)" />
<path id="bee-Combined-Shape-7" d="M145.808,114.141C141.546,122.07,135.944,129.172,129.304,135.143L25.696,135.143C19.0564,129.172,13.4541,122.07,9.19189,114.141ZM154.248,66.658C154.744,70.2008,155,73.8205,155,77.5C155,80.9432,154.775,84.3339,154.34,87.6584L0.659782,87.6584C0.224542,84.3339,0,80.9432,0,77.5C0,73.8205,0.256423,70.2008,0.752375,66.658ZM123.524,15.1394C131.261,20.8595,137.897,27.9855,143.053,36.1401L11.9473,36.1401C17.1031,27.9855,23.7386,20.8595,31.4763,15.1394Z" fill="#FFA521" transform="translate(77.5,75.1411) translate(-77.5,-75.1411)" />
</g>
<g transform="translate(105,99.71) translate(-105,-83.7987)" style="animation: 3.9s linear infinite both bee-a3_t;">
<g id="bee-wings" fill="#B1E2EF" transform="translate(165.5,136.75) translate(-165,-151.855)" style="animation: 3.9s linear infinite both bee-wings_t;">
<rect id="bee-Rectangle-Copy-11" width="158" height="79.5" rx="39.75" transform="translate(168.025,157.166) rotate(60) translate(-158,-39.75)" style="animation: 3.9s linear infinite both bee-Rectangle-Copy-11_t;" />
<rect id="bee-Rectangle-14" width="188.5" height="81" rx="40.5" transform="translate(175.924,154.237) translate(-175.924,-70.8827)" style="animation: 3.9s linear infinite both bee-Rectangle-14_t;" />
</g>
<g id="bee-antennas" stroke="#202528" stroke-linecap="round" stroke-width="5" transform="translate(130,99.2503) translate(-19.4971,-35.5418)" style="animation: 3.9s linear infinite both bee-antennas_t;">
<path id="bee-Path-6" d="M0,36.5L0.139392,33.1081C0.854467,15.708,15.5398,2.18202,32.94,2.8971C33.4607,2.9185,33.9809,2.95281,34.5,3L34.5,3L34.5,3" transform="translate(17.25,19.685) translate(-17.25,-19.685)" />
<path id="bee-Path-6-Copy" d="M32.5,36.5L32.6394,33.1081C33.3545,15.708,48.0398,2.18202,65.44,2.8971C65.9607,2.9185,66.4809,2.95281,67,3L67,3L67,3" transform="translate(49.75,19.685) translate(-49.75,-19.685)" />
</g>
<g id="bee-face" transform="translate(105,129.75) translate(-105,-43.5)">
<path id="bee-Path-3" stroke="#336775" stroke-width="5" opacity="0.968169" d="M209.5,43.5L119,43.5" transform="translate(164.25,43.5) translate(-164.25,-43.5)" />
<g id="bee-Group-5" transform="translate(124.708,46.5) translate(-71,-36.5)">
<rect id="bee-Rectangle-15" fill="#FFA521" width="142" height="73" rx="36" transform="translate(71,36.5) translate(-71,-36.5)" />
<ellipse id="bee-Oval-3" fill="#FFFFFF" rx="29.8575" ry="29.8575" transform="translate(36.1492,36)" />
<ellipse id="bee-Oval-Copy-3" fill="#FFFFFF" rx="29.8575" ry="29.8575" transform="translate(106.649,36)" />
<path id="bee-Combined-Shape-8" d="M37.6205,15.3575C39.5734,15.3575,41.463,15.6287,43.2537,16.1355C41.0876,17.8939,39.7039,20.5773,39.7039,23.5838C39.7039,28.8795,43.9969,33.1725,49.2926,33.1725C52.512,33.1725,55.3608,31.5859,57.0998,29.152C57.8533,31.2948,58.263,33.5995,58.263,36L58.263,37.4713C58.263,48.8718,49.0211,58.1138,37.6205,58.1138L36.1492,58.1138C24.7487,58.1138,15.5067,48.8718,15.5067,37.4713L15.5067,36C15.5067,24.5995,24.7487,15.3575,36.1492,15.3575L37.6205,15.3575Z" fill="#283138" transform="translate(36.8849,36.7356) translate(-36.8849,-36.7356)" style="animation: 3.9s linear infinite both bee-Combined-Shape-8_t;" />
<path id="bee-Combined-Shape-Copy-2" d="M97.0055,15.3575C98.9584,15.3575,100.848,15.6287,102.639,16.1355C100.473,17.8939,99.0889,20.5773,99.0889,23.5838C99.0889,28.8795,103.382,33.1725,108.678,33.1725C111.897,33.1725,114.746,31.5859,116.485,29.152C117.238,31.2948,117.648,33.5995,117.648,36L117.648,37.4713C117.648,48.8718,108.406,58.1138,97.0055,58.1138L95.5342,58.1138C84.1337,58.1138,74.8917,48.8718,74.8917,37.4713L74.8917,36C74.8917,24.5995,84.1337,15.3575,95.5342,15.3575L97.0055,15.3575Z" fill="#283138" transform="translate(96.2699,36.7356) translate(-96.2699,-36.7356)" style="animation: 3.9s linear infinite both bee-Combined-Shape-Copy-2_t;" />
</g>
<path id="bee-Path-11" stroke="#336775" stroke-width="5" d="M129.5,43.5L119.5,43.5" transform="translate(124.5,43.5) translate(-124.5,-43.5)" />
<g id="bee-eye-covers" transform="translate(125.475,15.1468) scale(0.8,0) translate(-65.4172,0)" style="animation: 3.9s linear infinite both bee-eye-covers_t;">
<path fill="#ffa521" stroke="none" d="M30.5342,0C30.5566,2.49713,-30.5104,1.82316,-30.5342,0C-30.709,-13.3918,-16.8636,-24.25,0,-24.25C16.8636,-24.25,30.414,-13.3924,30.5342,0Z" transform="translate(30.535,0) scale(1,1.3) translate(0.000815516,24.25)" />
<path fill="#ffa521" stroke="none" d="M30.5342,0C30.5566,2.49713,-30.5104,1.82316,-30.5342,0C-30.709,-13.3918,-16.8636,-24.25,0,-24.25C16.8636,-24.25,30.414,-13.3924,30.5342,0Z" transform="translate(100.299,0) scale(1,1.3) translate(0.000815516,24.25)" />
</g>
<g id="bee-eye-covers-2" transform="translate(125.475,79) rotate(180) scale(0.7,0) translate(-65.4172,0)" style="animation: 3.9s linear infinite both bee-eye-covers-2_t;">
<path fill="#ffa521" stroke="none" d="M30.5342,0C30.5566,2.49713,-30.5104,1.82316,-30.5342,0C-30.709,-13.3918,-16.8636,-24.25,0,-24.25C16.8636,-24.25,30.414,-13.3924,30.5342,0Z" transform="translate(30.535,0) scale(1,1.3) translate(0.000815516,24.25)" />
<path fill="#ffa521" stroke="none" d="M30.5342,0C30.5566,2.49713,-30.5104,1.82316,-30.5342,0C-30.709,-13.3918,-16.8636,-24.25,0,-24.25C16.8636,-24.25,30.414,-13.3924,30.5342,0Z" transform="translate(100.299,0) scale(1,1.3) translate(0.000815516,24.25)" />
</g>
<ellipse id="bee-Oval-4" stroke="#336775" stroke-width="6" rx="40.5" ry="40.5" transform="translate(79.5,43.5)" />
<ellipse id="bee-Oval-Copy-4" stroke="#336775" stroke-width="6" rx="40.5" ry="40.5" transform="translate(169.5,43.5)" />
<path id="bee-Path-4" d="M121.068,70C122.115,71,123.258,71.5,124.5,71.5C125.742,71.5,127.052,71,128.432,70" stroke="#313942" stroke-width="4" stroke-linecap="round" transform="translate(124.75,70.75) translate(-124.75,-70.75)" />
<path id="bee-Path-5" d="M39,43.5L21.0069,43.5C18.024,43.5,15.0628,44.0072,12.25,45C9.47075,45.9809,7.01648,47.7105,5.15796,49.9979L4.75,50.5C2.61996,53.1216,1.20802,56.2519,0.652707,59.5838L0,63.5L0,63.5" stroke="#336775" stroke-width="5" stroke-linecap="round" transform="translate(19.5,53.5) translate(-19.5,-53.5)" />
</g>
</g>
</g>
</g>
<g id="bee-leg-m-l" transform="translate(212.5,329.75) translate(-9.5,-54.25)">
<path id="bee-leg2" d="M9,98.5L14,98.5C16.7614,98.5,19,100.739,19,103.5C19,106.261,16.7614,108.5,14,108.5L0,108.5L0,108.5L0,107.5C0,102.529,4.02944,98.5,9,98.5Z" fill="#283138" transform="translate(9.5,103.5) translate(-9.5,-103.5)" />
</g>
</g>
</g>
</g>
<path d="M-1.66219,-1.66219L-1.66219,32.6228L-1.66219,72.6228" stroke="#283138" fill="none" stroke-width="5" stroke-linecap="round" transform="translate(197.506,293.347)" style="animation: 3.9s linear infinite both bee-a4_d;" />
<path d="M0,0L0,-65.1141L0,-99.2912" stroke="#283138" fill="none" stroke-width="5" stroke-linecap="round" transform="translate(215.806,362.47)" style="animation: 3.9s linear infinite both bee-a5_d;" />
<path d="M0,0L0.150197,-42.3555L0.25,-70.5" stroke="#283138" fill="none" stroke-width="5" stroke-linecap="round" transform="translate(231.594,362.47)" style="animation: 3.9s linear infinite both bee-a6_d;" />
<g transform="translate(258.037,321.72) translate(-9.5,-50.75)">
<path d="M0,0L0,-61.2126L0,-104.133" stroke="#283138" fill="none" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.17979,95)" style="animation: 3.9s linear infinite both bee-a7_d;" />
<g transform="translate(0.5,96.5)" style="animation: 3.9s linear infinite both bee-a8_t;">
<path id="bee-leg4" d="M9,100L14,100C16.7614,100,19,102.239,19,105C19,107.761,16.7614,110,14,110L0,110L0,110L0,109C0,104.029,4.02944,100,9,100Z" fill="#283138" transform="translate(0,0) scale(-1,1) translate(-19,-105)" style="animation: 3.9s linear infinite both bee-leg4_t;" />
</g>
</g>
</g>
</svg>
</div>
<div class="result"></div>
<button class="restart">다시 도전하기</button>
</div>
</div>
</div>
<!-- 소스보기 -->
<div class="sourceCont">
<div class="sourceCont_header">
<p>SOURCE VIEW</p>
<img src="../assets/music_img/logo_moon.png" alt="">
</div>
<iframe class="sourceOpen" src="https://github1s.com/kimsangjunv1/coding/blob/main/javascript/effect/gameEffect01.html" frameborder="0"></iframe>
</div>
<main id="main">
<div class="icon_box">
<div class="icon1">
<div class="cont">
<img src="../../assets/img/iconGame01.png" alt="유지">
<span>게임 01</span>
</div>
</div>
<div class="icon2">
<div class="cont">
<img src="../../assets/img/iconGame02.png" alt="유지">
<span>게임 02</span>
</div>
</div>
<div class="icon3">
<div class="cont">
<img src="../../assets/img/iconGame03.png" alt="유지">
<span>게임 03</span>
</div>
</div>
<div class="icon4">
<div class="cont">
<img src="../../assets/img/iconGame04.png" alt="유지">
<span>뮤직</span>
</div>
</div>
<div class="icon5">
<div class="cont">
<img src="../../assets/img/iconGame05.png" alt="유지">
<span>소스 보기</span>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<div class="agent">1</div>
</footer>
<!-- footer -->
<!-- 뮤직 플레이어 -->
<div class="music__wrap">
<div class="music__inner">
<div class="music__header">
<img src="../assets/music_img/logo_sound.png" alt="">
<h2>Music player</h2>
<div>x</div>
</div>
<div class="music__contents">
<div class="music__view">
<div class="img">
<img src="../assets/music_img/music_view03.png" alt="">
<img class="two" src="../assets/music_img/music_view03.png" alt="">
</div>
<div class="title">
<h3>Average - Patrick Patrikios</h3>
<p>youtuber music</p>
</div>
</div>
<div class="music__control">
<div class="progress">
<div class="bar">
<audio id="main-audio" src="../assets/music/music_audio01.mp3"></audio>
<audio id="main-audio" src="../assets/music/music_audio02.mp3"></audio>
</div>
<div class="timer">
<span class="current">0:00</span>
<span class="duration">4:00</span>
</div>
</div>
<div class="volumeCont">
<input type="range" id="volume-control" min="0" max="10" value="5" step="0.1">
</div>
<div class="control">
<i title="전체 반복" class="repeat" id="control-repeat"></i>
<i title="이전곡 재생" class="prev" id="control-prev"></i>
<i title="재생" class="play" id="control-play"></i>
<i title="다음곡 재생" class="next" id="control-next"></i>
<i title="재생 목록" class="list" id="control-list"></i>
<!-- <i title="한곡 반복" class="repeat_one"></i>-->
<!-- <i title="랜덤 반복" class="shuffle"></i> -->
<!-- <i title="정지" class="stop"></i> -->
</div>
</div>
</div>
<div class="music__footer">
<div class="music__list">
<h3><span class="list"></span>뮤직 리스트 <a href="#" class="close"></a></h3>
<ul>
</ul>
</div>
</div>
</div>
</div>
<!-- //뮤직 플레이어 -->
CSS 코드 : 애니메이션
총 5가지(opacity/reveal/reveal-RTL/reveal-TTB/reveal-BTT)의 애니메이션을 사용하였습니다.
또한 각각의 애니메이션은 속성을 변경해줌으로써 0%~100%까지의 크기 변경 과정을 보여주도록 하였으며
일부 속성은 기본값을 사용하기 위해 'auto'를 지정해 변경값을 초기화 해주었습니다 👀
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'galmuri11';
cursor: none;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
}
#header{
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
background-color: #272949ad;
backdrop-filter: blur(5px);
height: 40px;
}
#header img{
width: 15px;
filter: invert(1);
display: inline;
margin-right: 5px;
}
#header h1{
display: inline;
font-size: 20px;
color: #fff;
padding: 5px 0;
}
#header .time{
color: #fff;
}
.header_icon_cont{
display: flex;
}
.header_icon_cont img{
width: 16px !important;
height: 15px;
margin-right: 23px !important;
}
.header_icon_cont img:nth-child(4){
width: 20px !important;
}
.header_icon_cont img:nth-child(7){
width: 20px !important;
}
#footer{
position: fixed;
left: 0;
bottom: 0;
background-color: #272949ad;
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
width: 100%;
color: #fff;
text-align: center;
}
#footer .agent{
}
.mac #footer{}
.window #footer{
color: #58e54e;
}
.icon1{
right: 30px;
top: 60px;
}
.icon2{
right: 30px;
top: 150px;
}
.icon3{
right: 30px;
top: 240px;
}
.icon4{
right: 30px;
top: 360px;
}
.icon5{
right: 30px;
top: 450px;
}
.icon1,
.icon2,
.icon3,
.icon4,
.icon5{
position: absolute;
width: 54px;
}
.icon1 img,
.icon2 img,
.icon3 img,
.icon4 img,
.icon5 img{
width: 54px;
z-index: -1;
}
.icon1 span,
.icon2 span,
.icon3 span,
.icon4 span,
.icon5 span{
/* display: block; */
background: #00000080;
color: #fff;
font-size: 12px;
padding: 2px;
white-space: nowrap;
/* word-break: keep-all; */
}
.ui-draggable-dragging img{
border: 1px dashed rgb(255, 255, 255) !important;
/* padding: 10px; */
}
.mouse__cursor{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 73px;
z-index: 100;
background-image: url(../../../assets/img/mouseCursor.png);
background-repeat: no-repeat;
background-size: 20px;
user-select: none;
pointer-events: none;
}
.mouse__cursor img{
transform: scale(0.5);
}
.music__header div:last-child{
border: 1px solid #fff;
padding: 5px 10px;
}
음악관련 CSS도 넣어줍니다 🙄
.music__wrap {
display: none;
}
.music__inner {
width: 450px;
background-color: #351e54e0;
backdrop-filter: blur(8px);
position: absolute;
right: 100px;
top: 100px;
padding: 26px;
/* padding-top: 10px; */
box-shadow: 0px 5px 26px 5px #300e504a;
overflow: hidden;
}
.music__inner::before{
content: '';
background: #ffffff6b;
width: 74px;
height: 2px;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0);
}
.music__header {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.music__header img{
width: 20px;
filter: invert(1);
transition: transform 0.25s;
}
.music__header h2 {
font-size: 14px;
}
.music__contents {
/* background: #dfe0e6; */
width: 100%;
/* margin-bottom: 20px; */
}
.music__view {
display: flex;
padding: 40px 0;
justify-content: space-around;
}
.music__view .img {
width: 25%;
}
.music__view .img img {
width: 100%;
}
img.two{
position: absolute;
top: -70px;
left: 0;
/* width: 100%; */
height: 150%;
object-fit: cover;
filter: blur(12px);
z-index: -6;
opacity: 0.4;
}
.music__view .title {
width: 65%;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
}
.music__view .title h3 {
margin-bottom: 5px;
font-size: 25px;
line-height: 1.2;
color: #fff;
}
.music__view .title p {
color: #ffffff8d;
}
.music__control {
/* background: #666; */
width: 100%;
height: 100px;
/* padding: 20px; */
/* padding-top: 10px; */
}
.music__control .progress {
width: 100%;
height: 10px;
/* background: #000; */
border-radius: 5px;
position: relative;
}
.music__control .progress::after{
position: absolute;
top: 2px;
left: 0px;
/* transform: translate(0,-50%); */
height: 1px;
width: 100%;
content: '';
background: rgba(255, 255, 255, 0.18);
}
.music__control .progress .bar {
width: 0;
height: 4px;
background: #fff;
/* border-radius: 5px; */
z-index: 1;
position: relative;
/* overflow: hidden; */
}
.music__control .progress .bar::after{
content: '';
width: 1px;
height: 1px;
background-color: rgba(255, 255, 255, 0);
position: absolute;
right: 3px;
top: 50%;
transform: translate(0,-50%);
box-shadow:0px 0px 60px 10px #fff;
border-radius: 50px;
}
.music__control .progress .bar::before{
content: '';
width: 2px;
height: 10px;
background-color: rgb(255 255 255 / 30%);
position: absolute;
right: -1px;
top: -15px;
}
.music__control .progress .timer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.music__control .progress .timer span:nth-child(1){
color: #c9ff00;
}
.music__control .progress .timer span{
color: #fff;
}
.music__control .control {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.music__control .control i{
filter: invert(1);
}
.music__control .control .repeat {
width: 20px;
height: 25px;
background-image: url(../music_img/MusicRepeatBtn.png);
background-size: cover;
}
.music__control .control .repeat_one {
width: 20px;
height: 25px;
background-image: url(../music_img/MusicRepeatOneBtn.png);
background-size: cover;
}
.music__control .control .shuffle {
width: 20px;
height: 20px;
transform: scale(1.5);
background-image: url(../music_img/MusicShuffleBtn.png);
background-size: cover;
}
.music__control .control .prev {
width: 24px;
height: 24px;
background-image: url(../music_img/MusicPrevBtn.png);
background-size: cover;
}
.music__control .control .next {
width: 24px;
height: 24px;
background-image: url(../music_img/MusicNextBtn.png);
background-size: cover;
}
.music__control .control .play {
width: 24px;
height: 24px;
background-image: url(../music_img/MusicPlayBtn.png);
background-size: cover;
transform: scale(1.8);
}
.music__control .control .stop {
width: 24px;
height: 24px;
background-image: url(../music_img/MusicStopBtn.png);
background-size: cover;
transform: scale(1.5);
}
.music__control .control .list {
width: 20px;
height: 20px;
background-image: url(../music_img/MusicListBtn.png);
background-size: cover;
}
.music__footer {
background: #fff;
}
.music__list{
padding: 20px;
box-shadow: 0px 15px 20px 10px #1a1c3e85;
display: none;
}
.music__list h3{
font-size: 20px;
border-bottom: 1px solid rgb(22 2 121 / 28%);
padding-bottom: 15px;
}
.music__list h3 .list{
display: inline-block;
width: 15px;
height: 13px;
background-image: url(../music_img/MusicControl.png);
background-size: cover;
margin-right: 5px;
}
.music__list h3 .close{
display: inline-block;
width: 15px;
height: 15px;
background-image: url(../music_img/MusicListCloseBtn.png);
background-size: cover;
margin-right: 5px;
float: right;
}
.music__list h3 .close span{
width: 40px;
height: 40px;
display: inline-block;
background: #000;
margin: 5px;
}
.music__list ul{
max-height: 400px;
overflow-y: scroll;
}
.music__list ul::-webkit-scrollbar-thumb{
background-color: #6808ca;
}
.music__list ul::-webkit-scrollbar{
background: transparent;
width: 3px;
}
.music__list li{
border-bottom: 1px solid #00000017;
list-style: none;
position: relative;
padding: 15px 0;
}
.music__list li.playing{
background: #e9e9f0;
}
.music__list strong{
display: block;
font-size: 20px;
border-bottom: 4px;
margin-bottom: 10px;
text-overflow: ellipsis;
overflow: hidden;
width: 289px;
white-space: nowrap;
color: #41057e;
}
.music__list li em{
font-style: normal;
color: #5b5a7284;
}
.music__list li span{
position: absolute;
right: 10px;
top: 50%;
transform: translate(0, -50%);
color: #5b5a7284;
font-size: 14px;
}
.sourceCont{
display: none;
width: 50vw;
height: 50vh;
position: absolute;
top: 25%;
left: 25%;
z-index: 11;
}
.sourceCont_header{
background: rgba(71, 42, 177, 0.796);
width: 100%;
height: 40px;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
display: flex;
justify-content: space-between;
padding: 0 20px;
align-items: center;
color: #fff;
}
.sourceCont_header img{
filter: invert(1);
width: 22px;
}
.sourceOpen{
width: 100%;
height: 100%;
}
.volumeCont{
position: absolute;
background: #342c4a8f;
padding: 10px 10px 6px 10px;
z-index: 1000;
backdrop-filter: blur(19px);
top: 23px;
left: 50%;
transform: translate(-50%, -100px);
border: 1px solid #ffffff2b;
/* display: none; */
transition: transform 0.25s;
}
.volumeCont::after{content: '0'; left: 10px;}
.volumeCont::before{content: '100'; right: 10px;}
.volumeCont::before,
.volumeCont::after{
/* font-family: 'gothic'; */
/* text-align: center; */
/* width: 100%; */
font-size: 12px;
color: rgb(255, 255, 255);
font-weight: lighter;
position: absolute;
top: 40px;
}
/* input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 1px;
background: #ffffff45;
cursor: pointer;
transition: background 450ms ease-in;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background: #fff;
border: 1px solid white;
cursor: pointer;
position: relative;
}
input[type=range]::-webkit-slider-thumb::before{
content: '';
background: red;
width: 1px;
height: 1px;
}
input[type=range]::-webkit-slider-runnable-track{
height:1px;
background: rgb(85, 35, 235);
cursor: pointer;
} */
/* 슬라이드 바 */
input[type=range] {
-webkit-appearance: none;
overflow: hidden;
width: 100%;
height: 10px;
background: transparent;
cursor: pointer;
background: #afa2d542;
border-radius: 0; /* iOS */
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 10px;
background: rgb(255, 255, 255);
box-shadow: -100vw 0 0 100vw rgb(255, 255, 255);
border: 0.1px solid rgb(169, 170, 170);
cursor: pointer;
}
JS 코드_01 : jquery를 통한 아이콘 draggable 구현
1. jquery라이브러리를 통해 바탕화면 아이콘을 드래그 하는듯한 효과를 구현합니다
2. 사용 방법은 클래스 또는 아이디 값을 선택 후 .draggable만 해주면 되는 간단한 방식입니다.
// 각 아이콘을 움직일 수 있게 Jquery 라이브러리 사용
$(".icon1").draggable({
drag: function () {
$(".mouse__cursor img").attr("src", "../../assets/img/mouseCursor.png")
},
});
$(".icon2").draggable({
drag: function () {
$(".mouse__cursor img").attr("src", "../../assets/img/mouseCursor02.png")
},
});
$(".icon3").draggable({
drag: function () {
$(".mouse__cursor img").attr("src", "../../assets/img/mouseCursor03.png")
},
});
$(".icon4").draggable({
drag: function () {
$(".mouse__cursor img").attr("src", "../../assets/img/mouseCursor04.png")
},
});
$(".icon5").draggable({
drag: function () {
$(".mouse__cursor img").attr("src", "../../assets/img/mouseCursor05.png")
},
});
$( ".music__inner" ).draggable();
$( ".sourceCont" ).draggable();
$( ".sourceContWord" ).draggable();
JS 코드_02 : get[FullYear/Month/date]를 통한 시간 구하기
1. 상단의 시계를 구현하기 위해 get[FullYear/Month/date] 총 3가지를 사용합니다
2. javascript의 세는 방식(0부터 시작)으로 인해 getMonth에는 +1을 해주어 정확히 맞추었습니다.
3. 00시 00분 과 같은 앞에 0이 붙는 형식을 구현하기 위해 get[Hours/Minutes/Seconds]나누기 60으로 구한 각각의 시간의 값이
4. 10 이하이면 앞에 0이 붙도록 `0${header[Min/Hour/Sec]}`를 사용해 붙여주었습니다.
5. 오전 오후를 구현하기 위해 headerHour이 12이상이 되었을시를 기준으로 if를 사용하여 오후/오전을 붙여주었습니다.
//헤더 시계
function printTime() {
const clock = document.querySelector(".time");
const now = new Date();
const nowTime =now.getFullYear() + "." + (now.getMonth() + 1) + "." + now.getDate() + " ";
//진행시간
let headerHour = Math.floor(now.getHours() % 60);
let headerMin = Math.floor(now.getMinutes() % 60);
let headerSec = Math.floor(now.getSeconds() % 60);
let headerText = "";
if (headerHour >= 12){ headerText = "오후"} else {headerText = "오전"}
if (headerHour < 10) headerHour = `0${headerHour}`;
if (headerMin < 10) headerMin = `0${headerMin}`;
if (headerSec < 10) headerSec = `0${headerSec}`;
clock.innerText = nowTime+headerText+` ${headerHour}:${headerMin}:${headerSec}`;
setTimeout("printTime()", 1000);
}
JS 코드_03 : OS화면에 맞는 정보 가져오기
1. 각 OS에 맞는 화면 출력을 대비를 위해 navigator.userAgent.를 통해 정보를 가져온 후
2. 다중 if를 통해 상황에 맞게 출력하였습니다.
function printAgent() {
const agent = document.querySelector(".agent");
const os = navigator.userAgent.toLocaleLowerCase();
// agent.innerText = os;
if (os.indexOf("window") == 0) {
agent.innerText = "현재 윈도우를 사용하고, 화면 크기는 " + screen.width + "x" + screen.height + "입니다.";
document.querySelector("body").classList.add("window");
} else if (os.indexOf("macintosh") >= 0) {
agent.innerText = "현재 맥을 사용중입니다, 화면 크기는 " + screen.width + "x" + screen.height + "입니다.";
document.querySelector("body").classList.add("mac");
} else if (os.indexOf("iphone") >= 0) {
agent.innerText = "현재 아이폰을 사용중입니다, 화면 크기는 " + screen.width + "x" + screen.height + "입니다.";
document.querySelector("body").classList.add("iphone");
} else if (os.indexOf("android") >= 0) {
agent.innerText = "현재 안드로이드를 사용중입니다, 화면 크기는 " + screen.width + "x" + screen.height + "입니다.";
document.querySelector("body").classList.add("android");
}
}
window.onload = function () {
printTime();
printAgent();
}
JS 코드_04 : 뮤직 플레이어 구현
1. 자세한 설명은 각 구간의 주석을 통해 설명해두었습니다
2. 배열 속 객체를 통해 각각 음악의 썸네일 이미지, 음악 파일 이름 및 세부사항을 적어두었습니다
3. play()/pause()를 통해 음악 재생,정지를 제어합니다
4. 불러들인 오디오의 길이 및 데이터 정보를 가져오기 위해 addEventListener의 loadeddata를 사용해 뮤직의 트랙 길이를 가져오고
timeupdate,duration등의 방법을 사용해 뮤직플레이어를 구현합니다.
5. 뮤직리스트를 클릭하면 각각 음악을 실행/정지 하는 함수를 불러와 각각의 이벤트를 실행시켜줍니다
const allMusic = [{
name: "1. Merry Go Round",
artist: "hisaishi Joe",
img: "music_view01",
audio: "music_audio01"
},
{
name: "2. One Summer's Day",
artist: "hisaishi Joe",
img: "music_view02",
audio: "music_audio02"
},
{
name: "3. Hello Mr's Lawrence",
artist: "sakamoto ryuichi",
img: "music_view03",
audio: "music_audio03"
},
{
name: "4. il porco rosso - By Gone days",
artist: "hisaishi Joe",
img: "music_view04",
audio: "music_audio04"
},
{
name: "5. Ocean Waves",
artist: "hisaishi Joe",
img: "music_view05",
audio: "music_audio05"
},
{
name: "6. American Cliche",
artist: "Tony Bennetts",
img: "music_view06",
audio: "music_audio06"
},
{
name: "7. The Sixth Station",
artist: "hisaishi Joe",
img: "music_view07",
audio: "music_audio07"
},
{
name: "8. In the Balancewith Lyrics",
artist: "FF14",
img: "music_view08",
audio: "music_audio08"
},
{
name: "9. SPOILERS To the Edgewith Lyrics",
artist: "FF14",
img: "music_view09",
audio: "music_audio09"
},
{
name: "10. Suzakus",
artist: "FF14",
img: "music_view10",
audio: "music_audio10"
}
]
const musicWrap = document.querySelector(".music__wrap");
const musicView = musicWrap.querySelector(".music__view .img img");
const musicView2 = musicWrap.querySelector(".music__view .img .two");
const musicName = musicWrap.querySelector(".music__view .title h3");
const musicArtist = musicWrap.querySelector(".music__view .title p");
const musicAudio = musicWrap.querySelector("#main-audio");
const musicPlayer2 = musicWrap.querySelector("#control-play");
const musicPrevBtn = musicWrap.querySelector("#control-prev");
const musicNextBtn = musicWrap.querySelector("#control-next");
const musicProgress = musicWrap.querySelector(".progress");
const musicProgressBar = musicWrap.querySelector(".progress .bar");
const musicProgressCurrent = musicWrap.querySelector(".progress .timer .current");
const musicProgressDuration = musicWrap.querySelector(".progress .timer .duration");
const musicRepeat = musicWrap.querySelector("#control-repeat");
const musicListBtn = musicWrap.querySelector("#control-list");
const musicList = musicWrap.querySelector(".music__list");
const musicListUl = musicWrap.querySelector(".music__list ul");
let musicIndex = 1;
//음악 재생
function loadMusic(num) {
musicName.innerText = allMusic[num - 1].name; //뮤직 이름 로드
musicArtist.innerText = allMusic[num - 1].artist; //뮤직 아티스트 로드
musicView.src = `../assets/music_img/${allMusic[num-1].img}.png`; //뮤직 이미지 로드
musicView2.src = `../assets/music_img/${allMusic[num-1].img}.png`; //뮤직 이미지 alt 로드
musicView.alt = allMusic[num - 1].name;
musicAudio.src = `../assets/music/${allMusic[num-1].audio}.mp3`; //뮤직 로드
}
//재생버튼
function playMusic() {
musicWrap.classList.add("pause");
musicPlayer2.setAttribute("title", "정지");
musicPlayer2.setAttribute("class", "stop");
musicAudio.play();
}
//정지버튼
function pauseMusic() {
musicWrap.classList.remove("pause");
musicPlayer2.setAttribute("title", "재생");
musicPlayer2.setAttribute("class", "play");
musicAudio.pause();
}
//이전 곡 듣기 버튼
function prevMusic() {
musicIndex == 1 ? musicIndex = allMusic.length : musicIndex--;
loadMusic(musicIndex);
playMusic();
playListMusic();
}
//다음 곡 듣기 버튼
function nextMusic() {
musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++;
loadMusic(musicIndex);
playMusic();
playListMusic();
}
//뮤직 진행바
musicAudio.addEventListener("timeupdate", e => {
const currentTime = e.target.currentTime;
// console.log(currentTime); 시간이 지날 수록 증가(현재 진행되는 시간)
const duration = e.target.duration;
// console.log(duration); 전체 갯수(오디오의 총 길이)
let progressWidth = (currentTime / duration) * 100 //전체 길이에서 현재 진행되는 시간을 백분위로 나눔
musicProgressBar.style.width = `${progressWidth}%`
//전체 시간
musicAudio.addEventListener("loadeddata", () => {
let audioDuration = musicAudio.duration;
let totalMin = Math.floor(audioDuration / 60); //전체 시간을 분단위로 쪼개줌
let totalSec = Math.floor(audioDuration % 60); //남은 초를 저장
if (totalSec < 10) totalSec = `0${totalSec}`; //초가 한 자릿수일때 앞에 0을 붙임
musicProgressDuration.textContent = `${totalMin}:${totalSec}`; //완성된 시간 문자열을 출력
})
//진행시간
let currentMin = Math.floor(currentTime / 60);
let currentSec = Math.floor(currentTime % 60);
if (currentSec < 10) currentSec = `0${currentSec}`;
musicProgressCurrent.innerText = `${currentMin}:${currentSec}`;
})
//진행버튼 클릭
musicProgress.addEventListener("click", (e) => {
let progressWidth = musicProgress.clientWidth; //진행바 전체 길이
let clickedOffsetx = e.offsetX; //진행바 기준으로 측정되는 X좌표
let songDuration = musicAudio.duration; //오디오 전체 길이
musicAudio.currentTime = (clickedOffsetx / progressWidth) * songDuration; //백분위로 나눈 숫자에 다시 전체 길이를 곱해서 현재 재생값으로 바꿈
})
//반복 버튼 클릭
musicRepeat.addEventListener("click", ()=>{
let getAttr = musicRepeat.getAttribute("class");
switch(getAttr){
case "repeat" :
musicRepeat.setAttribute("class", "repeat_one");
musicRepeat.setAttribute("title", "한곡 반복");
break;
case "repeat_one" :
musicRepeat.setAttribute("class", "shuffle");
musicRepeat.setAttribute("title", "랜덤 반복");
break;
case "shuffle" :
musicRepeat.setAttribute("class", "repeat");
musicRepeat.setAttribute("title", "전체 반복");
break;
}
})
// 오디오가 끝나면
musicAudio.addEventListener("ended",()=>{
let getAttr = musicRepeat.getAttribute("class");
switch(getAttr){
case "repeat":
nextMusic();
break;
case "repeat_one":
playMusic();
break;
case "shuffle":
let randIndex = Math.floor(Math.random() * allMusic.length + 1); //랜덤 인덱스 생성
do{
randomIndex = Math.floor(Math.random() * allMusic.length + 1);
} while (musicIndex == randomIndex)
musicIndex = randomIndex; //현재 인덱스를 랜덤 인덱스 변경
loadMusic(musicIndex); //랜덤 인덱스가 반영된 현재 인덱스 값으로 음악을 다시 로드
playMusic(); // 로드한 음악을 재생
break;
}
})
//플레이 버튼 클릭
musicPlayer2.addEventListener("click", () => {
const isMusicPauesd = musicWrap.classList.contains("pause"); //음악 재생중
isMusicPauesd ? pauseMusic() : playMusic();
})
//이전 버튼 클릭
musicPrevBtn.addEventListener("click", () => {
prevMusic();
})
musicNextBtn.addEventListener("click", () => {
nextMusic();
})
//뮤직 리스트 버튼
musicListBtn.addEventListener("click",()=>{
musicList.classList.add("show")
})
// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
<li data-index="${i+1}">
<strong>${allMusic[i].name}</strong>
<em>${allMusic[i].artist}</em>
<audio class="${allMusic[i].audio}" src="../assets/music/${allMusic[i].audio}.mp3"></audio>
<span class="audio-duration" id="${allMusic[i].audio}">재생시간</span>
</li>
`;
// musicListUl.innerHTML += li;
musicListUl.insertAdjacentHTML("beforeend", li);
// 리스트에 음악 시간 불러오기
let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`); //리스트에서 시간을 표시할 선택자를 가져옴
let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`); //리스트에서 오디오를 가져옴
liAudio.addEventListener("loadeddata", ()=>{
let audioDuration = liAudio.duration; //오디오 전체 길이
let totalMin = Math.floor(audioDuration / 60); //전체 길이르리 분 단위 쪼갬
let totalSec = Math.floor(audioDuration % 60); //초 계산
if(totalSec < 10) totalSec = `0${totalSec}`; //앞 자리에 0 추가
liAudioDuration.innerText = `${totalMin}:${totalSec}`; //문자열 출력
liAudioDuration.setAttribute("data-duration", `${totalMin}:${totalSec}`); //속성의 오디오 길이 기록
})
}
// 뮤직 리스트를 클릭하면 재생
function playListMusic(){
const musicListAll = musicListUl.querySelectorAll("li");
for(let i = 0; i < musicListAll.length; i++){
let audioTag = musicListAll[i].querySelector(".audio-duration");
if(musicListAll[i].classList.contains("playing")){ //클래스에 playing 클래스가 포함되어 있다면
musicListAll[i].classList.remove("playing"); //Playing 클래스 삭제
let adDuration = audioTag.getAttribute("data-duration"); //오디오 길이 값 가져오기
audioTag.innerText = adDuration; //오디오 길이 값 추가
}
if(musicListAll[i].getAttribute("data-index")==musicIndex){ //현재 뮤직인덱스랑 리스트 인덱스 값이 같으면
musicListAll[i].classList.add("playing"); //클래스 playing 추가
audioTag.innerText = "재생중"; //재생중일 경우 재생중 멘트 추가
}
musicListAll[i].setAttribute("onclick", "clicked(this)");
}
}
// playListMusic();
//뮤직 리스트를 클릭하면..
function clicked(el){
let getLiIndex = el.getAttribute("data-index"); // 클릭한 데이터 값
musicIndex = getLiIndex; // 클릭한 인덱스 값을 뮤직 인덱스에 저장
loadMusic(musicIndex); // 해당 인덱스 뮤직 로드
playMusic(); // 음악 재생
playListMusic(); // 음악 리스트 업데이트
}
window.addEventListener("load", () => {
loadMusic(musicIndex); //음악 재생
playListMusic(); //리스트 초기화
})
결과
느무느무 믓즈인~~~~~ 게임 이펙트 01번 완승~~~💃🏻
728x90
반응형
'JS 응용하기' 카테고리의 다른 글
| 서치 이펙트 07 (2) | 2022.10.21 |
|---|---|
| 슬라이드 이펙트 06 (1) | 2022.10.21 |
| 슬라이드 이펙트 07 (2) | 2022.10.21 |
| 패럴렉스 이펙트_07 : 각 문장에 딜레이를 걸어 효과주기 🐢 (7) | 2022.10.07 |
| 패럴렉스 이펙트_06 : 각 글자마다 효과주기 ✨ (1) | 2022.10.07 |
댓글