Found 23 repositories(showing 23)
maulanausman29
<!doctype html> <html> <head> <title>Music Player MP.3</title> </head> <body> <style> #maulanamusicplayername { color: rgba(0, 0, 0, 0.000000000001); font-size: 35px; margin-top: 5px; font-style: italic; } .search-icon { font-size: 15px; margin: 15px 15px 10px 25px; border: 0px solid black; border-radius: 20%; padding: 5px 5px 5px 5px; } .back-icon { font-size: 20px; margin: 0px 0px 0px 0px; width: 55px; border: 0px solid white; border-width: 5px 0px 5px 5px; border-radius: 0%; padding: 5px; display: block; color: grey; background-color: #000; height: 55px; box-sizing: border-box; } .material-icons { border: 0px solid #504a6b; font-size: 20px; box-type: borderbox; font-weight: 500; padding: auto auto auto auto; margin: auto 15px auto 15px; text-align: left; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: #000; background-size: cover; background-position: center; min-height: 100vh; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .container { padding: 20px; box-sizing: border-box; width: 100%; min-height: 100vh; padding-bottom: 100px; background: #000; position: relative; z-index: 1; /* box-shadow: 0 20px 20px #0000ff;*/ display:flex; flex-direction:column; } .card { background: #000; width: 100%; display: flex; border: 5px solid #fff; justify-content: space-between; border-radius: 30px; box-shadow: 3px 4px 12px 8px #0000ff; overflow: hidden; margin-bottom: 50px; } .title { font-size: 25px; margin: 25px 0 10px 0px; width: 100%; word-break: nowrap; overflow: hidden; white-space: nowrap; text-overflow: handlee; text-align: center; color: white; } .author { margin: 15px 0 0 0; color: #818181; width: 100%; word-break: nowrap; overflow: hidden; white-space: nowrap; text-overflow: handlee; font-size: 15px; text-align: center; text-decoration: none; } .panel { width: 100%; } .panel button { background: transparent; border: none; outline: none; color: #fff; text-align: center; } .playbtn { transform: scale(1); text-align: center; } .panel { transform: scale(1); text-align: center; } .control { margin: 40px 0 20px 0px; display: inline-block; width: 100%; } .banner { width: 100%; height: 200px; background-size: cover; background-position: center; z-index: 0; position: sticky; top: 0; display: flex; align-items: center; justify-content: center; } nav { width: 100%; height: 55px; display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 3; transition: 0.5s; } .icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; color: #fff; } .text { color: #fff; text-shadow: 0 0 25px #000; font-size: 35px; font-style: italic; font-weight: 1000; } .searchbar { width: 100%; height: 55px; background-color: transparent; display: flex; position: fixed; top: 0; right: -100%; z-index: 4; transition: 0.35s; } .icon { min-width: 55px; } .back { color: #000; } #inp { font-size: 16px; border: 0px solid #fff; border-width: 5px 5px 5px 0px; background-color: #000; outline: none; width: 100%; text-align: center; color: white; font-style: italic; font-weight: 600; } .loadingmusic { position: fixed; left: 0; bottom: 0; z-index: 7; background: #000; color: #ffff00; width: 100%; height: 30px; transform: scaleY(0); transition: 0.5s; transform-origin: bottom; overflow: hidden; display: flex; align-items: center; justify-content: center; } .loader div:nth-child(1) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; transition: 1s; } .loader div:nth-child(2) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.08s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.08s; -webkit-animation-iteration-count: infinite; transition: 2s; } .loader div:nth-child(3) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.16s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.16s; -webkit-animation-iteration-count: infinite; -webkit-transition: 3s; } .loader div:nth-child(4) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.24s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.24s; -webkit-animation-iteration-count: infinite; -webkit-transition: 4s; } .loader div:nth-child(5) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.32s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.32s; -webkit-animation-iteration-count: infinite; -webkit-transition: 5s; } .loader div:nth-child(6) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.40s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.40s; -webkit-animation-iteration-count: infinite; -webkit-transition: 6s; } .loader div:nth-child(7) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.48s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.48s; -webkit-animation-iteration-count: infinite; -webkit-transition: 7s; } .loader div:nth-child(8) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.56s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.56s; -webkit-animation-iteration-count: infinite; -webkit-transition: 0.1s; } .loader div:nth-child(9) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.64s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.64s; -webkit-animation-iteration-count: infinite; -webkit-transition: 9s; } .loader div:nth-child(10) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.72s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.72s; -webkit-animation-iteration-count: infinite; -webkit-transition: 10s; } .loader div:nth-child(11) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.80s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.80s; -webkit-animation-iteration-count: infinite; -webkit-transition: 1s; } .loader div:nth-child(12) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.88s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.88s; -webkit-animation-iteration-count: infinite; -webkit-transition: 12s; } .loader div:nth-child(13) { animation-name: colorchange; animation-duration: 1s; animation-delay: 0.96s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 0.96s; -webkit-animation-iteration-count: infinite; -webkit-transition: 13s; } .loader div:nth-child(14) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.04s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.04s; -webkit-animation-iteration-count: infinite; -webkit-transition: 14s; } .loader div:nth-child(15) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.12s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.12s; -webkit-animation-iteration-count: infinite; -webkit-transition: 15s; } .loader div:nth-child(16) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.20s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.20s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(17) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.28s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.28s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(18) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.36s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.36s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(19) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.44s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.44s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(20) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.52s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.52s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(21) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.60s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.60s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(22) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.68s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.68s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(23) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.76s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.76s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(24) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.84s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.84s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(25) { animation-name: colorchange; animation-duration: 1s; animation-delay: 1.92s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 1.92s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(26) { animation-name: colorchange; animation-duration: 1s; animation-delay: 2.00s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.00s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(27) { animation-name: colorchange; animation-duration: 1s; animation-delay: 2.08s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.08s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(28) { animation-name: colorchange; animation-duration: 1s; animation-delay: 2.16s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.16s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(29) { animation-name: colorchange; animation-duration: 1s; animation-delay: 2.24s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.24s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } .loader div:nth-child(30) { animation-name: colorchange; animation-duration: 1s; animation-delay: 2.32s; animation-iteration-count: infinite; -webkit-animation-name: colorchange; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.32s; -webkit-animation-iteration-count: infinite; -webkit-transition: 16s; } @keyframes colorchange { 0% { background: #fff; } 50% { background: #000; } 100% { background: #fff; } } @-webkit-keyframes colorchange { 0% { background: #fff; } 50% { background: #000; } 100% { background: #fff; } } .loader div { width: 20px; height: 20px; background: #000; border-radius: 50%; float: left; } .preloader { color: #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; background: #000; } .loaders { width: 35px; height: 35px; border-top: 4px solid #fff; border-bottom: 0px solid #fff; border-left: 0px solid #fff; border-right: 0px solid transparent; border-radius: 50%; animation: load 3s linear infinite; } @keyframes load { 0% { transform: rotate(0deg); } 100% { transform: rotate(3600deg); } } @-webkit-keyframes load { 0% { transform: rotate(0deg); } 100% { transform: rotate(3600deg); } } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #000; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; text-align: center; font-weight: 600; } .sidenav .a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 5px; right: 25px; font-size: 55px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } #asdf { hover: none; color: #fff; font-style: italic; } #asdfgh { color: "white"; filter: invert(100%); } #lkj{ height:70px; width:80%; font-size:20px; color: white; display:flex; justify-content:center; align-items:center; text-decoration:none; margin:auto 8% 50px 8%; box-shadow:10px 10px 10px 10px #000; } </style> <nav id="nav"> <div class="menu icon"> <span id="asdfgh" class:="menu-icon" style="font-size:25px;cursor:pointer" onclick="openNav()">☰</span> <i class="menu-icon"></i> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a id="asdf"> <h1>Anurag Shukla</h1> </a> <a class="a" href="https://www.instagram.com/myself_anurag_shukla" target="_blank">Instagram</a> <a class="a" href="https://www.twitter.com/mr_anuragshukla" target="_blank">Twitter</a> <a class="a" href="https://myselfanurag.wordpress.com" target="_blank">Website</a> <a class="a" href="https://anurag-shukla.000webhostapp.com/contact_form/formpage.html" target="_blank">Feedback</a> </div> </div> <div id="musicplayername"> <em> <strong> Music Player</strong></em> </div> <div onclick="opensearch()" class="icon"> <i class="search-icon"> <svg width="1.5em" height="2em" viewbox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://dl.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" /> <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" /> </svg> </i> </div> </nav> <div id="sbar" class="searchbar"> <div onclick="closesearch()" class="back icon"> <svg class="bi bi-arrow-left-circle-fill" width="2em" height="2em" viewbox="0 0 16 16" fill="white" xmlns="http://dl.w3.org/2000/svg"> <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.646 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L6.207 7.5H11a.5.5 0 0 1 0 1H6.207l2.147 2.146z" /> </svg> </div> <input oninput="search()" placeholder="Search Songs..." id="inp"> </div> <div class="banner"> <div id="text" class="text"> </div> </div> <div id="container" class="container"> </div> <div class="con"> <div id="loadmusic" class="loadingmusic"> <div class="loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div id="pre" class="preloader"> <div class="loaders"> </div> </div> <a id="lkj" class="card" href="javascript:jumpScroll()">Back to top</a> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var markup = function(id, name, author) { return ` <div class="card"> <div class="panel"> <div class="title"> <Strong> ${name}</strong> </div> <div class="author"> <em> ${author}</em> </div> <div class="control"> <button onclick="mint()" class="prev"> <svg class="material-icons" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-skip-backward-fill" fill="currentColor" xmlns="http://dl.w3.org/2000/svg"> <path fill-rule="evenodd" d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z"/> <path d="M.904 8.697l6.363 3.692c.54.313 1.233-.066 1.233-.697V4.308c0-.63-.692-1.01-1.233-.696L.904 7.304a.802.802 0 0 0 0 1.393z"/> <path d="M8.404 8.697l6.363 3.692c.54.313 1.233-.066 1.233-.697V4.308c0-.63-.693-1.01-1.233-.696L8.404 7.304a.802.802 0 0 0 0 1.393z"/> </svg> </button> <button id="playbtn${id}" onclick="play(this, ${id})" class="playbtn"> <svg class="material-icons" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" xmlns="http://dl.w3.org/2000/svg"> <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg> </button> <button onclick="maxt()" class="next"> <svg class="material-icons" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-skip-forward-fill" fill="currentColor" xmlns="http://dl.w3.org/2000/svg"> <path fill-rule="evenodd" d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"/> <path d="M7.596 8.697l-6.363 3.692C.693 12.702 0 12.322 0 11.692V4.308c0-.63.693-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> <path d="M15.096 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.693-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg> </button> </div> </div> <div class="image"> </div> `; }; var aud = new Audio(); var lastsong = null; var i = 0, text; text = " Music Player" function typing() { document.getElementById("text").innerHTML += text.charAt(i); i++; } setInterval(typing, 70); var songs = [{ name: "Travis scott x drake", artist: "travis scott,drake", song: "https://dl.dropbox.com/s/9agja2o0q5g1i8v/travis_Scott_x_drake.mp3", isPlay: false }, { name: "Hey DJ", artist: "CNCO,Meghan trainor ,Sean Paul", song: "https://dl.dropbox.com/s/184zy6eyakomh6b/Hey_DJ_remix.mp3", isPlay: false }, { name: "Subeme la radio english", artist: "Enrique Iglesias", song: "https://dl.dropbox.com/s/tzajtpppfbxvnvw/subeme_la_radio_english.mp3", isPlay: false }, { name: "Subeme La radio(English) ", artist: "Conor Maynard", song: "https://dl.dropbox.com/s/ntemy6ikka9xz24/Subeme_conor_maynard.mp3", isPlay: false }, { name: "Something Just Like This", artist: " The Chainsmokers", song: "https://dl.dropbox.com/s/t3sonwtkvue7ldj/Something_Just_Like_This.mp3", isPlay: false }, { name: "Shape Of You", artist: "Ed Sheeran", song: "https://dl.dropbox.com/s/fl4dp2n550fbn20/Shape_Of_You_ed_sheeran.mp3", isPlay: false }, { name: "Señorita", artist: "Camila cabello", song: "https://dl.dropbox.com/s/x0f2kzv2pvqy7ke/Se%C3%B1orita.mp3", isPlay: false }, { name: "See you again", artist: "Charlie puth,Wiz Khalifa", song: "https://dl.dropbox.com/s/irn0i84cqxlt3aw/see_you_again.mp3", isPlay: false }, { name: "Only Human", artist: "Jonas brothers", song: "https://dl.dropbox.com/s/bj8aqxfr9itby3l/Only_Human.mp3", isPlay: false }, { name: "On my way", artist: "Alan Walker", song: "https://dl.dropbox.com/s/0lk1rfbc74gyyd1/on_my_way.mp3", isPlay: false }, { name: "Not over you", artist: "Conor Maynard", song: "https://dl.dropbox.com/s/aydrgpu3wfac6gr/Not_over_you_conor_maynard.mp3", isPlay: false }, { name: "Memories", artist: "maroon 5", song: "https://dl.dropbox.com/s/5508apna98ufv6x/maroon_5_memories.mp3", isPlay: false }, { name: "Girls Like You", artist: "Maroon 5", song: "https://dl.dropbox.com/s/9n13m8cyl2is4in/Maroon_5_Girls_Like_You.mp3", isPlay: false }, { name: "Magenta Riddim", artist: "DJ snake", song: "https://dl.dropbox.com/s/dw54boj0fjpqecv/Magenta_Riddim.mp3", isPlay: false }, { name: "Lost Control ft. Sorana", artist: "Alan Walker", song: "https://dl.dropbox.com/s/6pq3b6hphxo97iu/Lost%20Control_ft.%20Sorana.mp3", isPlay: false }, { name: "Rise", artist: "Katy perry", song: "https://dl.dropbox.com/s/5umbo3gxw2et938/Katy_Perry_Rise.mp3", isPlay: false }, { name: "Love Yourself", artist: "Justin Bieber", song: "https://dl.dropbox.com/s/ddblu1scccg8jhy/Justin_Bieber_Love_Yourself.mp3", isPlay: false }, { name: "Let me love you", artist: "Justin Bieber", song: "https://dl.dropbox.com/s/6u6k42znxy9bx4z/Justin_bieber_Let_me%C3%BDlove_you.mp3", isPlay: false }, { name: "Sorry", artist: "justin bieber", song: "https://dl.dropbox.com/s/qq9ws89peajf46b/Justin%20Bieber%20-%20Sorry%20%28Lyric%20Video%29.mp3", isPlay: false }, { name: "It aint me", artist: "Selena gomez", song: "https://dl.dropbox.com/s/gy7ha9iq242v4vm/It_aint_me.mp3", isPlay: false }, { name: "I don`t care", artist: "justin Bieber", song: "https://dl.dropbox.com/s/00h8p1zigssya60/i-don-t-care.mp3", isPlay: false }, { name: "I don't wanna go", artist: "Alan walker", song: "https://dl.dropbox.com/s/3ytzafcoyj11nzl/I_don%27t_wanna_go.mp3", isPlay: false }, { name: "He's a pirate", artist: "---", song: "https://dl.dropbox.com/s/mo3kqq64z8d5lnq/he%27s_a_pirate.mp3", isPlay: false }, { name: "Faded", artist: "Alan Walker", song: "https://dl.dropbox.com/s/15zrpnarqvaj0vo/Faded.mp3", isPlay: false }, { name: "Faded Piano Version", artist: "---", song: "https://dl.dropbox.com/s/9ethba2v7l4fyi7/Faded_Piano_Version.mp3", isPlay: false }, { name: "Eminem Rap God", artist: "Eminem", song: "https://dl.dropbox.com/s/9fu40i42ul7xfjd/Eminem_Rap_God.mp3", isPlay: false }, { name: "Don t Check", artist: "Chris brown ft. Justin Bieber", song: "https://dl.dropbox.com/s/6yt446pe249qnfo/Don_t_Check.mp3", isPlay: false }, { name: "Despacito flute", artist: "---", song: "https://dl.dropbox.com/s/8w7pjex7mlx7tub/Despacito_flute.mp3", isPlay: false }, { name: "Darkside", artist: "Alan Walker", song: "https://dl.dropbox.com/s/vml2n2rglcrq97d/Darkside_alan_walker.mp3", isPlay: false }, { name: "Cold water", artist: "justin bieber", song: "https://dl.dropbox.com/s/amomiect11wmc2f/Cold_water.mp3", isPlay: false }, { name: "Attention", artist: "Charlie Puth", song: "https://dl.dropbox.com/s/othycvedrjf97pd/Charlie_Puth_Attention.mp3", isPlay: false }, { name: "Shameless", artist: "Camila cabello", song: "https://dl.dropbox.com/s/j5a4xdm7ykmf1uj/Camila_Cabello_Shameless.mp3", isPlay: false }, { name: "Liar", artist: "Camila cabello", song: "https://dl.dropbox.com/s/5fnhybzntk2l6hc/Camila_Cabello_Liar.mp3", isPlay: false }, { name: "Beautiful People", artist: "Ed Sheeran ft. khalid", song: "https://dl.dropbox.com/s/zfrop1tocfmztgv/Beautiful_People.mp3", isPlay: false }, { name: "Be Alright", artist: "Justin bieber", song: "https://dl.dropbox.com/s/32h0hnyitw6xx8r/Be_Alright_justin_bieber.mp3", isPlay: false }, { name: "Alone Part II", artist: "Alan Walker & Ava maxx", song: "https://dl.dropbox.com/s/ww2rxhgmeyodpd0/Alone_Part_II_Alan_ava.mp3", isPlay: false }, { name: "The Spectre", artist: "Alan Walker", song: "https://dl.dropbox.com/s/ljct98bgj90chtj/Alan%20Walker%20%E2%80%92%20The%20Spectre%20%28Lyrics%20%20Lyrics%20Video%29.mp3", isPlay: false }, { name: "Sing Me To Sleep", artist: "Alan Walker", song: "https://dl.dropbox.com/s/kyaigev6ul80850/Alan%20Walker%20-%20Sing%20Me%20To%20Sleep.mp3", isPlay: false }, { name: "Alone", artist: "Alan Walker", song: "https://dl.dropbox.com/s/37guciifzllvu3p/Alan%20Walker%20-%20Alone.mp3", isPlay: false }, { name: "Rockabye", artist: "Anne Marie,Sean Paul,clean bandit", song: "https://dl.dropbox.com/s/l6ep28cnqgoeblb/rockabye.mp3", isPlay: false }, { name: "Treat you better", artist: "Shawn Mendes", song: "https://dl.dropbox.com/s/nzqxn5dxp6qnpn9/Treat_you_better.mp3", isPlay: false }, { name: "I like me better", artist: "Lauv", song: "https://dl.dropbox.com/s/ab2re02nlgoiuy9/i_like_me_better.mp3", isPlay: false }, { name: "Graveyard", artist: "Halsey", song: "https://dl.dropbox.com/s/6m6dztob39l1rwp/graveyard_halsey.mp3", isPlay: false }, { name: "Burn out", artist: "Martin garrix,justin kylo ft.Dewain whitmore", song: "https://dl.dropbox.com/s/l3qv11wt2w0vkzx/Burn_out.mp3", isPlay: false }, { name: "Small Talk", artist: "Katy Perry", song: "https://dl.dropbox.com/s/u3695e0dzngt241/small_talk_katy_perry.mp3", isPlay: false }, { name: "Turn me on", artist: "Kevin lytlle", song: "https://dl.dropbox.com/s/1n1wrw4za7r116v/Turn_me_on.mp3", isPlay: false }, { name: "Takeaway", artist: "Halsey", song: "https://dl.dropbox.com/s/jfk69jg6x0w14ip/takeaway.mp3", isPlay: false }, { name: "Do it all for you", artist: "Alan Walker", song: "https://dl.dropbox.com/s/tvdiwlztmw21efm/do_it_all_for_you.mp3", isPlay: false }, { name: "Lover", artist: "Taylor swift", song: "https://dl.dropbox.com/s/yjoh6xf6jucfi8j/lover.mp3", isPlay: false }, { name: "Consequences", artist: "Camila cabello", song: "https://dl.dropbox.com/s/b05e8i5y9hay5iv/consequences.mp3", isPlay: false }, { name: "I hate you", artist: "Gnash ft.olivia o'brien", song: "https://dl.dropbox.com/s/gfbvo4m40qq5vzl/ihateyou_iloveyou.mp3", isPlay: false }, { name: "Hey DJ original", artist: "CNCO", song: "https://dl.dropbox.com/s/0tpppw57ylho9wp/hey_dj_cnco.mp3", isPlay: false }, { name: "Hall of fame", artist: "The script ft.will.i.am", song: "https://dl.dropbox.com/s/v0h3bhaz4bzj145/hall_of_fame.mp3", isPlay: false }, { name: "Goodbyes", artist: "Post malone ft.young thug", song: "https://dl.dropbox.com/s/8fjlxanaeois0xg/Goodbyes.mp3", isPlay: false }, { name: "That's what I like", artist: "Bruno mars", song: "https://dl.dropbox.com/s/neo9d0vhasa95xf/thats_what_i_like.mp3", isPlay: false }, { name: "Legends are made", artist: "Sam tinnesz", song: "https://dl.dropbox.com/s/iseopt3x7ecxz38/legends_are_made.mp3", isPlay: false }, { name: "Old town road", artist: "Lil nash x ft.Billy ray cyrus", song: "https://dl.dropbox.com/s/tn44xe26lwgou93/old_town_road.mp3", isPlay: false }, { name: "Original(Dolittle)", artist: "sia", song: "https://dl.dropbox.com/s/qzcam2bx5arcap4/original%28dolittle%29.mp3", isPlay: false }, { name: "Don't let me down", artist: "chainsmokers ft.Daya", song: "https://dl.dropbox.com/s/mah66xeml5e3c4i/Don%27t_let_me_down.mp3", isPlay: false }, { name: "Teenage Dream", artist: "Katy perry", song: "https://dl.dropbox.com/s/9umro9uhok5uvp5/teenage_dream.mp3", isPlay: false }, { name: "Ballin", artist: "Mustard, Roddy rich", song: "https://dl.dropbox.com/s/sr3jgfgpt7iqytp/Ballin.mp3", isPlay: false }, { name: "Billionaire", artist: "Travie mcCoy ft.Bruno mars", song: "https://dl.dropbox.com/s/sv7uznxalc5j9rc/Billionaire.mp3", isPlay: false }, { name: "We don't talk anymore", artist: "Charlie puth,Selena Gomez", song: "https://dl.dropbox.com/s/se7y9pcdp87ehzp/we_don%27t_talk_anymore.mp3", isPlay: false }, { name: "There's nothing holding me back", artist: "Shawn Mendes", song: "https://dl.dropbox.com/s/iozaqeyk3da0x0v/nothing_holding_me_back.mp3", isPlay: false }, { name: "Strip that down", artist: "Liam Payne ft.quavo", song: "https://dl.dropbox.com/s/zvhwzfm04vb1bzg/strip_that_down.mp3", isPlay: false }, { name: "That's amore", artist: "Dean martin", song: "https://dl.dropbox.com/s/v9ew463n72t3kh3/thats_amore.mp3", isPlay: false }, { name: "Astronomia", artist: "Tony igy", song: "https://dl.dropbox.com/s/yjq29my5piuuanx/Astronomia.mp3", isPlay: false }, { name: "Medicine", artist: "Anth,conor maynard", song: "https://dl.dropbox.com/s/d3w48m9foxsk2ok/Medicine.mp3", isPlay: false }, { name: "Take it off", artist: "Kesha", song: "https://dl.dropbox.com/s/gc4d7u05rgir6n6/take_it_off.mp3", isPlay: false }, { name: "My dilemma", artist: "Selena Gomez", song: "https://dl.dropbox.com/s/dr0yawcj1faohkn/my_delemma.mp3", isPlay: false }, { name: "Blame", artist: "Calvin Harris", song: "https://dl.dropbox.com/s/vf1hlksma34glll/Blame.mp3", isPlay: false }, { name: "Stronger", artist: "Kelly clarkson", song: "https://dl.dropbox.com/s/t9rxhayp2ek8y7p/Stronger.mp3", isPlay: false }, { name: "Find you again", artist: "Charlie Puth, wiz Khalifa", song: "https://dl.dropbox.com/s/6m9p60ea1pgebl1/Find_you_again.mp3", isPlay: false }, { name: "Call you mine", artist: "The chainsmokers ft.Bebe Rexha", song: "https://dl.dropbox.com/s/kt1tg44h1gc93kr/call_you_mine.mp3", isPlay: false }, { name: "Say something", artist: "A great big world,Christina aguilera", song: "https://dl.dropbox.com/s/k2pyfwidl74l8ue/Say_something.mp3", isPlay: false }, { name: "Subeme la radio", artist: "Enrique Iglesias", song: "https://dl.dropbox.com/s/z0hxvs5u9ikhiey/subeme_la_radio.mp3", isPlay: false }, { name: "Never be the same", artist: "Camila cabello", song: "https://dl.dropbox.com/s/a4g5ucckhha3890/never_be_the_same.mp3", isPlay: false }, { name: "A year without rain", artist: "Selena Gomez", song: "https://dl.dropbox.com/s/f622gs8qtu8sgfy/A_year_without_rain.mp3", isPlay: false }, { name: "First Man", artist: "Camila Cabello", song: "https://dl.dropbox.com/s/podsowc8z8uop78/First_man.mp3", isPlay: false }, { name: "Living proof", artist: "Camila cabello", song: "https://dl.dropbox.com/s/v95l5xtc7shdg9m/Living_proof.mp3", isPlay: false }, { name: "Something gotta give", artist: "Camila cabello", song: "https://dl.dropbox.com/s/dh7ska5otr1994s/somethings_gotta_give.mp3", isPlay: false }, { name: "Airplanes", artist: "", song: "https://dl.dropbox.com/s/j93yw3spwq0jrzs/Airplanes.mp3", isPlay: false }, { name: "Friends", artist: "Anne Marie,Marshmello", song: "https://dl.dropbox.com/s/7lymj8g3akcalma/Friends.mp3", isPlay: false }, { name: "Feel it twice", artist: "camila cabello", song: "https://dl.dropbox.com/s/3k2iufk3qr3jp11/feel_it_twice.mp3", isPlay: false }, { name: "Cry for me", artist: "camila cabello", song: "https://dl.dropbox.com/s/l8p1m2bzdedpm6t/Cry_for_me.mp3", isPlay: false }, { name: "Easy", artist: "Camila cabello", song: "https://dl.dropbox.com/s/5g3qduqby7cufw2/Easy.mp3", isPlay: false }, { name: "Back to you", artist: "Selena Gomez", song: "https://dl.dropbox.com/s/pcms7utg5akaz7s/Back_to_you.mp3", isPlay: false }, { name: "Eastside", artist: "Halsey,Khalid", song: "https://dl.dropbox.com/s/rmuvxmkdnr5top7/Eastside.mp3", isPlay: false }, { name: "Bad things", artist: "Camila cabello", song: "https://dl.dropbox.com/s/d76y6p28wr7n2zx/Bad_things.mp3", isPlay: false }, { name: "8D sound", artist: "---", song: "https://dl.dropbox.com/s/1q3cylo5h361z3v/AUD-20170726-WA0014.mp3", isPlay: false }, ]; window.onscroll = function() { var nav = document.getElementById("nav"); var textb = document.getElementById("text"); textb.style.transform = "translate(0, -" + window.scrollY / 2 + "px)" if(window.scrollY >= 145) { nav.style.background = "#000"; musicplayername.style.color = "white"; } else { nav.style.background = "transparent"; musicplayername.style.color = "transparent"; } } window.onload = function() { var container = document.getElementById("container"); for(var i = 0; i <= songs.length - 1; i++) { container.innerHTML += markup(i, songs[i].name, songs[i].artist, songs[i].poster); } var pre = document.getElementById("pre"); pre.style.display = "none"; } function opensearch() { document.getElementById("sbar").style.right = "0"; scrollTo(0, 145); } function closesearch() { document.getElementById("sbar").style.right = "-100%"; document.getElementById("inp").value = ""; var cardc = document.getElementsByClassName("card"); for(var i = 0; i <= cardc.length - 1; i++) { cardc[i].style.display = ""; } } function search() { var m = document.getElementsByClassName("card"); var inp = document.getElementById("inp").value.toUpperCase(); for(var i = 0; i <= m.length - 1; i++) { if(m[i].innerHTML.toUpperCase().indexOf(inp) != -1) { m[i].style.display = ""; } else { m[i].style.display = "none"; } } } function mint() { var isPlaying = aud.currentTime > 0 && !aud.paused && !aud.ended && aud.readyState > 2; if(isPlaying) { aud.currentTime = aud.currentTime - 10; } } function maxt() { var isPlaying = aud.currentTime > 0 && !aud.paused && !aud.ended && aud.readyState > 2; if(isPlaying) { aud.currentTime = aud.currentTime + 10; } } function play(e, i) { if(songs[i].isPlay == false) { var loadmusic = document.getElementById("loadmusic"); loadmusic.style.transform = "scaleY(1)"; aud.addEventListener('loadeddata', function() { loadmusic.style.transform = "scaleY(0)"; }, false); if(lastsong == null) { e.innerHTML = "<svg class='material-icons' width='2em' height='2em' viewBox='0 0 16 16' class='bi bi-pause-fill' fill='currentColor' xmlns='http://dl.w3.org/2000/svg'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'></svg>"; aud.src = songs[i].song; aud.play(); songs[i].isPlay = true; lastsong = i; } else { songs[lastsong].is = false; document.getElementById("playbtn" + lastsong).innerHTML = "<svg class='material-icons' width='2em' height='2em' viewBox='0 0 16 16' class='bi bi-play-fill' fill='currentColor' xmlns='http://dl.w3.org/2000/svg'><path d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>"; e.innerHTML = "<svg class='material-icons' width='2em' height='2em' viewBox='0 0 16 16' class='bi bi-pause-fill' fill='currentColor' xmlns='http://dl.w3.org/2000/svg'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'></svg>"; aud.src = songs[i].song; aud.play(); songs[i].isPlay = true; lastsong = i; } } else { var isPlaying = aud.currentTime > 0 && !aud.paused && !aud.ended && aud.readyState > 2; if(isPlaying) { e.innerHTML = "<svg class='material-icons' width='2em' height='2em' viewBox='0 0 16 16' class='bi bi-play-fill' fill='currentColor' xmlns='http://dl.w3.org/2000/svg'><path d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>"; songs[i].isPlay = false; aud.pause(); lastsong = null; } } } alert("Made by : Maulana Usman") function jumpScroll() { window.scroll(0,145); } </script> </body> </html>
colevoss
React Native tabbed scroll view component
SkAliya
Sticky nav on window scroll using window scrollY & offsetTop & styling nav [position :fixed]
tjsgh531
scroll : (feat. window.scrollX / window.scrollY / scrollTo / location.hash / hashchange)
jbacule
Scrolly is a Chrome extension that enables automatic scrolling to the bottom of a long webpage. It provides settings for controlling the scrolling behavior, such as the number of pixels to scroll per scroll and the duration of each scroll in seconds.
reeshabh90
Xplainer-App is a modular, extensible platform built for 'Scrolly-telling' with Next.js and TypeScript that combines narrative text with interactive visualizations of concepts. It uses a scrollytelling approach, where scrolling through the page triggers updates to text and visualizations, creating a guided learning experience.
soql101
Infinity Tab : Never Ever Scroll Down. This Extesnion is made for fun.There is no purpose to this extension beyond making your index fingure more stronger. please, dont sue me ;) Install:https://chrome.google.com/webstore/detail/swan-tab-never-ever-scrol/lhmeghcfcmnkpdjhphpdcdhjaempmpkm?utm_source=chrome-ntp-icon
Narine2022
scroll some changes + scrollX / scrollY
Vaudem
Scroll to display scrollY.px
karolinepauls
Drag-to-scroll. Mirror of https://gitlab.com/karolinepauls/scrolly-wrappy
daniyal4engg
Infinite scroll using javascript concept, how scrollHeight is divided into scrollY and innerHeight .
rudenich
animated vertical scrol with trigger "scroll" event
foo-software
A React scroll context provider and consumer for detecting scroll position (scrollX, scrollY) and providing that data to child components.
Parshvanath scrolly website only scroll GD final. Sit back, watch the information come to you as you scroll, and enjoy.
pranjaltiwari0291-afk
window.addEventListener("scroll", function () { let navbar = document.getElementById("navbar"); if (window.scrollY > 50) { navbar.classList.add("scrolled"); } else { navbar.classList.remove("scrolled"); } });
Parshvanath scrolly website with button GD final. Click button to reach the relevant information or scroll the website and watch the information come to you.
andmironov
Debounces the scroll and resize events and runs a callback inside of rAF when they update, providing the scrollY and viewPort object with width and height properties
LohanBatista
Amazing scrolling animation/effect that you can apply to the items from a FlatList, ScrollView, SectionList and Animated API from React Native. We'll go through: - How to create a vertical scrolling list - How to create a blurred background image - How to animate items/elements from a FlatList based on scrollY position
mariadhaybi
A scrolling-based design where elements like the sky, moon, mountains, and boat move dynamically as the scrollY value changes in JavaScript. Built with HTML, CSS, and JavaScript, it features smooth animations and switches between day and night based on the moon’s position
anashlala
Developed an interactive landscape application using HTML, CSS, and JavaScript. The application features dynamic movement of elements such as the sky, moon, mountains, and a boat in response to vertical scrolling (scrollY). It includes a transition between day and night, influenced by the moon's position within the scene.
FahrizaIlhamiDevlens
Web ini adalah project saya untuk menyelesaikan panjangnya web berita, disini saya memberi solusi yaitu scroll, jadi sepanjang apapun isi berita, user hanya perlu scrol dan akanjauh lebih nyaman membacanya.
krillato
ไปเจอ js มาสคริป นึงครับเอามาฝาก มันจะ lock scroll เมื่อ refresh page ครับให้มันอยู่ตำแหน่งเดิม <script> document.addEventListener("DOMContentLoaded", function(event) { var scrollpos = localStorage.getItem('scrollpos'); if (scrollpos) window.scrollTo(0, scrollpos); }); window.onbeforeunload = function(e) { localStorage.setItem('scrollpos', window.scrollY); }; </script>
RedXquirrel
Scrolling the ScrollView reduces the height of the masthead, as well as fading some of the masthead content. Done in Xaml with three IValueConverters, two to manage opacity and hero height changes of various ui elements as reverse-bound to the ScrollY value of the ScrollView, and one to manage the visibility of the 'trick' Transparent ScrollView Lip (the second transparentscrollviewlip.png in the xaml) to trick the eye that the lip has stopped moving when the upwards movement of the ScrollView pane up underwards it causes it to become visible in a stationary place (with the reverse happening upon the downwards scroll).
All 23 repositories loaded