Today's Question:  What does your personal desk look like?        GIVE A SHOUT

SEARCH KEYWORD -- CSS animation

  CSS3 animation vs CSS3 transition

Both CSS3 animation and CSS3 transition can be used to transition an element in a webpage. They can be used to transition some CSS properties within a given period of time. They have many similarities. They do have a few differences as well. So an user needs to understand the differences between them in order to better use them in different scenarios. First, let's see an example on how to change the width of a div from 100px to 200px within 2 seconds when hovering on it. With CSS3 animation , th...

   CSS3 animation,CSS3 transition, Difference     2015-06-15 08:46:39

  How ScrollerJS works

ScrollerJS is a light weight number scroller module to be embedded in web apps. It provides fancy number scrolling animations. ScrollerJS supports both CSS transition and DOM animation to handle the animation needed. If CSS transition is supported in a browser, CSS transition will be the preferred option for animation. If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically. How does the number scrolling actually work? To transition a number from 0 to...

   ScrollerJS,JavaScript,CSS,GitHub     2015-06-11 06:54:44

  6 amazing HTML5 animation effects

HTML5 is rapidly developed in WEB world, it puts all kinds of pressure to browser development, but at the same time it also brings us lots of unexpected page effects. If we can use some HTML5 elements on our web apps,  we may get different user experience. However, for HTML5, there are lots of places need to improved. The following HTML5 animation effects are very attractive. 1. HTML5 mouseover image effect This HTML5 animation effect can be used in photo gallery, users can preview the...

   HTML5,Animation     2012-11-20 10:32:52

  CSS Animation vs. JavaScript: Which One Is Better?

You know that there are two ways of creating animations on the web: with CSS and JavaScript. And, their selection completely depends on the dependencies of the project. But many web developers hold a wrong perception that CSS is the only way of creating the animations. In fact, CSS has established as the most pampered system of the web development industry and most of the developers recommend it because it is mobile-friendly and powerful system. No doubt CSS is good, but JavaScript is the best....

   CSS animation, JS animation     2015-07-24 02:45:01

  ScrollerJS vs Odometer

Both ScrollerJS and Odometer are two JavaScript libraries to transition one number to another number with animation. They provide user a fancy animation about scrolling numbers. These libraries can be used in many scenarios such as user statistic counter, timer or odometer. This post is going to have a comparison on these two open source libraries. Below is a table which lists the features the two libraries have: Feature ScrollerJS Odometer Language JavaScript and CSS JavaScript and CSS S...

   JavaScript, Odometer, ScrollerJS, Open source, CSS Transition     2015-05-13 02:10:55

  HTML5 History of 20th Century Music

We've seen some neat interactive HTML5 infographics before -- but the periodic table, for example, doesn't really care that much about time.Visual representation of time introduces numerous complications. Traditional ways of representing time visually were, roughly speaking, translations of dimension-type, from temporal to spatial; the mapping selected would depend on what kind of temporal relation was meaningful for the particular application. For example, circles represent cyclical beha...

   HTML5,JavaScript,Music,Timeline     2011-12-16 09:35:55

  Magic CSS shape

There is a question on StackOverflow which states that someone finds a CSS sample on http://css-tricks.com/examples/ShapesOfCSS/  , the sample shows a triangle created with pure CSS. The source code is :#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}The question is how these few lines can create a triangle? Next we give the answer and the detail illustration to this question We need to consider the B...

   CSS,Triangle,Box model,Border     2012-04-20 12:56:22

  You can get properties of pseudo-element using JavaScript now

The pseudo-element6 in CSS is extremely useful, you can use it to create CSS triangles and lots of other elements without overuse many HTML elements. In the past, you cannot get the property value of pseudo-element in CSS using JavaScript. Now you can call a new method in JavaScript to get them easily. Assume you have below CSS codes: .element:before { content: 'NEW'; color: rgb(255, 0, 0); } To get the properties in .element:before, you can use below JavaScript method: var color = window.getC...

   pseudo-element,property,JavaScript     2014-04-05 20:58:25

  Best practices of front end optimization

1. Use DocumentFragment or innerHTML to replace complex elements insertion DOM operation on browser is expensive. Although browser performance is improved much, multiple DOM elements insertion is still expensive and will affect the page load speed. Assume we have an ul element on our page, we now want to retrieve a JSON list using AJAX and then update the ul using JavaScript. Usually we may write it as : var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { // ...

   JavaScript,Front end,Optimization,Tips     2013-07-06 11:26:27

  CSS Overflow Property Utilization

Sometimes when we do CSS on HTML elements. We may want to hide some text when the text in a specified box overflows. Usually, we can use a CSS property overflow:hidden to hide the text so that the format of the whole element will not be affected. But will it always work? I believe some of us may encounter problems when we want to hide some text in a table td cell with specified width. If we use td { overflow:hidden;}, it is supposed to hide the text if the text in a td cell overflows. But the fa...

   CSS,Overflow,TD,Cell,Hidden     2014-10-21 08:24:48

RECENT