PracticeIO Cello

Developer
James Podles
Size
2,675 Kb
Views
14,168
  1. PracticeIO Cello Previews
  2. PracticeIO Cello HTML Codes
  3. PracticeIO Cello CSS Codes
  4. PracticeIO Cello JS Codes

How do I make an practiceio cello?

Cello recordings by Corsica_S:http://freesound.org/people/Corsica_S/. What is a practiceio cello? How do you make a practiceio cello? This script and codes were developed by James Podles on 23 November 2022, Wednesday.

PracticeIO Cello Previews
IQ Test

PracticeIO Cello - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PracticeIO Cello</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color:rgba(67, 159, 221,.4);
}
span {font-size:1.5em;font-family:'Helvetica';width:100%; text-align:center;display:block}
.cello { background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Cello_1.svg/256px-Cello_1.svg.png'); width:256px; height:800px; margin:0 auto; position:fixed; left:50%; margin-left:-156px;
}
figure {
}
.string { height:400px; width:2px;
}
.string:hover { cursor:pointer;
}
#c-string { position:absolute; left:80px; top:60px; transform:skewX(-.5deg);
}
#g-string { position:absolute; left:86px; top:60px; transform:skewX(.6deg);
}
#d-string { position:absolute; left:93px; top:60px; transform:skewX(1deg);
}
#a-string { position:absolute; left:103px; top:60px; transform:skewX(2deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span>Pluck the strings to hear beautiful cello sounds!</span> <div class="cello">
<figure class="string" id="c-string"></figure> <figure class="string" id="g-string"></figure> <figure class="string" id="d-string"></figure> <figure class="string" id="a-string"></figure>
</div>
<audio id="cnote">	<source src="http://freesound.org/data/previews/42/42245_7037-lq.mp3" type="audio/mpeg">
<source src="http://freesound.org/data/previews/42/42245_7037-lq.ogg" type="audio/ogg">
<audio id="gnote"> <source src="http://freesound.org/data/previews/42/42258_7037-lq.mp3" type="audio/mpeg"> <source src="http://freesound.org/data/previews/42/42258_7037-lq.ogg" type="audio/ogg">
</audio>
<audio id="dnote">	<source src="http://freesound.org/data/previews/42/42249_7037-lq.mp3" type="audio/mpeg"> <source src="http://freesound.org/data/previews/42/42249_7037-lq.ogg" type="audio/ogg">	</audio>
<audio id="anote"> <source src="http://freesound.org/data/previews/42/42239_7037-lq.mp3" type="audio/mpeg"> <source src="http://freesound.org/data/previews/42/42239_7037-lq.ogg" type="audio/ogg">
</audio> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

PracticeIO Cello - Script Codes CSS Codes

body { background-color:rgba(67, 159, 221,.4);
}
span {font-size:1.5em;font-family:'Helvetica';width:100%; text-align:center;display:block}
.cello { background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Cello_1.svg/256px-Cello_1.svg.png'); width:256px; height:800px; margin:0 auto; position:fixed; left:50%; margin-left:-156px;
}
figure {
}
.string { height:400px; width:2px;
}
.string:hover { cursor:pointer;
}
#c-string { position:absolute; left:80px; top:60px; transform:skewX(-.5deg);
}
#g-string { position:absolute; left:86px; top:60px; transform:skewX(.6deg);
}
#d-string { position:absolute; left:93px; top:60px; transform:skewX(1deg);
}
#a-string { position:absolute; left:103px; top:60px; transform:skewX(2deg);
}

PracticeIO Cello - Script Codes JS Codes

var cnote = $("#cnote")[0];
$("#c-string").click(function() { cnote.play();
});
var gnote = $("#gnote")[0];
$("#g-string").click(function() { gnote.play();
});
var dnote = $("#dnote")[0];
$("#d-string").click(function() { dnote.play();
});
var anote = $("#anote")[0];
$("#a-string").click(function() { anote.play();
});
PracticeIO Cello - Script Codes
PracticeIO Cello - Script Codes
Home Page Home
Developer James Podles
Username jpod
Uploaded November 23, 2022
Rating 3
Size 2,675 Kb
Views 14,168
Do you need developer help for PracticeIO Cello?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Podles (jpod) Script Codes
Name
Envelope Email Form
Photo Grid
The Safe of Mystery
Band Name Generator
PracticeIO Circle Fan Menu
Reading Progress Bar
Flyer-flip
PracticeIO Click Counter
Soundcloud music player
CSS Bot Confusion
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!