how to achieve the moving sparking effect with css and javascript as in css-tricks.com footer


Tags: javascript,jquery,html,css

Problem :

Here if you hover the mouse on any of the links (i.e. 'The Bookshelf' link)in the footer, you get a tad sparking effect moving leftward.

I tried with firebug but could not make any clue as to how that is achieved.

Suppose I consider the always-showing white border (?) to be a single parent div, and the sparking divs to be individual ones inside that. Then when the mouse-hover takes place, jquery is supposed to be used to apply background color or border for the child divs in left order . Even then the situation arises that those child divs make the height of the parent div greater than the that of the children contrary to what is apparent in the url.

For the test scenario, I used a parent div ( class_1 ) and one child div ( class_2 ) instead of many: html:

<div class="class_1">
<div class="class_2"></div><!--end of class_2 -->

</div><!-- end of class class_1 -->

css:

.class_1{
height111:1px;

width:150px;
margin:0 auto;

border:2px solid red;


}
.class_2{

width:70px;
margin:0 auto;
border:1px solid green;


}

What should be the proper way?



Solution :

Demo: http://jsfiddle.net/qYpck/

It's achieved using CSS only - a background gradient that is then transitioned on the hover of the parent a tag - the background-position is the property that gives it the illusion of sparkles.

<ul class="link-list">
  <li><a href="#">Link one<span></span></a></li>
  <li><a href="#">Link two<span></span></a></li>
  <li><a href="#">Link three<span></span></a></li>
</ul>

Take note of the empty span's inside of the links.

This is the transition CSS that does the magic: (note you'll need to use browser prefixes for the transition property, like -moz- and -o- - they are present in the fiddle above but for readability and brevity I omitted them below)

.link-list a:hover>span, .link-list a:focus>span {
    background-position: -100% 0;
    transition: background 0.4s;
}

​The benefits of doing transitions with CSS are vast - it's things like:

  • progressive enhancement (the sparkle effect isn't necessary to page function, so it's purely an aesthetic feature and won't slow down browsers that don't recognise it)

  • CSS transitions are hardware accelerated, and generally smoother than JS animations

  • removes strain on javascript engines

Read more: Is there any advantage to using CSS animations over jQuery animations? (performance, or otherwise)

To check which browsers will be supported with this technique, check caniuse.com


    CSS Howto..

    How to create a form for a petition? [closed]

    How to horizontally scroll an inner div with text wrapping

    How can I avoid space while using pseudo-elements in multi-line markup?

    how to override user agent CSS

    How do I add a border to an (8 point star) css shape?

    how to access anti aliasing method of a font with CSS

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to use metro ui css sidebar and compact classes

    How to reference an embedded image from CSS?

    How to override default CSS in cakePHP 1.3?

    how to control div size when other divs are changing [duplicate]

    How do I change my link's image on click?

    How To Adjust CSS List On Hover Image

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How do I fix the image size when changing to another image?

    How to change social network icons colors in fixed menu?

    How to expand wrapper when content is more?(with CSS)

    How can I properly add CSS and JavaScript to an HTML document?

    How to select a .list-cell, in javaFX CSS

    How to make the underlines the same size in all browsers with css?

    How to scroll a fixed div when I resize the browser window

    how to give multiple colors in the same cell in a full calendar?

    How to center data table header and data using in bootstrap w/o using CSS?

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    Showcase Image and Carousel Caption

    How to add a border-bottom-image with css

    how to center text AND have max width of 800px in CSS?

    CSS Selector-How to locate Parent Element

    How to stop html/css object from resizing

    how to load the dynamically changed css file