HTML News Lower Third

html-news-lower-third.markdown

HTML News Lower Third

A news like lower third with time, weather and animated Logo.

First section: Story type, Show name

Second section: Title, Clock, Weather and logo

Third section: Next item

A Pen by LeonimuZ on CodePen.

License.

index.html

<div id="content">
                <div class="chromakey">
                    <div id="lower-third" class="pure-g">
                        
                        <div class="section-1 pure-u-1">
                            <div class="pure-g">
                                <div class="pure-u-1-8 current">TV News</div>
                                <div class="pure-u-1-2"></div>
                                <div class="pure-u-1-8"></div>
                                <div class="pure-u-1-4 name text-center ">News Hour Now</div>
                            </div>
                        </div>

                        <div class="section-2 pure-u-1">
                            <div class="pure-g">

                                <div class="pure-u-3-4">
                                    <h1 class="headline">Doctor Who "The Day of the Doctor" to be simulcast November 23rd around the world, space and time</h1>
                                </div>

                                <div class="pure-u-1-4">
                                    <div class="pure-g information">
                                        <div class="pure-u-1-2 clock" id="time"></div>
                                        <div class="pure-u-1-2 temperature" id="weather"></div>
                                        <div class="pure-u-1 logo"><span>NewsNetwork</span></div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="section-3 pure-u-1">
                            <ul class="pure-g">
                                <li class="pure-u-1-4">Futurama Cancelled</li>
                                <li class="pure-u-1-4">Insert Gossip here</li>
                                <li class="pure-u-1-4">Ben Affleck Batman</li>
                                <li class="pure-u-1-4">Star Wars VII</li>
                            </ul>
                        </div>

                    </div>
                </div>

script.js

/*
 * simpleWeather
 * http://simpleweatherjs.com
 *
 * A simple jQuery plugin to display the current weather
 * information for any location using Yahoo! Weather.
 *
 * Developed by James Fleeting <@twofivethreetwo> <http://iwasasuperhero.com>
 * Another project from monkeeCreate <http://monkeecreate.com>
 *
 * Version 2.3.0 - Last updated: June 16 2013
 */
(function(e){"use strict";e.extend({simpleWeather:function(t){t=e.extend({zipcode:"",woeid:"2357536",location:"",unit:"f",success:function(e){},error:function(e){}},t);var n=new Date;var r="https://query.yahooapis.com/v1/public/yql?format=json&rnd="+n.getFullYear()+n.getMonth()+n.getDay()+n.getHours()+"&diagnostics=true&callback=?&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=";if(t.location!==""){r+='select * from weather.forecast where location in (select id from weather.search where query="'+t.location+'") and u="'+t.unit+'"'}else if(t.zipcode!==""){r+='select * from weather.forecast where location in ("'+t.zipcode+'") and u="'+t.unit+'"'}else if(t.woeid!==""){r+="select * from weather.forecast where woeid="+t.woeid+' and u="'+t.unit+'"'}else{t.error("Could not retrieve weather due to an invalid WOEID or location.");return false}e.getJSON(r,function(n){if(n!==null&&n.query.results!==null&&n.query.results.channel.description!=="Yahoo! Weather Error"){e.each(n.query.results,function(e,n){if(n.constructor.toString().indexOf("Array")!==-1){n=n[0]}var r=new Date;var i=new Date(r.toDateString()+" "+n.astronomy.sunrise);var s=new Date(r.toDateString()+" "+n.astronomy.sunset);if(r>i&&r<s){var o="d"}else{var o="n"}var u=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW","N"];var a=u[Math.round(n.wind.direction/22.5)];if(n.item.condition.temp<80&&n.atmosphere.humidity<40){var f=-42.379+2.04901523*n.item.condition.temp+10.14333127*n.atmosphere.humidity-.22475541*n.item.condition.temp*n.atmosphere.humidity-6.83783*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)-5.481717*Math.pow(10,-2)*Math.pow(n.atmosphere.humidity,2)+1.22874*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)*n.atmosphere.humidity+8.5282*Math.pow(10,-4)*n.item.condition.temp*Math.pow(n.atmosphere.humidity,2)-1.99*Math.pow(10,-6)*Math.pow(n.item.condition.temp,2)*Math.pow(n.atmosphere.humidity,2)}else{var f=n.item.condition.temp}if(t.unit==="f"){var l="c";var c=Math.round(5/9*(n.item.condition.temp-32));var h=Math.round(5/9*(n.item.forecast[0].high-32));var p=Math.round(5/9*(n.item.forecast[0].low-32));var d=Math.round(5/9*(n.item.forecast[1].high-32));var v=Math.round(5/9*(n.item.forecast[1].low-32))}else{var l="f";var c=Math.round(9/5*n.item.condition.temp+32);var h=Math.round(9/5*n.item.forecast[0].high+32);var p=Math.round(9/5*n.item.forecast[0].low+32);var d=Math.round(5/9*(n.item.forecast[1].high+32));var v=Math.round(5/9*(n.item.forecast[1].low+32))}var m={title:n.item.title,temp:n.item.condition.temp,tempAlt:c,code:n.item.condition.code,todayCode:n.item.forecast[0].code,timeOfDay:o,units:{temp:n.units.temperature,distance:n.units.distance,pressure:n.units.pressure,speed:n.units.speed,tempAlt:l},currently:n.item.condition.text,high:n.item.forecast[0].high,highAlt:h,low:n.item.forecast[0].low,lowAlt:p,forecast:n.item.forecast[0].text,wind:{chill:n.wind.chill,direction:a,speed:n.wind.speed},humidity:n.atmosphere.humidity,heatindex:f,pressure:n.atmosphere.pressure,rising:n.atmosphere.rising,visibility:n.atmosphere.visibility,sunrise:n.astronomy.sunrise,sunset:n.astronomy.sunset,description:n.item.description,thumbnail:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.condition.code+o+"s.png",image:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.condition.code+o+".png",tomorrow:{high:n.item.forecast[1].high,highAlt:d,low:n.item.forecast[1].low,lowAlt:v,forecast:n.item.forecast[1].text,code:n.item.forecast[1].code,date:n.item.forecast[1].date,day:n.item.forecast[1].day,image:"http://l.yimg.com/a/i/us/nws/weather/gr/"+n.item.forecast[1].code+"d.png"},city:n.location.city,country:n.location.country,region:n.location.region,updated:n.item.pubDate,link:n.item.link};t.success(m)})}else{if(n.query.results===null){t.error("An invalid WOEID or location was provided.")}else{t.error("There was an error retrieving the latest weather information. Please try again.")}}});return this}})})(jQuery);

/* 
    https://github.com/Lwangaman/jQuery-Clock-Plugin
    No licencing info was included.
 */

(function($){$.clock={version:"2.0.2",locale:{}};t=[];$.fn.clock=function(d){var c={it:{weekdays:["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"],months:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"]},en:{weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],months:["January","February","March","April","May","June","July","August","September","October","November","December"]},es:{weekdays:["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"],months:["Enero","Febrero","Marzo","Abril","May","junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]},de:{weekdays:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],months:["Januar","Februar","März","April","könnte","Juni","Juli","August","September","Oktober","November","Dezember"]},fr:{weekdays:["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],months:["Janvier","Février","Mars","Avril","May","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]},ru:{weekdays:["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],months:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"]}};return this.each(function(){$.extend(c,$.clock.locale);d=d||{};d.timestamp=d.timestamp||"z";y=new Date().getTime();d.sysdiff=0;if(d.timestamp!="z"){d.sysdiff=d.timestamp-y}d.langSet=d.langSet||"en";d.format=d.format||((d.langSet!="en")?"24":"12");d.calendar=d.calendar||"true";d.seconds=d.seconds||"true";if(!$(this).hasClass("jqclock")){$(this).addClass("jqclock")}var e=function(g){if(g<10){g="0"+g}return g},f=function(j,n){var r=$(j).attr("id");if(n=="destroy"){clearTimeout(t[r])}else{m=new Date(new Date().getTime()+n.sysdiff);var p=m.getHours(),l=m.getMinutes(),v=m.getSeconds(),u=m.getDay(),i=m.getDate(),k=m.getMonth(),q=m.getFullYear(),o="",z="",w=n.langSet;if(n.format=="12"){o=" AM";if(p>11){o=" PM"}if(p>12){p=p-12}if(p==0){p=12}}p=e(p);l=e(l);v=e(v);if(n.calendar!="false"){z=((w=="en")?"<span class='clockdate'>"+c[w].weekdays[u]+", "+c[w].months[k]+" "+i+", "+q+"</span>":"<span class='clockdate'>"+c[w].weekdays[u]+", "+i+" "+c[w].months[k]+" "+q+"</span>")}$(j).html(z+"<span class='clocktime'>"+p+":"+l+(n.seconds=="true"?":"+v:"")+o+"</span>");t[r]=setTimeout(function(){f($(j),n)},1000)}};f($(this),d)})};return this})(jQuery);


$(document).ready(function() {
  $.simpleWeather({
    zipcode: '',
    woeid: '2459115',
    location: '',
    unit: 'f',
    success: function(weather) {
      html = weather.temp+'&deg;'+weather.units.temp;
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('NO DATA');
    }
  });

  $("#time").clock({
    "calendar":"false",
    "seconds":"false"
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

/*===========================================================================
    stylesheet by:
    Leon Taveras (LeonimuZ) || http://about.me/lnz
===========================================================================*/

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

// Greenblue
$turquoise: #1abc9c;
$green-sea: #16a085;
// Green
$emerald: #2ecc71;
$nephritis: #27ae60;
// Blue
$peter-river: #3498db;
$belize-hole: #2980b9;
// Magenta
$amethyst: #9b59b6;
$wisteria: #8e44ad;
// Dark Blue
$wet-asphalt: #34495e;
$midnight-blue: #2c3e50;
// Yellow
$sun-flower: #f1c40f;
$orange: #f39c12;
// Orange
$carrot: #e67e22;
$pumpkin: #d35400;
// Red
$alizarin: #e74c3c;
$pomegranate: #c0392b;
// White
$clouds: #ecf0f1;
$silver: #bdc3c7;
$whitesmoke: #f0f0f0;
// Grey
$concrete: #95a5a6;
$asbestos: #7f8c8d;
$black: #111111;

@function black($opacity){
    @return rgba(0,0,0,$opacity);
}

@function white($opacity){
    @return rgba(255,255,255,$opacity);
}

$title-font: "Montserrat", sans-serif;

h1, h2, h3, h4, h5, h6 { font-family: $title-font; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

@mixin prefixer($name, $argument) {
    #{$name}: $argument;
    -webkit-#{$name}: $argument;
    -moz-#{$name}: $argument;
    -ms-#{$name}: $argument;
    -o-#{$name}: $argument;
}

@mixin keyframes($name) {
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @-ms-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}

//===========================================================================
//    Actual code
//===========================================================================

#lower-third {
    margin: 100px auto;
    width: 1200px;
    font-family: $title-font;
    text-transform: uppercase;
    .section-1 {
        .current,.name {
            padding: 4px;
            background-color: $asbestos;
            font-family: $title-font;
            font-size: 14px;
            line-height: 1;
            color: $whitesmoke;
        }
    }

    .section-2 {
        overflow: hidden;
        border-top: 3px solid $asbestos;
        color: $whitesmoke;
        .headline {
            margin: 0;
            padding: 8px;
            height: 80px;
            width: 100%;
            background: $black;
            font-size: 28px;
            line-height: 31px;
        }
        .information {
            background: $black;
            border-left: 1px solid white(.1);
            text-align: center;
            .clock, .temperature {
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                font-weight: 700;
            }
            .clock {
                border-right: 1px solid white(.1);
            }
            .logo {
                overflow: hidden;
                height: 40px;
                border-top: 1px solid white(.1);
                line-height: 40px;
                font-weight: 700;
                font-style: italic;
                span {
                    width: 100%;
                    @include prefixer(animation, logo 20s linear infinite);
                }
            }
        }
    }

    .section-3 {
        background: $black;
        color: $silver;
        border-top: 1px solid white(.1);
        font-weight: 700;
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            padding: 3px 6px;
            border-left: 6px solid $asbestos;
        }
    }
}

@include keyframes(logo) {
    0% {
        left: 240px;
        font-size: 62px;
        text-shadow: none;
        opacity: 0;
    }    
    
    5% { opacity: 1; }

    50% {
        left: -535px; // Higher negative value depending on how long the animated name is
        font-size: 62px;
        opacity: 1;
    }

    51% { opacity: 0; }

    57% {
        left: 0;
        font-size: 29px;
        text-shadow: none;
        opacity: 0;
    }

    62% {
        opacity: 1;
        text-shadow: 0 0 10px $silver;
    }

    95% { opacity: 1; }

    100% {
        opacity: 0;
        font-size: 29px;
        text-shadow: none;
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />