JSON Animated Weather Report by Andrew Pougher

JSON Animated Weather Report ~ Andrew Pougher

by Andrew Pougher

HTML

<div id="snowreport"></div>

CSS

#snowreport {  width: 100%;}
#snowreport span{
    position: absolute;
    top: 40px;
  
    }

#snowreport span:first-child {
    top: 20px;
    }

JavaScript

var data = [
    {
        "id":"1",
        "description":"Snow Report   Les Arcs  41 °F	New Snow: 6”		Base Depth: 36”		Lifts Open: 97% ",
        "lat":"1.1.1.1",
        "img":"http://www.andrewpougher.co.uk/clients/snotels/beta/img/snowcloud-ico.png",
        "lang":"aurel"
    },
    {
        "id":"2",
        "description":"Snow Report   Calgary  44 °F	New Snow: 1”		Base Depth: 23”		Lifts Open: 37%",
        "lat":"1",
        "img":"http://www.andrewpougher.co.uk/clients/snotels/beta/img/snowcloud-ico.png",
        "lang":"2.2.2.2"
    }
];

var qs = []

$.each(data, function(index, item){ 

           qs.push("<span><img src="+item.img+">"+item.description +"</span>" );
         
     });
qs= qs
$('#snowreport').append(qs)

// hide all quotes except the first
$('#snowreport span').hide().eq(0).show();

var pause = 3000;
var motion = 500;

var quotes= $('#snowreport span');
var count = quotes.length;
var i = 0;

setTimeout(transition,pause);



function transition(){
    quotes.eq(i).animate({opacity:'toggle', top:'40px'}, motion);

    if(++i>=count){
        i=0;
    }

    quotes.eq(i).animate({opacity:'toggle', top:'20px'}, motion);
    
    setTimeout(transition, pause);
}