Analog Clock with Pure CSS3 (without javascript)
Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.
Cool Background Image Sliding effect with jQuery
Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.
READ MORE »
Making 3D WebGL demonstration
Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.
READ MORE »
Cross-browser effect of waves using javascript
Today’s lesson quite entertaining, we’ll learn how to construct a wave effect. For clarity, we will apply that effect to the picture. I will explain how it works directly in our tutorial, now, its time to see our online demonstration.
READ MORE »
Multiple backgrounds with CSS3 and a little of animation
In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring). Commonly, it is very easy to apply multiple backgrounds – we just need to list them (separated by commas) in the object properties.
READ MORE »
How to create photo gallery using Slider Kit (jQuery)
Today we will continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos).
By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.
READ MORE »
Cross-browser image shaking effect using javascript
Today’s lesson quite entertaining, we’ll learn how to construct a shaking effect. For clarity, we will apply this effect to the picture. You will need to hold down by mouse a certain area in the image and move it to another location (drag). Now, I sure that better to see our online demonstration. How did it achieve? In principle, simply enough, the entire ‘image’ divided into 4 sectors. Place, where we will begin to drag by mouse – is the boundary separating of our four pictures. And shaking effect itself – will only change the sizes of our sectors and pictures in them. Read more.
READ MORE »
CSS3 Animation demonstration
Have you ever wondered about the use of CSS3 for creating videos? But in common it is possible too (using the animation features in CSS3). CSS3 is not fully mastered, many things may seem surprising for the average user. The only unpleasant moment, CSS3 is still not supported by most Web browsers at the moment. But do not worry, it’s a matter of time, and hopefully very soon, most browsers will support it. Well, Naomi Atkinson, Andy Clarke, Dan Rubin and Mircea Piturca prepared website to the international community, demonstrating the power of animation in CSS.
READ MORE »
Easily Animate Web Buttons/Objects using jQuery
Today I will tell you about animations in web using jQuery. As we know – jQuery offer us several default methods of effects: fade(In/Out/To), hide, show, slide(Down/Toggle/Up), toggle. This is ok, but what if we need more? So, animation will help us! It will help to slide between 2 states using really good effects. By default, ‘easing’ is optional param, so to use extra effects we will use additional jquery.easing.js library.
READ MORE »
