Parallax effect is a long-known and widely used animation effect. Lately, the parallax effect has become a wide-spread and quite a trend element in web design, often referred to as "parallax scrolling". Internet if full on many great examples of application of this effect in web design. As I planned to create a cool parallax animated background, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it. In this tutorial, I’ll teach you the simplest parallax scrolling technique. Here, I am going to introduce you, a most flexible/responsive slider Parallaxfx_DG. It is…

We've all seen margin: 0 auto; for horizontal centering, but margin: auto;has refused to work for vertical centering… until now! But actually (spoiler alert!). I'm not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article. There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method. I had finally searched some useful techniques in a single place…

It’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of… property: inherit; The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser default, #myparent{ margin: 10px; border: 1px solid #000; } /* use the same border as the parent */ #myparent p{ border: inherit; } In practice, it’s rarely necessary to use inherit. Many of…

The new html5 technology – fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it. Starting the full-screen mode Due to the fact that this mode is supported by different browsers differently, we have to foresee…

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. HTML First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups.…

Today we are making a simple puzzle game called "Doraemon Puzzle". The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid's favorite cartoon "Doraemon" for square-sliding game. I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line…

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: CSS scale and CSS3 rotation. Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css. Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. The HTML <div id="colorWheel"> <span class="color01"></span> <span class="color02"></span> <span…

"How to change multiple background-image of body with effects?" - I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else. Here's a quick example of multiple images fading one after the other. The HTML Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade…

After working on Responsive_DG_Slider, which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement. Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery. Configuring Your Slider As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination. The HTML <div class="fluid_container"> <div class="fluid_dg_wrap fluid_dg_charcoal_skin"…

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider Responsive_DG_Slider. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it's features and API later. Here I am showing It's full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of…