CSS3 transform + jQuery flip card issue Creating a Slick Auto-Playing Featured Content Slider I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Both of these examples use the Coda Slider pretty much "out of the box". View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already. Here is what we need in addition: Different types of custom content in the panels. Let's go through the HTML, CSS, and JavaScript. The HTML Here is the framework HTML for just the slider itself: <div class="slider-wrap"><div id="main-photo-slider" class="csw"><div class="panelContainer"><div class="panel" title="Panel 1"><div class="wrapper"><! The CSS The full CSS for this example has a basic reset, some utility styles and basic structure. The JavaScript In the header section of your HTML, you'll need to include jQuery and all the plugin files. We aren't done yet though. Couple more things to note. UPDATE: Auto-Play
Mr.doob's blog CSS Card Flip using Webkit Transitions | Technology Webkit brought a lot of enhancements to the formerly dull browser based user interfaces, with transform and transition properties being among the most useful for user interaction. In this tutorial we will learn how to use both to create a product card that flips to reveal more information with a fallback for browsers that don’t support Webkit transitions and transform. CSS Card Flip Demos There are three examples for this tutorial, each one with its own advantages. Card flip triggered by click Card flip triggered on mouse over Card flip triggered by disjoint button The first two are the most basic: you have to either click on the card or roll your mouse over it to trigger the effect. The main difference between the “click to flip” example and the other two is that you can’t have a link within the faces unless you deal with event propagation and it’s not the focus of this tutorial. What about Firefox, Opera or the one browser whose name is written in the Black Speech of Mordor? A Card Flip?
Coda-Slider 2.0 - Niall Doherty's dot biz You heard that right. The Coda Slider has been a great, reliable plugin for thousands of websites since way back in 2007. However, the web has changed a lot since back then. Introducing the Liquid Slider A fully responsive, powerful content slider with swipe functionality. Oh, did I mention it's also free? Still want the Coda Slider? If you still would like to use the Coda Slider, it will forever be available on GitHub. Slide 4 Proin nec turpis eget dolor dictum lacinia. Slide 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slide 2 Slide 3 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Basic documentation is available on the Coda Slider's GitHub page.
Pixastic: JavaScript Image Processing Library What Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more. For the full list, see the documentation page. If you have any comments, bug reports or other feedback, don't hesitate to leave a comment here or shoot me an email. You can follow the development of Pixastic as well as other JavaScript experiments on my blog. How Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. Show me! If you want to see for yourself what Pixastic can do, you can check out the documentation where you will find small demos for all actions No, show me now! If that's not good enough, here's a quick and dirty demo of how to use Pixastic. Example code: Output (mouseover the image): Where Who
Making jQuery work Found some jQuery code that's perfect for your site, but can't make it work? Don't worry, here's a small tutorial to lead you through. Let's start with an example. Suppose, on a good day, you read somewhere on the Internet something like ‘I found this cool way to prevent the current page in RapidWeaver from being a link. Here's the code:<script type="text/javascript"> $(document).ready(function(){ $('#current]').click(function(event){ event.preventDefault() });</script>Isn't that awsom?’ Want to use it on your site, but don't know how; or you can't get it to work? 1. 2. 3. If you can't find it, you will have to add it yourself. This way, you will link to a server from Google where the jQuery library is hosted. 4. If so, check what is says between var and =. 6. 7. 8. In the unlikely case non of the solutions above work, it's time to seek some help, e.g. on the RapidWeaver forum or here in the comments.
Blinds: jQuery Slideshow using CSS sprites - little web things Demo Features Smooth animated transition Customizable sprite grid Customizable animation ochestration Multiple instances on the same webpage jQuery compatible (plugin) Unobtrusive javascript Compatibility Works great on the following browsers: Firefox 3.5 IE 8 IE 7 IE 6 (imagine my surprise!) Download Back to project's post Usage <div class="slideshow"><ul><li><img src="lemons/1.jpg" alt="lemon" /></li><li><img src="lemons/2.jpg" alt="lemon tea" /></li><li><img src="lemons/3.jpg" alt="splashing lemon" /></li><li><img src="lemons/4.jpg" alt="salad with lemon" /></li><li><img src="lemons/5.jpg" alt="lemonade!"
7 Brand New Impressive Javascript Experiments Alright, after a while, we have got new chrome experiments to showcase again! Always look forward for this post to show you what have been happening in the HTML 5 and javascript development. Unfortunately, it runs well in chrome, maybe sometimes in firefox but not in Internet explorer most of the time. Sketchy structure Draw whimsical scenes remenescent of complex structures.Extruder This experiment is a reinterpretation of the Joy Division album cover "Unknown Pleasures" in an animated line-landscape visualizer. A massively multi-user collaborative pixel art page.