Плавная прокрутка по странице

Часто необходимо на лендингах реализовать плавную прокрутку по сайту. Для этого я использую якори.

Первым шагом будет подключение библиотеки JQuery, если она еще не подключена на вашем сайте:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-2.0.3.min.js"><\/script>')</script>

Теперь создадим html разметку:

<ul>
  <li><a href="#menu1">меню 1</a></li>
  <li><a href="#menu2">меню 2</a></li>
  <li><a href="#menu3">меню 3</a></li>
</ul>
<div id="menu1">
  якорь 1
</div>
<div id="menu2">
  якорь 2
</div>
<div id="menu3">
  якорь 3
</div>

Здесь у нас простые якори. Все работает но конечно без плавной прокрутки.
CSS для увеличения размера страницы:

div{
  margin-top:500px;
}

Ну и сам скрипт плавной прокрутки:

$('a[href*=#]').bind("click", function(e){
  var anchor = $(this);
  $('html, body').stop().animate({
     scrollTop: $(anchor.attr('href')).offset().top
  }, 1000);
  e.preventDefault();
});

Все вместе получим следующий результат:

7661

Введение в Emmet — основные команды.

Как веб-разработчик, я всегда искали инструменты для увеличения скорости разработки и её производительность. Эта статья для веб-разработчиков, которые часто работают с HTML и CSS но еще не используют Emmet.

Установка

Emmet это плагин который помогает писать код на много быстрее. На оф.сайте Emmet можно скачать плагин для редактора который вы используете. Если вы используете Sublime Text, как я, Эммет может быть легко установлена ​​через Package Control.

install-emmet
image-166

HTML аббревиатуры

Инициализация

С emmet на создание html документа уходят считанные секунды. Стоит ввести всего лишь ! или html:5 и клавишу Tab.

initializers
image-167

  • html:5 или ! для HTML5
  • html:xt для XHTML
  • html:4s для HTML4

Добавление классов, id и других атрибутов

Поскольку синтаксис Emmet похож на описание селекторов в CSS, пользоваться им очень просто.

classes-ids
image-168

Кроме того, вы можете комбинировать классы и идентификаторы. Например команда p.bar#foo выведет:

<p class="bar" id="foo"></p>

Для содержания тегов используются фигурные скобки h1{foo}:

<h1>foo</h1>

А для атрибутов используются квадратные скобки a[href=#]:

<a href="#"></a>

texts-attrs
image-169

Вложенности

Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень.

nesting
image-170

Группировка

Чтобы эффективно использовать вложения, не включая их в беспорядочное месиво операторов, вам необходимо группировать некоторые куски кода. Это как математика — нужно просто использовать скобки вокруг определенных частей. Например, (.foo> h1) + (. Бар> h2) получится:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

grouping
image-171

Скрытие имен тегов

Набрав код .item вы получите:

<div class="item"></div>

Но теперь emmet умнее, если вы объявите .item внутри , он сгенерирует:

<li class="item"></li>

implicit-tags
image-172

Вот список всех неявных имен тегов:

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup

Умножение

Вы можете определить, сколько раз элемент должен повторится с помощью операции *. Например ul>li*3 будет:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

multiplication
image-173

Нумерация

Для изменения названия класса или идентификатара с каждым следующим элементом необходимо просто добавить знак $, ul>li.item$*3, получим:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

numbering
image-174

CSS аббревиатуры

Значение

В Emmet вы можете использовать для CSS сокращений. Допустим, вы хотите определить ширину. Введите w100, и получите:

width: 100px;

values
image-175

А команда h10p+m5e выведет:

height: 10%;
margin: 5em;

Вот список некоторых команд:

  • p → %
  • e → em
  • x → ex

Дополнительные параметры

Используя команды @f получим:

@font-face {
  font-family:;
  src:url();
}

Но некоторые свойства, такие как background-image, border-radius, font, @font-face, text-outline, text-shadow, имеют дополнительные параметры, которые можно активировать используя +. Используя @f+ мы получим:

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

extra
image-176

Нестрогий поиск

Модуль CSS использует нестрогий поиск, чтобы найти неизвестную аббревиатуру. Так, каждый раз, когда вы вводите неизвестныю аббревиатуру, Emmet ищет ближайшее определение сниппета. Например: ov:h и ov-h и ovh и oh будет генерировать одно и то же:

overflow: hidden;

fuzzy-search
image-177

Префиксы

CSS3 отличная штука, но его префиксы очень сложные. Для них в Emmet есть тоже аббревиатуры. Например, аббревиатура trs даст нам:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

vendor-prefixes
image-178

Вы также можете добавить префиксы к любому виду элемента. Вам просто нужно использовать — префикс. Так,-super-foo получим:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что делать, если вы не хотите, чтобы выводились все атрибуты? Нет проблем. Вы можете точно определить, какие браузеры необходимо поддерживать. Например, -wm-trf выведет:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w → -webkit-
  • m → -moz-
  • s → -ms-
  • o → -o-

Градиент

Говоря о раздражающих особенностей CSS3, мы не можем забыть градиенты. Эти длинные определения с различными обозначениями теперь могут быть легко заменены с краткой аббревиатурой. Пример lg(left, #fff 50%, #000):

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

gradient
image-179

На последок…

Это основы работы с замечательным плагином Emmet. Полный список команд вы можете посмотреть перейдя по ссылке на официальную документацию.

Динамическая геокарта с SVG и JQuery

Когда мне нужно создавать диаграммы, моим первым выбором является — диаграммы Google или другая специализированная библиотека. Но иногда мне нужно некоторые особенности или специальные возможности, которые я не могу найти в таких библиотеках. В этих случаях, SVG изображения становятся очень полезными.

В этой статье мы создадим динамическую геокарту Италии используя SVG изображение.

Создание SVG карты в Illustrator

Во-первых, нарисуем карту Италии с Illustrator:

Создание SVG карты в Illustrator
image-103

Каждый регион это единый объект, и каждый из них имеет свое имя совпадающим с кодом используемый в базе данных, чтобы определить свои данные (например: «tos» для Тоскане).

Карта должна сохранена в виде файла SVG. При сохранении вы должны установить опцию «CSS Properties» — «Style Elements» , как показано ниже:

сохранение файла SVG
image-104

При открытии файла который вы только что создали, вы увидите, что он содержит набор g тегов, идентификаторы совпадающие с именами слоев в Illustrator.

Создание HTML-файла

Каждый элемент g тега имеет polygon с классом st0 и через CSS свойства stroke и fill можно изменять их вид:

polygon с координатами
image-105

Если вы измените эти значения, карта будет сразу меняться:

заливка и обводка карты
image-106

Теперь мы можем использовать этот код, чтобы создать наш HTML файл с SVG, как показано ниже(код был сокращен для удобства):

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Map Sample</title>
    <style type="text/css" media="all">
        .map svg {
            height: auto;
            width: 350px;
        }
        .map g {
            fill: #ccc;
            stroke: #333;
            stroke-width: 1;
        }
    </style>
</head>
<body>
    <div class="map">
        <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -21.6 761 919" style="enable-background:new 0 -21.6 761 919;" xml:space="preserve">
            <g id="sar">
                <polygon class="st0" points="193,463 ...	"/>
            </g>
            <!-- etc ... -->
        </svg>
    </div>
</body>
</html>

Здесь атрибут style внутри svg тега был стерт и заменены на новые значения, расположенные в head; все g элементы были изначально заполнены светло-серым цветом.

Класс st0 больше не используется (его можно удалить из кода), и он был заменен на .map g. Это не является обязательным, вы можете использовать любые CSS селекторы.

Второй шаг состоит в установки связи между нашей картой и некоторыми данными, полученными из нашей базы.

Добавление JSON данных в JavaScript

Данные извлекаются в формате JSON и добавляются непосредственно в наш HTML файл (в реальном проекте, данные будут получены с помощью Ajax или подобных технологий).

Теперь наша страница будет содержать JSON в нашем JavaScript файле, который выглядит следующим образом (опять же, сокращенно):

var regions=[
    {
        "region_name": "Lombardia",
        "region_code": "lom",
        "population": 9794525
    },
    {
        "region_name": "Campania",
        "region_code": "cam",
        "population": 5769750
    },
    // etc ...
];

После этого, выбирается цвет (в нашем случае, #0b68aa), и мы назначить его в регион с наибольшим населением. Другие регионы будут окрашены с этим же цветом но с тоном в соответствии с их населением в отношении от максимального значения.

Прежде всего, мы должны определить регион с максимальным значением населения. Это может быть сделано с помощью нескольких строк кода.

После того, как временный массив, содержащий значения населения построен, мы можем использовать метод Math.max:

var temp_array= regions.map( function( item ) {
    return item.population;
});
var highest_value = Math.max.apply( Math, temp_array );

Теперь мы можем перебирать все элементы regions и применить к ним процент прозрачности в соответствии с формулой население / максимальное значение (с JQuery):

$(function() {
  for(i=0; i < regions.length; i++) {
    $('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
     + regions[i].population/highest_value
     + ')'});
    }
});

Получим следующий результат:

140687857705_browser
image-107

Добавление интерактивности с помощью CSS и JQuery

Карта может быть улучшена добавлением некоторой интерактивности. Мы хотим, чтобы значения населения отображались, когда курсор мыши находится над каким либо регионом.

Во-первых, мы добавим CSS для g:hover и нового класса info_panel в стили наших информационных блоков:

.map g:hover {
  fill: #fc0 !important;
  cursor: help;
}
.info_panel {
  background-color: rgba(255,255,255, .7);
  padding: .3em;
  font-size: .8em;
  font-family: Helvetica, Arial, sans-serif;
  position: absolute;
}
.info_panel::first-line {
   font-weight: bold;
}

Модификация !important в .map g:hover необходима для изменения значения спецификации fill, в противном случае значение не изменится.

Затем мы должны изменить наш предыдущий цикл for, добавив .data() для хранения информации, которая будет отображаться при наведении:

for (i = 0; i < regions.length; i++) {
    $('#'+ regions[i].region_code)
    .css({'fill': 'rgba(11, 104, 170,'
         + regions[i].population/highest_value
         +')'}).data('region', regions[i]);
}

Наконец, мы добавим эффекты наведении курсора мыши:

$('.map g').mouseover(function (e) {
  var region_data=$(this).data('region');
  $('<div class="info_panel">'
    + region_data.region_name
    + '<br>'
    + 'Population: '
    + region_data.population.toLocaleString("en-UK")
    + '</div>').appendTo('body');
}).mouseleave(function () {
  $('.info_panel').remove();
}).mousemove(function(e) {
    var mouseX = e.pageX, // X coordinates of mouse
        mouseY = e.pageY; // Y coordinates of mouse
    $('.info_panel').css({
      top: mouseY-50,
      left: mouseX - ($('.info_panel').width() / 2)
    });
});
    Как это работает:

  • Во-первых, с наведении курсора мыши, мы создаем div, содержащий информацию для отображения (регион и население). Он строится каждый раз при наведении курсора мыши на g элемент и добавляется к нашей странице;
  • mouseleave удаляет это div, когда курсор выходит из предел своего региона;
  • Последний метод, mousemove, извлекает координаты мыши и назначает их генерируемому div.

Вот конечный результат на CodePen:


See the Pen sKagI by roma (@romasport) on CodePen.7661