Написание JavaScript для шаблона интернет странички

() translation by (you can also view the original English article)

До сих пор мы создавали прочную HTML-страницу и применяли к ней различные стили. В этом курсе основное внимание будет уделено добавлению интерактивности на сайт с помощью JavaScript. Мы разделим его на две части:

Добавление плагинов и подготовка рабочего пространства
Инициализация плагинов и их настройка для дальнейшего использования

Обзор плагинов

Есть много плагинов jquery, которые мы можем использовать в этом курсе, но мы будем применим следующие:

Isotope

Фильтровать и сортировать невероятные макеты

Эта библиотека обширна и мощна, но она по-прежнему требует хороших навыков программирования. Она поддерживает различные типы макетов для фильтрации исортировки.
Scrollreveal

Легко обнаруживать элементы при входе в окно просмотра.

Я выбрал эту библиотеку, потому что она поддерживает прокрутку вниз и вверх. Она отображает элементы, когда они видны в вашем окне просмотра, и его очень легко реализовать.
SinglePageNav

Плагин jQuery обеспечивает плавную прокрутку и расширенную навигацию для веб-сайтов с одной страницей.
Fancybox

fancyBox - это инструмент, который предлагает приятный и элегантный способ добавления функций масштабирования для изображений, содержимого html и мультимедиа на ваши веб-страницы. Он построен на вершине популярного jQuery JavaScript-фреймворка, и его легко реализовать, и изменить для настройки.
Jquery

Подготовка рабочего пространства

Найдя необходимые плагины для нашего сайта, пришло время скачать и ссылаться на них в нашем index.html следующим образом:

  <!-- Javascript
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script type="text/javascript" src="js/jquery.2.1.3.min.js"></script>
  <script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
  <script type="text/javascript" src="js/scrollreveal.js"></script>
  <script type="text/javascript" src="js/singlenav.js"></script>
  <script type="text/javascript" src="js/jquery.fancybox.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>

Как вы видете, я загрузил их в новую папку под названиемjs, тк таким образом легко поддерживать и организовать файлы.

Файл scripts.js теперь пустой. Мы будем использовать его для написания дополнительного JavaScript и инициализации плагинов.

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

Пишем скрипт

Первое, что вам нужно узнать при написании jQuery, -это $(document).ready(function(){});. При загрузке DOM это запустит все функции. Вы можете узнать больше об этом при обучении jquery.

Мне очень нравится, когда у меня чистый код, поэтому вы часто видите, что я храню селектора в переменных (вы также увидите ниже), используя два пробела для отступов и руководство в 80 символов.

Презентационный блог

Презентационный блог или раздел в нашем дизайне идеально должен иметь window.height, фактически полный рост. Это возможно через модуль CCSS vh, но поскольку не все браузеры поддерживают эти устройства, мы будем придерживаться JavaScript.

Чтобы получить высоту окна, мы будем использовать window.innerHeight, который выводит высоту окна viewport в px.

  // =Hero
  // Alway make hero-container height equal to window height

  var $heroContainer = $('.hero');

  $heroContainer.height(window.innerHeight);

Здесь мы применили высоту видимого экрана к heroContainer, но нам также нужно убедиться, что всякий раз, когда пользователь изменяет размер браузера, мы будем повторно использовать высоту видового экрана для heroContainer. Следующий код будет прослушивать изменение размера окна и будет изменять высоту heroContainer«на лету»:

  // When user resize browser window, hero container needs to have the same
  // height as browser window height.

  $(window).resize(function() {
    $heroContainer.height(window.innerHeight);
  });

Сохранение селекторов в переменных позволяет их легко поддерживать и повторно использовать. У вас должно быть что-то вроде этого:

  // =Hero
  // Alway make hero-container height equal to window height

  var $heroContainer = $('.hero');

  $heroContainer.height(window.innerHeight);

  // When user resize browser window, hero container needs to have the same
  // height as browser window height.

  $(window).resize(function() {
    $heroContainer.height(window.innerHeight);
  });

Прежде всего, давайте сохраним селектора, которые мы будем использовать в переменных. На данный момент нам нужны menuIcon, navigation, mainNavigation и navigationLink. Переменные должны выглядеть так:

1	var $menuIcon = $('.menu-icon'),
2	$navigation = $('.navigation'),
3	$mainNavigation = $('.main-navigation'),
4	$navigationLink = $('.main-navigation a');

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

Давайте присоединим событие кликом на menuIcon, которое должно добавить имя класса, active к mainNavigation. active класс на mainNavigation оформлен в нашем CSS и делает его видимым.

$menuIcon.click(function(e) {
  e.preventDefault();

  $navigation.toggleClass('active');
});

Давайте теперь используем плагин SingleNavPage и инициализируем его в селекторе mainNavigation:

$mainNavigation.singlePageNav({
  filter: ':not(.external)',
  speed: 1000,
  currentClass: 'current',
  easing: 'swing',
  updateHash: false,
  beforeStart: function() {
  },
  onComplete: function() {
    $navigation.removeClass('active');
  }
});

Здесь я также добавил слушателя прокрутки, который добавит другой класс к элементу menuItem, если пользователь прокручивает больше высоты видового экрана. Я проверяю, является ли window.scrollY больше, чем window.innerHeight (высота видимого экрана). Япереключаю active класс для элемента menuItem

$(window).scroll(function() {
  if(window.scrollY > window.innerHeight) {
    $menuIcon.addClass('active');
  } else {
    $menuIcon.removeClass('active');
  }
});

Весь код для меню теперь выглядит следующим образом:

  // Menu initialization

  var $menuIcon = $('.menu-icon'),
      $navigation = $('.navigation'),
      $mainNavigation = $('.main-navigation'),
      $navigationLink = $('.main-navigation a');

  $(window).scroll(function() {
    if(window.scrollY > window.outerHeight) {
      $menuIcon.addClass('active');
    } else {
      $menuIcon.removeClass('active');
    }
  });

  $menuIcon.click(function(e) {
    e.preventDefault();

    $navigation.toggleClass('active');
  });

  $mainNavigation.singlePageNav({
      filter: ':not(.external)',
      speed: 1000,
      currentClass: 'current',
      easing: 'swing',
      updateHash: false,
      beforeStart: function() {
      },
      onComplete: function() {
        $navigation.removeClass('active');
      }
  });

Scrollreveal

ИнициализацияScrollReveal довольно проста, но я добавил небольшую конфигурацию. Если вы хотите узнать больше об использовании этого и других вариантах конфигурации, вы должны проверить проект на Github. Код для инициализации scrollreveal выглядит следующим образом:

// Scrollreveal initialize

var config = {
  easing: 'hustle',
  reset:  false,
  delay:  'onload',
  opacity: .2,
  vFactor: 0.2,
  mobile: false
}

window.sr = new scrollReveal(config);

Работа

В этом случае, что наш скрипт собирается сделать для нас? Есть три большие вещи:

преобразовать рабочий список в isotope макет
фильтровать элементы
добавить active класс к опции активного фильтра

Мы начнем с хранения необходимых переменных для этого плагина. javascript var $workFilterLinks = $('.work-filters li'), $container = $('.work-items'); Следующее - присоединить обработчик кликов для каждой ссылки фильтра. Это приведет к удалению active класса из всех фильтров и добавлению его к элементу. на который будем кликать.

$workFilterLinks.find('a').click(function(){
  $workFilterLinks.removeClass('active');

  $(this).parent().addClass('active');

  return false;
});

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

$container.isotope({
  // options
  filter: $(this).attr('data-filter'),
  itemSelector: '.isotope-item',
  animationEngine : "best-available",
  masonry: {
    columnWidth: '.isotope-item'
  }
});

Это будет фильтровать isotope элементы по атрибуту фильтра data-filter и добавить masonry кладки для рабочего раздела.

Код нашего рабочего раздела теперь должен выглядеть примерно так:

// =Work
// Isotope filters

var $workFilterLinks = $('.work-filters li'),
    $container = $('.work-items');

$workFilterLinks.find('a').click(function(){

  $workFilterLinks.removeClass('active');

  $container.isotope({
    // options
    filter: $(this).attr('data-filter'),
    itemSelector: '.isotope-item',
    animationEngine : "best-available",
    masonry: {
      columnWidth: '.isotope-item'
    }
  });

  $(this).parent().addClass('active');

  return false;
});

FancyBox

Последний плагин, который мы собираемся использовать, является Fancybox. Этот плагин будет прикреплен к кнопке воспроизведения из раздела видео.

// Fancybox

$('.video-play').fancybox({
  width   : '100%',
  closeClick  : false
});

После написания части JavaScript будет выглядеть примерно так:

$(document).ready(function(){

  // =Hero
  // Alway make hero-container height equal to window height

  var $heroContainer = $('.hero');

  $heroContainer.height(window.innerHeight);

  // When user resize browser window, hero container needs to have the same
  // height as browser window height.

  $(window).resize(function() {
    $heroContainer.height(window.innerHeight);
  });

  // =Work
  // Isotope filters

  var $workFilterLinks = $('.work-filters li'),
      $container = $('.work-items');

  $workFilterLinks.find('a').click(function(){

    $workFilterLinks.removeClass('active');

    $container.isotope({
      // options
      filter: $(this).attr('data-filter'),
      itemSelector: '.isotope-item',
      animationEngine : "best-available",
      masonry: {
        columnWidth: '.isotope-item'
      }
    });

    $(this).parent().addClass('active');

    return false;
  });

  // Menu initialization

  var $menuIcon = $('.menu-icon'),
      $navigation = $('.navigation'),
      $mainNavigation = $('.main-navigation'),
      $navigationLink = $('.main-navigation a');

  $(window).scroll(function() {
    if(window.scrollY > window.outerHeight) {
      $menuIcon.addClass('active');
    } else {
      $menuIcon.removeClass('active');
    }
  });

  $menuIcon.click(function(e) {
    e.preventDefault();

    $navigation.toggleClass('active');
  });

  $mainNavigation.singlePageNav({
    filter: ':not(.external)',
    speed: 1000,
    currentClass: 'current',
    easing: 'swing',
    updateHash: false,
    beforeStart: function() {
    },
    onComplete: function() {
      $navigation.removeClass('active');
    }
  });

  // Scrollreveal initialize

  var config = {

    easing: 'hustle',
    reset:  false,
    delay:  'onload',
    opacity: .2,
    vFactor: 0.2,
    mobile: false
  }

  window.sr = new scrollReveal( config );

  // Fancybox

  $(".video-play").fancybox({
    closeClick  : false,
  });
});

Итоговые размышнения

Всё готово! Взгляните на наше творение!

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

Мне бы очень хотелось увидеть, как вы будете работать с кодом - поделитесь идеями, используя некоторые из моих методов!

1	$(document).ready(function(){
2
3	// =Hero
4	// Alway make hero-container height equal to window height
5
6	var $heroContainer = $('.hero');
7
8	$heroContainer.height(window.innerHeight);
9
10	// When user resize browser window, hero container needs to have the same
11	// height as browser window height.
12
13	$(window).resize(function() {
14	$heroContainer.height(window.innerHeight);
15	});
16
17	// =Work
18	// Isotope filters
19
20	var $workFilterLinks = $('.work-filters li'),
21	$container = $('.work-items');
22
23	$workFilterLinks.find('a').click(function(){
24
25	$workFilterLinks.removeClass('active');
26
27	$container.isotope({
28	// options
29	filter: $(this).attr('data-filter'),
30	itemSelector: '.isotope-item',
31	animationEngine : "best-available",
32	masonry: {
33	columnWidth: '.isotope-item'
34	}
35	});
36
37	$(this).parent().addClass('active');
38
39	return false;
40	});
41
42	// Menu initialization
43
44	var $menuIcon = $('.menu-icon'),
45	$navigation = $('.navigation'),
46	$mainNavigation = $('.main-navigation'),
47	$navigationLink = $('.main-navigation a');
48
49	$(window).scroll(function() {
50	if(window.scrollY > window.outerHeight) {
51	$menuIcon.addClass('active');
52	} else {
53	$menuIcon.removeClass('active');
54	}
55	});
56
57	$menuIcon.click(function(e) {
58	e.preventDefault();
59
60	$navigation.toggleClass('active');
61	});
62
63	$mainNavigation.singlePageNav({
64	filter: ':not(.external)',
65	speed: 1000,
66	currentClass: 'current',
67	easing: 'swing',
68	updateHash: false,
69	beforeStart: function() {
70	},
71	onComplete: function() {
72	$navigation.removeClass('active');
73	}
74	});
75
76	// Scrollreveal initialize
77
78	var config = {
79
80	easing: 'hustle',
81	reset: false,
82	delay: 'onload',
83	opacity: .2,
84	vFactor: 0.2,
85	mobile: false
86	}
87
88	window.sr = new scrollReveal( config );
89
90	// Fancybox
91
92	$(".video-play").fancybox({
93	closeClick : false,
94	});
95	});