Top Tricks #85

Deciding to pursue my work, I jump in on more advance widgets. This is my first tutorial for a true 100% responsive widget. With this jump in, I also created my third demo page using the latest free template from Weebly which is set to be responsive. So our tutorial today is all about placing annotations on template image preview (when your offering templates to your clients) with clean overlay effects.

Just a reminder, I couldn't perfectly apply the original work of Mary Lou onCodrops but this is the best I can provide you for now. It took me some time to fit it on our template. Remember, use a responsive template from Weebly or any other provider to actually see the effects.

<link href="http://myweeblytricksdemo.weebly.com/files/theme/facescroll.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="http://myweeblytricksdemo.weebly.com/files/theme/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/facescroll.js">
/***********************************************
* FaceScroll custom scrollbar (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>

Tweet