blolg

1. необходимо убрать justify-content: space-between и элементам добавить соответствующие отступы слева и справа.
2. такой возможности нет. в качестве решения могут быть вот эти два варианта https://jsfiddle.net/6rz591sk/ и https://jsfiddle.net/rtyto1mg/

Для реализации таких эффектов хорошо подходит scrollmagic

kenwheeler.github.io/slick

jquery.inputmask позволяет сделать нечто подобное.

//email mask
  $(selector).inputmask({
    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
      pastedValue = pastedValue.toLowerCase();
      return pastedValue.replace("mailto:", "");
    },
    definitions: {
      '*': {
        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
        cardinality: 1,
        casing: "lower"
      }
    }
  });

Однако 2-ю проблему по-моему он тоже не решает.

Можно вот этот плагин использовать jscrollpane.kelvinluck.com

Freewall
Masonry

Как вариант можно так codepen.io/blolg/pen/qdymbW

В приведённом примере использован плагин shiningImage.

jscrollpane.kelvinluck.com

никак.
используйте карту от google.

Можно указать массив источников.
gulp.src(['src/style/tpl-1/*.scss', 'src/style/tpl-2/*.scss']).pipe(...)

kenwheeler.github.io/slick хорошо для этого подходит.
Можно указать на каком разрешении какое количество слайдов выводить.

Здесь www.dejurka.ru выкладывают подборки сайтов, например, сайты с фоновым видео www.dejurka.ru/web-design/video-in-web-design

А также на habrahabr.ru еженедельно выходит подборка материалов для веб-разработки, которая включает набор сайтов с интересным дизайном и функционалом. Вот, например, последняя habrahabr.ru/company/zfort/blog/261811

А для того, чтобы повысить свой уровень, не достаточно просто смотреть примеры, нужно самому пробовать.

При помощи псевдоэлемента. Задать ему ширину 0, а при ховере 100%. А также transition: width 0.2s ease 0s (как в приведённом примере) и z-index: -1.