I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Ratchet is a great way of prototyping iPhone apps and has a whole host of functionality. It also takes advantage of Push.js which when connecting your pages allows you to create a prototype that feels like a real app when you save it to your phone. Push.js basically loads in the pages and animates between them much like the animation effects on native IOS apps. You’ll need to deploy the code on a server to get push working. You can download and check out Ratchet here.
1. All fixed bars (.bar-title, .bar-tab, .bar-header-secondary, .bar-footer) should always be the first thing in the of the page. This is really important!
2. Anything that’s not a .bar- should be put in a div with the class “content”. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. They’re included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
The Title Bar
The header is the container element for the title.
</pre> <header class="bar-title"> <h1 class="title">Papermashup</h1> </header> <pre>
Adding A Popover
Popovers are designed to only fire from the title bar. Set the value of the title href to the id of a popover as shown below:
<!-- The Header Title Bar --></pre> <header class="bar-title"><a href="#myPopover"> </a> <h1 class="title">Title</h1> <a href="#myPopover"> </a></header> <pre> <!-- The Popover --></pre> <div class="popover" id="myPopover"><header class="popover-header"><a class="button" href="#"> Left </a> <h3 class="title">Popover title</h3> <a class="button" href="#"> Right </a></header> <ul class="list"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <pre>
The slider can be used for any type of content but it works great with images.
</pre> <div class="slider"> <ul> <li><img alt="" src="img/slide1.jpg" /> <span class="slide-text">← Slide me</span></li> <li><img alt="" src="img/slide2.jpg" /></li> <li><img alt="" src="img/slide3.jpg" /></li> </ul> </div> <pre>
Linking Pages with Push.js
<a href="page-one.html" data-transition="fade">One</a> <a href="page-two.html" data-transition="slide-in">Two</a>
Ratchet is an amazing tool to put together prototypes. It’s effortless to get started with and i’d recommend it to anyone wanting to build an iPhone app demo. We’ve just touched the surface of what Ratchet can bo but it’s truly awesome.