designart

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 basis will help you understand how to use jQuery in your own projects.  Concept about creating a Game as a jQuery Plugin  A jQuery plugin is a perfect way to create image slideshows, custom user interface controls and of course browser-based games. We won’t just write JavaScript code here, we will create a jQuery plugin. A plugin is nothing more than our own custom jQuery method. You know how we have jQuery’s methods .css() and .animate()? W

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.  ADVANTAGES: Cross-browser (including IE8-10) No special markup, minimal styles Responsive with percentages and min-/max- Use one class to center any content Centered regardless of padding (without  box-sizing !) Blocks can easily be resized Works great on images LIMITATIONS: Height must be declared (see  Variable Height )

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 i.e. Parallaxfx_DG. 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. The idea of the parallax effect it in web design is built around giving a page depth by using several layers of images, all moving at different speeds in response to movement of the mouse or mouse scroller, so that a viewer get a full sen

One of the trickiest parts to be responsified on a website is “the Navigation” , this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages. There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second . However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

All around 2012 there has been a colossal surge in new web outline patterns. Some of you may recall my prior post on web plan patterns going into 2012. Right away we can see a number of these thoughts have worked out as intended, and even received further expanding levels of variety. In this article I might want to dive into 20 more plan patterns for the new 2013 year . The outline impact is just an impression of our society and desires for client interfaces. Preferably these patterns speak to ideal plans in the web plan neighborhood. However architects will dependably have their own sentiments concerning plan terms, so bring these plans with a grain of salt. In the event that you are intrigued, keep your eyes peeled for illustrations of these patterns and procedures.

Previously I wrote a tutorial on a way to create a mobile navigation for responsive style, currently I've discovered a replacement technique to provide a responsive menu while not having to use Javascript. It uses clean and linguistics HTML5 markup. The menu is aligned left, center or right. in contrast to the previous tutorial wherever it's clicked to toggle, this menu toggles on hover that is a lot of user friendly. It additionally has associate indicator to indicate the active/current menu item. It works on all mobile and desktop browsers together with web Explorer!

HTML <ul> <li><a href="">Dashboard</a></li> <li><a href="">Friends</a></li> <li> <a href="">Message <span>9</span> </a> </li> <li><a href="">Games</a></li> <li><a href="">Settings</a></li> </ul> CSS .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.7); } } jQuery var counterValue = parseInt($('.bubble').html()); // Get the current bubble value function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); } $('#decrease').on('click',function(){ counterValue--; // decrement $('.bubble').html(counterValue).addClass('animating'); // anima

HTML <div id="ballWrapper">      <div id="ball"></div>      <div id="ballShadow"></div> </div> CSS #ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; } #ball { width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; } #ball::after { content: ""; width: 80px; height: 40px; position: absolute; left: 30px; top: 10px; background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); border-radius: 40px / 20px; } #ballShadow { width: 60px; height: 75px; position: absolute; z-index: 0

Cool Animated Fire Effects with CSS3 and jQuery JQuery <script type="text/javascript"> var step = 1; function nextShadow(){ $('#onfire span').each(function(){ y = parseFloat($(this).attr("y_pos")); y += step + Math.random()*3; $(this).attr("y_pos", y); shaking = Math.random(); shadow1 = "0px 0px "+(y%5)+"px white"; shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red"; shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993"; shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow"; $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3); }); } $(function(){ $('#onfire span')