background preloader

Arctext.js - Curving text with CSS3 and jQuery

Arctext.js - Curving text with CSS3 and jQuery

Adipoli jQuery Image Hover Plugin - Cube3x How To Use Enabling image hover effect is very simple. Place the below references inside your head tag. If you need image hover on an image with id ‘image1′, call adipoli plugin like this: <script> $('#image1').adipoli(); </script> Adding Options: Available Options startEffect : Default style of imagehoverEffect : Image style on mouse overimageOpacity : opacity of image considered when start effect is transparent or overlayanimSpeed : Animation speed for the effectfillColor : Overlay colortextColor : Text ColoroverlayText : Default HTML to be displayed on overlayslices : Number of slices for slice animationsboxCols : Number of boxes in a row for box animationsboxRows : Number of rows for box animationspopOutMargin : Margin of Image popoutpopOutShadow : Shadow length of popout image. Start Effects: transparentnormaloverlaygrayscale Hover Effects: Change Log Version 2.0 Added grayscale startEffectMoved code to github Do you want to know

Nasıl? jQuery PointPoint – A Plugin For Pointing To Things Martin Angelov Web designers find themselves in a tough situation – they have to build beautiful user interfaces that are intuitive and usable in the same time. Sometimes, despite our earnest efforts, web applications may become difficult to use for novice users. One solution is to create some sort of a tour of your application’s features. In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. How it works Lets dive straight to the code – it comes at around 100 lines (with comments), so it is not difficult to follow. jquery.pointpoint.js When you call pointPoint(), it creates an event listener for the mousemove event. I am also using the transform.js CSS hooks for jQuery, which level the support for CSS3 rotations in browsers that support them (this means the plugin will not work in IE678). jQuery PointPoint Plugin How to use it We are done! jQuery

Nasıl? Percentage Loader run loaderor download on BitBucket jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes. more examples Controllable It's also possible to use the percentage loader as a controller - try clicking and dragging on the widget. Multiple run loaders You can easily run multiple loaders simultaneously. back to top

Code a Fantastic Animated Circular Thumbnail Gallery With CSS Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with. Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Sneak Peek If you’re the kind of person who likes to skip to the end so you can see where you’re going, check out the live demo of the finished product below. Demo: Click here to launch. The Concept Before we get into building the thumbnail gallery, let’s talk a little bit about what we’re trying to achieve. When I was planning out how to accomplish this feat, I came across a bit of a snag. Background Image Pros The image will automatically be placed behind the textIt’s easy to clip the image to its parentAnimating the image is easy, just shift the background-position As you can see, there’s a strong argument for taking this route. HTML Image Cons

Related: