Address
:
[go:
up one dir
,
main page
]
Include Form
Remove Scripts
Session Cookies
Initializing...
Template
Load basic template ("Hello Weaver!")
Download
Download this weave as a single HTML file
Download this weave as a .ZIP file
^ D
⌘ D
JavaScript Console
JavaScript console/terminal playground
Placeholder
Insert "Lorem ipsum..." at cursor location
Tidy & Format
Tidy and format HTML-only
Tidy and format CSS-only
Tidy and format JS-only
Tidy and format all (HTML+CSS+JS)
A
Animate CSS (3.7.0)
B
Bootstrap (latest)
C
Create JS (latest)
Chart JS (1.0.2)
D
D3 (3.0)
Dojo (latest)
E
Ember JS (latest)
Enyo JS (latest)
Ext JS (4.2.0)
F
Fabric JS (1.3.0)
Font Awesome (4.7.0)
J
jQuery (latest)
jQuery UI (latest)
jQuery Mobile (latest)
jQuery Tools (1.2.7)
K
Kinetic JS 4.7.3
Knockout JS 3.0.0
M
Modernizr (latest)
Moo Tools (latest)
P
Paper JS (0.9.9)
Processing JS (1.4.1)
Prototype JS (latest)
Pure CSS (0.60)
Q
Qooxdoo (3.0.1)
R
Raphael JS (2.1.4)
S
Script.aculo.us (latest)
Snap SVG (latest)
SVG JS (latest)
T
Three JS (latest)
U
Underscore JS (latest)
W
Web Font Loader (1.4.10)
Y
YUI (3.13.0)
Z
Zepto (latest)
Web Editor
CSS Explorer
Color Explorer
Vector Graphics Editor
<head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"></head> <style> @font-face { font-family: handy; src: url(https://dl.dropbox.com/s/ga9hf4idu3egjb5/handy00.ttf); } #musicplayer{ display:grid; grid-template-columns:20px auto; align-items:center; width: 100px; font-family:handy; font-size:11px; color:#955136; line-height:140%; border: 2px solid #F9CDE2; border-radius: 2px; background:white; -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 199, 232, 0.8)); } #musictitle{ font-family:handy; overflow: hidden; white-space: nowrap; display:inline-block; width: calc(100% - 10px - 1px); margin-left: calc(10px + 1px); } #musicpixel{ width:120%; paddin-top:0px; position:relative; min-height: 15px; background:white; border-right: 2px solid #F9CDE2; } .overlay { opacity:0; position:absolute; top:0; left:0; text-align:center; width:100%; height:100%; transition:0.3s ease; background:white; } #musicplayer:hover .overlay { opacity: 1; transition:0.3s ease; } .playpause{ padding:5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .playpause:hover{ cursor:help; } #musicpixel img{ display:block; } .marquee{ display: inline-block; padding-left: 100%; animation: marquee 5s linear infinite; } @keyframes marquee{ 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } </style><div id='musicplayer'><div id='musicpixel'><img src='https://gnome.crd.co/assets/images/plants/1d8b019c.gif?v=57709862'> <div class='overlay'><div class='playpause'><i class="fas fa-play"></i> </div></div></div><div id='musictitle'><span class='marquee'>eat my love by BIBI</span></div></div> <audio id='musicsrc' loop src='https://dl.dropbox.com/s/wb4o4l23oceoiju/Eat%20My%20Love%20%28%EC%82%AC%EB%9E%91%EC%9D%98%20%EB%AC%98%EC%95%BD%29.mp3'></audio>
.lw { font-size: 60px; }
<script> document.querySelector('.playpause').addEventListener('click', playpause); function playpause(){ if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){ document.querySelector('#musicsrc').play(); document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>'; } else{ document.querySelector('#musicsrc').pause(); document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>'; } } </script>
pixels