Website showing a css animation depending on current weather using yahoo api

Question

I want my website to display css animations depending on the weather data it receives from yahoo's weather api. So far to test this I have created an animation of clouds drifting across the screen, but only want them to show when it's cloudy. I have a piece of JS i believe should work, but i'm not sure how to implement the animation based on this.

I think my current cloud animation needs to go in 'body.cloudy, body.mostly-cloudy, body.partly-cloudy{}' but i'm not sure how

Below is my code, I have taken out some of the html (nav features ect) to shorten the code for this question.

My HTML:

  <body>

  <div class="container-fluid">



      <nav class="navbar navbar-default" style="z-index:2;">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
            <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
            <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
            <li><span class="searchIcon hidden-xs"></span></li>
            </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

    </div> <!-- /container -->

    <div class="sky">
      <div class="cloud cloud01"></div>
      <div class="cloud cloud02"></div>
      <div class="cloud cloud03"></div>
      <div class="cloud cloud04"></div>
      <div class="cloud cloud05"></div>
      <div class="cloud cloud06"></div>
    </div>

    <!-- /info menu -->
    <div class="information-menu">
    <!--menu items-->         
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my-js.js"></script>
  </body>

JS

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){
            var w=data.query.results.item;
            var class=w.condition.text;
            var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

            $('body').addClass(encodedclass);

       });

CSS

body{
  overflow: hidden;
  background-color: blue;
} 

.cloud {
  width: 512px;
  height: 512px;
  position: absolute;
}

.cloud01 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift 35s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift02 35s linear infinite;
}

.cloud03 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift02 55s linear infinite;
}

.cloud04 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift 45s linear infinite;
}

.cloud05 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift 30s linear infinite;
}

.cloud06 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift02 25s linear infinite;
}
@keyframes drift {
  from {transform: translate(-150px,-550px);}
  to {transform: translate(350px, 550px);}
}

@keyframes drift02 {
  from {transform: translate(350px,-550px);}
  to {transform: translate(1050px, 550px);}
}

body.cloudy, body.partly-cloudy, body.mostly-cloudy {

}

well i haven't added the code to say 'show the cloud animation when...' because i'm not sure where to put it — user2953989, Feb 25 '16 at 16:09
if i try simply changing the bg color depending on weather, i get this console error 'Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode' — user2953989, Feb 25 '16 at 16:14

Kelvin · Answer 1 · 2016-02-25T16:55:48.450

0

As your error mesage in your comment, you can try edit your code below:

var _class=w.condition.text;
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase();

Because in strict mode, some keyword like let, class of ES6 is not support at all browser now, and your browser trick an error like you read.

Update answer:

$('body').removeClass('party-cloud cloud mostly-cloud').addClass(encodedclass);

edited Feb 25 '16 at 16:55

answered Feb 25 '16 at 16:17

Kelvin

690
3
11

thanks, that made the background change colour! any ideas on how to get the animation to play depending on the weather? – user2953989 Feb 25 '16 at 16:26
Use setInterval for check weather change every some minute – Kelvin Feb 25 '16 at 16:31
i'm not sure that's what i want. So, at the moment i have a css animation (drift, attached to the cloud classes), but i only want the animation to play when 'body.cloudy, body.partly-cloudy, body.mostly-cloudy {}' is activated in the JS. I don't know how to put the animation I have already in that css class – user2953989 Feb 25 '16 at 16:47
Maybe you need remove class before add new class to change your animation. see update answer – Kelvin Feb 25 '16 at 16:56
Sorry, let me rephrase. So at the moment the cloud animation plays regardless. I want it so if 'body.cloudy' is activated in the JS because the weather data says it's cloudy, then the animation plays, otherwise the animation should not show. – user2953989 Feb 25 '16 at 17:19

Website showing a css animation depending on current weather using yahoo api

1 Answers1