how to create effect in javascript

Question

how to create stackoverflow notification which is just like this enter image description here

isit created in javascript? I want to know how to create in.

could be a js animation, but this is not a "how to" site, this is a "i have this specific problem" site, read the faq — x4rf41, Nov 28 '13 at 17:39
@Deryck he/she has described that `just like this`, means not this but like this. I often wanted to know this, but never dared to ask it here. — Arshad Ali, Nov 28 '13 at 17:56
I'm new to this sort of programming and I just wanted to know this for my start-up, that is all. if it is not a suitable question then please see: [link](http://stackoverflow.com/questions/10864388/how-to-use-animation-to-animate-seekbar), there is also no tried out code — , Nov 28 '13 at 18:35
I'm new to this sort of programming and I just wanted to know this for my start-up, that is all. if it is not a suitable question then please [this](http://stackoverflow.com/questions/10864388/how-to-use-animation-to-animate-seekbar) and [also this](http://stackoverflow.com/questions/4177486/how-to-integrate-firefox-sync) [this](http://stackoverflow.com/questions/2612802/how-to-clone-a-list-in-python/2612815#2612815) [this](http://stackoverflow.com/questions/5726729/how-to-parse-json-using-nodejs/5726756#5726756), there is also no tried out code — , Nov 28 '13 at 18:45

Philip G · Accepted Answer · 2013-11-28T18:15:48.003

1

You could do it like in this fiddle: http://jsfiddle.net/X7RNK/

html:

<div id=container>
   <img id=pic src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak- prn2/s48x48/592272_191755377529982_1348162633_q.jpg' id=pic>
</div>

css:

#container{
    border: 1px SOLID #FF000;
    display: box;
    width: 48px;
    height: 48px;
    overflow: hidden;
}
#pic{
    position: relative;
    top: 0px;
}

jquery:

 $(document).ready(function(){
    setInterval(slidedown,2000);    
 });
 function slidedown(){

     $("#pic").animate({
         top: '48px'
     },500)
     setTimeout(function(){
        $("#pic").css({
           top: '0px'
        });     
     },1000);

 }

You need jquery.

EDIT: http://jsfiddle.net/X7RNK/1/ If you whant the fade effect aswell EDIT: 2 implemented numeric value instead of image in this fiddle: http://jsfiddle.net/X7RNK/5/ (Same princip as above)

edited Nov 28 '13 at 18:15

answered Nov 28 '13 at 17:59

Philip G

4,098
2
22
41

This doesn't need jQuery UI – Shai Nov 28 '13 at 18:02
doesn't animate require it? – Philip G Nov 28 '13 at 18:02
I checked it up, my bad. You don't need jquery ui. – Philip G Nov 28 '13 at 18:03
Nope, not for numeric properties. For animating colours, yes. – Shai Nov 28 '13 at 18:04
@PhilipG I want the `numeric` values instead of `image`. – Nov 28 '13 at 18:10
Updated code for numeric value instead of image, check out the fiddle in the secound edit – Philip G Nov 28 '13 at 18:16

NMunro · Answer 2 · 2013-11-28T18:25:49.800

You don't need jQuery, you can do it all with CSS3, if you want to, of course.

Please see the example here: http://spiritofchristmas.org.uk

HTML:

<span id="snow1" class="snow smallSnowflake"></span>

CSS:

.smallSnowflake {
  background: url('../assets/small_snowflake.png') no-repeat center;
}

.snow {
  position: absolute;
  -webkit-animation-name: snowAnimation;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: snowAnimation;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  animation-name: snowAnimation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#snow1 {
  left: 50%;
  width: 2000px;
  height: 2000px;
  margin-top: -1000px;
  margin-left: -1000px;

  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  animation-duration: 10s;
}

@-webkit-keyframes snowAnimation {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
        top: 0;        
        opacity: 0;
    }

    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
        top: 100%;        
        opacity: 0;
    }
}

@keyframes snowAnimation {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
        top: 0;        
        opacity: 0;
    }

    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
        opacity: 1;
    }    

    100% {
        -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
        top: 100%;        
        opacity: 0;
    }
}

how to create effect in javascript

2 Answers2