Виджет погоды на сайт - скачай готовый или создай сам

Люди часто интересуются погодой. Многим интересно узнать погоду в их городе, в других городах(местах для отпуска) и так далее. Кто-то узнает эту информацию по телевидению, а кто-то на специальных интернет-ресурсах.

Виджеты погоды распространены на многих сайтах, взять к примеру сайты "синоптики", которые предоставляют информацию о погодных условиях в различных городах. Также это полезно для многих туристических агентств, чтобы предоставить клиенту информацию о погоде в различных местах отдыха.

Вы можете разместить её на вашем сайте. Можете заказать виджет у любого веб-разработчика, а можете сделать его вручную. В этой статье мы подробно расскажем о том, как создать виджет погоды на JavaScript. Такая разработка может добавить уникальности вашему сайту.

Создание каркаса. HTML

Для начала работы нам необходимо подключить все необходимые документы. Сначала подключим нашу таблицу стилей. Создадим непарный тег <link>, в атрибуте "rel" запишем значение "stylesheet". В атрибуте "href" укажите ссылку, если этого не сделать, то виджет будет отображаться некорректно.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Виджет погоды для сайта при помощи CSS3 и JS</title>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<!--Начало кода используемого для демонстрации -->
  <div id="controls">
<div align=right><a class="close" title="Закрыть" onclick="document.getElementById('controls').style.display='none';">X</a></div>

Для того, чтобы подключить скрипты создадим парный тег <style>. В его атрибуте "src" записываем ссылку на файл JavaScript, в котором мы и будем работать.

Ещё один момент — для создания нашего виджета используется несколько скриптов. Один из них мы уже подключили в теге <head>, второй же, будет находиться в нашем HTML документе. В теге <body> создаем тег <script>, в его атрибуте "type" записываем значение "text/javascript".

Ниже мы запишем основные функции для нашего виджета. В основном это функции для добавления стилей для элементов. Да, мы используем JavaScript, а не CSS документ.

Закрываем тег <script> и приступаем к добавлению контента. Нужно создать общий контейнер, который будет содержать в себе наш виджет. В нем мы размещаем остальные элементы.

Для размещения элементов мы используем тег SVG. Этот инструмент позволяет создавать уникальные элементы дизайна, которые нельзя создать при помощи HTML и CSS. Именно поэтому он является основой нашего проекта.

Стилизация виджета. CSS

Основа создана, теперь необходимо её оформить. Открываем CSS документ, в нем будем указывать основные стили.

CSS код мы используем для правильного позиционирования элемента на странице. Изменяем шрифты и добавляем анимацию, с помощью свойства "transition". Виджет содержит также списки, необходимо задать им позиционирование и удалить стандартную декорацию.

На скриншоте вы видите небольшой отрезок CSS кода — форматирование контейнера. Остальную часть кода можете найти в исходных материалах.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  background: #eee;
  background: linear-gradient(240deg, rgba(150, 50, 50, 0.3), rgba(0, 0, 200, 0));
}

nav ul {
  margin: 20px 20px 0 20px;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
}

JavaScript для виджета погоды

В этом примере JQuery не используется, а только стандартные JavaScript функции. Они будут работать совместно с SVG.

На скриншоте малая часть всего скрипта. Если хотите изучить его полностью — смотрите исходники. Кода довольно много, поэтому не советуем изменять значения без необходимых знаний.

var container = $('.container');
var card = $('#card');
var innerSVG = Snap('#inner');
var outerSVG = Snap('#outer');
var backSVG = Snap('#back');
var summary = $('#summary');
var date = $('#date');
var weatherContainer1 = Snap.select('#layer1');
var weatherContainer2 = Snap.select('#layer2');
var weatherContainer3 = Snap.select('#layer3');
var innerRainHolder1 = weatherContainer1.group();
var innerRainHolder2 = weatherContainer2.group();
var innerRainHolder3 = weatherContainer3.group();
var innerLeafHolder = weatherContainer1.group();
var innerSnowHolder = weatherContainer1.group();
var innerLightningHolder = weatherContainer1.group();
var leafMask = outerSVG.rect();
var leaf = Snap.select('#leaf');
var sun = Snap.select('#sun');
var sunburst = Snap.select('#sunburst');
var outerSplashHolder = outerSVG.group();
var outerLeafHolder = outerSVG.group();
var outerSnowHolder = outerSVG.group();

var lightningTimeout;

Заключение

В итоге у нас получился отличный виджет погоды:

За него нужно поблагодарить Стива Гарднера из Калифорнии. Разработка виджета — его заслуга.

Если хотите полностью разобраться в работе виджета — изучайте исходники, которые можно скачать на нашем сайте. Желаем вам удачи в разработках!

Скачать исходники

Теги:

Виджет погоды на сайт — как сделать?

Создание каркаса. HTML

Стилизация виджета. CSS

JavaScript для виджета погоды

Заключение

1 комментариев для “Виджет погоды на сайт — как сделать?”

Оставить своё мнение Отменить ответ