bad-bot-welcome

logo

Презентационная целевая страница (Landing Page) от фотографа – это индивидуальная визитная карточка прошедшего события с оригинальным адаптивным дизайном. Основная задача – коммуникация между исполнителем, заказчиком и конечным потребителем - людьми, присутствовавшими на мероприятии.

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

Разработка Landing page. Готовый результат.

Целевая страница открывается в новой вкладке браузера. Вид на стационарных машинах.

Характеристики Landing page от фотографа
Дополнительные возможности:Кроссбраузерная совместимость, Выпадающее меню, favicon, Кнопка наверх
Анимация:CSS, JS
Кодирование:PHP, Bootstrap3, CSS3, HTML5, JQuery, Ajax, LESS
Плагины JQuery:wow.js, fittext.js, isotope.js, lazyload.js, scrollTo.js, fancybox.js, panorama_viewer.js, jquery.easing.js
Дизайн:Отзывчивый (Responsive)
Веб-формы:Поделиться в социальных сетях. Обратная связь.
Семантическая микроразметка:OpenGraph, Schema.org

Работа по разработке веб страницы начинается с идеи. Первым делом посетил Википедию и подчерпнул информацию о спортсменке. Олимпийские игры, Чемпионаты мира, Чемпионаты Европы - впечатляющий список регалий вызывающий уважение. От организаторов открытой тренировки по боксу получил по почте два документа. Сценарный план мероприятия и афишу. Пробежав глазами по сценарию, сразу представил будущую структуру web-страницы, а точнее основные секции и порядок их следования.

Подбор основных цветов не был трудным, так как в афише есть логотип спортсменки. Белый цвет выбрал основным для фоновых заливок секций, а карминово-красный цвет закрепил за элементами навигации. В единственной секции карминово-красный цвет выступает в качестве основного – это информационный блок.

 

При детальном изучении афиши пришел к выводу о необходимости её использования в дизайне целевой страницы. Другого материала нет и нужно выжимать из имеющегося по максимуму. Файл формата jpeg разрешением 1748 x 2480 пикселей с 96 точками на дюйм. Это готовый и сжатый баннер мероприятия для сети интернет.

Так как большое качественное изображение на первом видовом экране интернет страниц - это своеобразный стандарт в web 2.0 возникает задача по пересадке силуэта мастера спорта на новый фон и из книжной ориентации афиши нужно сделать альбомную для web страницы. Обусловлено это особенностями вёрстки конкретной страницы и выводом её графики для различных устройств. Если расположить фигуру мастера спорта ровно по центру, то такой снимок будет одинаково замечательно смотреться на десктопах, планшетах и смартфонах. При таком масштабировании отсекаются крайние области, не имеющие никакой ценности для зрителя.

Ступенчатость фонового градиента на изображении бросается в глаза. Для вёрстки афиши использовалась студийная фотография мастера спорта, выполненная другим фотографом. Анализируя светотеневой рисунок, пришел к выводу о том что, в схеме использовалось четыре источника света. Два моделирующих под острым углом, скорей всего, стрипбоксы, фоновый, и один рисующий на журавле. Судя по характеру теней – применялся световой модификатор портретная тарелка.

Картинка попала ко мне, пройдя два разных этапа обработки. При съёмочном пост-продакшене оригинальной фотографии и при вёрстке макета афиши. Если фон не подвергался ретуши, значит, так задумывал автор. Хотя многие ретушеры стараются сгладить имеющиеся градиенты по максимуму и отдельно работают с основным объектом съёмки и бэкграундом. По моим стандартам качество фона афиши для первого видового экрана web страницы не подходит – это необходимо исправить и сделать его более ровным и мягким. Так как баннер сжат, возникает ряд определённых трудностей для поставленной задачи.

 

Необходимо аккуратно отделить фигуру спортсменки от фона, создав маску вырезания. И сделать это, стараясь потерять как можно меньше деталей в волосах. Первым делом смотрю на каналы в photoshop, изучая имеющиеся контрасты в снимке между бэкграундом и интересующими меня объектами.


Красный канал изображения. Слабый контраст между фоном и волосами.


Красный канал

Зелёный канал изображения. Средний контраст между фоном и волосами.


Зелёный канал

Синий канал изображения. Самый сильный контраст между фоном и волосами.


Синий канал

При детальном изучении выявил наиболее подходящий канал для выделения волос - синий. Именно в нём лучший контраст, но и в нём же наибольшая «гребёнка» пикселей фона после оптимизации для интернета. И на некоторых участках тонкие элементы причёски совмещены со сжатым градиентом фона.

 

Маску для замены бекграунда готовил в четыре этапа:

    • — Обводка границ путями

    • — Создание альфа канала для выделения волос

    • — Совмещение альфа канала и контура в одну маску

    • — Доводка отдельных элементов инструментами Dodge Tool и Burn Tool

Совмещал и дорабатывал маску вырезания на слоях. На изображении ниже "бегущими муравьями" представлен контур выделения путями. По эстетическим соображениям привожу пример всего силуэта. В процессе оконтуривания включил элементы человеческого тела, на которых не может быть прозрачных участков – уши, щёки и шея. Всегда так подстраховываюсь, так как особенность женских причесок – это торчащие локоны, хвосты, пряди, в которых могут быть прозрачные или полупрозрачные области рядом с кожей. В зависимости от применяемой техники выделения тот или иной инструмент, например «Refine Edge», может сделать маску прозрачной в этой области и чтобы впоследствии одним мазком кисти восстановить сто процентную непрозрачность, поступаю именно так.

Контур обозначен "бегущими муравьями"

Выделенный контур инструмента Path

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

preloader
 

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

preloader
 

Следующий подготовленный графический элемент для презентационной страницы символы «RU» выполненные в виде жар птиц. Самой большой трудностью было найти в интернете приемлемый референс по пиксельным размерам и неискаженной геометрией. Сама идея использования возникла при просмотре формы олимпийской сборной России, а так как Софья Очигава серебряный призёр Олимпийских Игр в Лондоне, посчитал необходимым это подчеркнуть в секции перечисления регалий.


Фрагмент формы сборной России.


Фрагмент формы сборной

Референс символов RU.


Найденный референс

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

Контур Path и готовый символ

Контур Path и готовый символ

Так же была подготовлена картинка для корректной работы парсера микроразметки opengraph - cover.jpg, которая отображается социальными сетями в снипете, если посетитель решил поделиться страницей.

Мастер спорта на международных соревнованиях выступает за Российскую Федерацию. Для акцентирования внимания зрителя на этом факте решил оформить заголовки <h1> в национальный триколор с помощью CSS.


Html структура:


	<div class="russia">
		<h2 class="section-heading blue">Торжественное открытие</h2>
	</div>
	

CSS градиент триколора:

.russia {
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 34%, rgba(0,0,255,0.5) 35%, rgba(0,0,255,0.5) 67%, rgba(255,0,0,0.5) 68%, rgba(255,0,0,0.5) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 34%,rgba(0,0,255,0.5) 35%,rgba(0,0,255,0.5) 67%,rgba(255,0,0,0.5) 68%,rgba(255,0,0,0.5) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 34%,rgba(0,0,255,0.5) 35%,rgba(0,0,255,0.5) 67%,rgba(255,0,0,0.5) 68%,rgba(255,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ff0000',GradientType=0 );
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
margin-top: -10px;
}

Обводка заголовка:


  .blue{color:#fff;font-weight:900;text-shadow: -1px 0 #7466E8, 0 1px #7466E8, 1px 0 #7466E8, 0 -1px #7466E8;}
  

Чтобы текст заголовка не сливался, особенно на белых участках национального флага сделал одно пиксельную синюю обводку.

 

Получив файлы по почте, незамедлительно приступил к подготовке web-страницы. Разработка Landing page задача не простая, поэтому этап создания рабочего кода можно разбить на два шага. Кодирование до репортажной съёмки мероприятия и после. В общем, писал и редактировал код до максимальной готовности, так чтобы после съёмки вставить только пути к изображениям. Заранее создал структуру папок для изображений соответствующую разделам плана. Разметку основных секций тегом <section> делал в первом шаге, присваивая уникальный идентификатор id, и одновременно добавляя ссылки в навигационный бар. Название секций и пункты меню, в общем, соответствуют разделам сценарного плана мероприятия. Но есть секции, не включенные в меню, они следуют после основных разделов дополнением. Сделал это чтобы не перегружать навигационный бар пунктами, т.к. двенадцать позиций в меню многовато для небольшой презентационной страницы.


	  <ul class="nav navbar-nav navbar-right">
		  <li>
			  <a class="page-scroll" href="#grand-opening">Открытие</a>
		  </li>
		  <li>
			  <a class="page-scroll" href="#training">Тренировка</a>
		  </li>
		  <li>
			  <a class="page-scroll" href="#questions">Вопросы</a>
		  </li>
		  <li>
			  <a class="page-scroll" href="#photoshoot">Фото с Софьей</a>
		  </li>
		  <li>
			  <a class="page-scroll" href="#share">Скачать</a>
		  </li>
	  </ul>
	  

Ядро страницы - это фреймфорк bootstrap3. Для предотвращения блокировки отрисовки страницы и асинхронной загрузки js библиотек браузерами подключаю их перед закрывающим тегом </body>. Плавную анимацию навигационной прокрутки выполняет функция:


	  $('a.page-scroll').bind('click', function(event) {
			var $anchor = $(this);
			$('html, body').stop().animate({
				scrollTop: ($($anchor.attr('href')).offset().top - 50)
			}, 1250, 'easeInOutExpo');
			event.preventDefault();
	  });
	  

Находящаяся в файле main.js в котором собраны все скрипты для обработки плагинами определённых html классов целевой страницы. Например, scrollspy для отслеживания и подсветки в навигационном баре раздела, в котором находится посетитель:


	   $('body').scrollspy({
			  target: '.navbar-fixed-top',
			  offset: 51
		  })
	  

или affix, который фиксирует весь <nav id="mainNav"> навигационный бар вверху экрана.


	  $('#mainNav').affix({
			  offset: {
				  top: 100
			  }
		  })
	  

Так же для удобства навигации пользователя по странице, особенно на смартфонах, использую скрипт для кнопки вверх:


	$(window).scroll(function() {
		  if ($(this).scrollTop() > 100) {
			  $('#scrollup').fadeIn();
		  } else {
			  $('#scrollup').fadeOut();
		  }
	});
	$('#scrollup').click(function() {
		  $("html, body").animate({
			  scrollTop: 0
		  }, 600);
		  return false;
	});
	  

Для корректного масштабирования заголовков подключаю и активирую плагин fittext.js для тегов <h1>, <h2>, <h3>, <h4>:


	$("h1").fitText(1.2, {
			minFontSize: '35px',
			maxFontSize: '75px'
	});
	$("h2").fitText(1.3, {
			minFontSize: '35px',
			maxFontSize: '65px'
	});
	$("h3").fitText(1.2, {
			minFontSize: '15px',
			maxFontSize: '30px'
	});
	$("h4").fitText(2.0, {
			minFontSize: '10px',
			maxFontSize: '20px'
	});
	  

Чтобы привлечь внимание пользователя к кнопкам скачать фотографии для интернета или для печати использую плагин wow.js добавляющий указанный тип анимации в классе обрабатываемого тега:


  <h2>Скачать Фотографии</h2>
	<a href="https://yadi.sk/d/BOwK5jfEpPaUR" class="btn btn-default btn-xl wow tada">для интернета</a>
  <p class="black">Яндекс.Диск| Размер архива - 140mb. Разрешение изображений 900 x 600 px / 377 фотографий</p>
  

	  new WOW().init();
	  

Важный элемент вывода изображений репортажа на странице плагин isotope.pkgd.min.js версии 2.2, который инициализирую в main.js для всех блоков с class="gallery"


	  var container = $('.gallery').isotope({
		isResizeBound: true,
		//percentPosition: true,
		itemSelector: '.gallery-item',
		transitionDuration: '0.1s'
	});
	  

percentPosition - закомментирован т.к. его активация ведёт к "подпрыгиванию" masonry лейаута при каждом скролле. Пусть плагин считает плитку в пикселях по дефолту. О взаимосвязи плагина Isotope и скроллинге страницы немного позже. Последняя функция из main.js отвечающая за обратную связь с ajax запросом:



$('form.contactForm').submit(function() {
        var f = $(this).find('.form-group')
          , ferror = false
          , emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
        f.children('input').each(function() {
            var i = $(this);
            var rule = i.attr('data-rule');
            if (rule !== undefined) {
                var ierror = false;
                var pos = rule.indexOf(':', 0);
                if (pos >= 0) {
                    var exp = rule.substr(pos + 1, rule.length);
                    rule = rule.substr(0, pos);
                } else {
                    rule = rule.substr(pos + 1, rule.length);
                }
                switch (rule) {
                case 'required':
                    if (i.val() === '') {
                        ferror = ierror = true;
                    }
                    break;
                case 'maxlen':
                    if (i.val().length < parseInt(exp)) {
                        ferror = ierror = true;
                    }
                    break;
                case 'email':
                    if (!emailExp.test(i.val())) {
                        ferror = ierror = true;
                    }
                    break;
                case 'checked':
                    if (!i.attr('checked')) {
                        ferror = ierror = true;
                    }
                    break;
                case 'regexp':
                    exp = new RegExp(exp);
                    if (!exp.test(i.val())) {
                        ferror = ierror = true;
                    }
                    break;
                }
                i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') 
				: 'wrong Input') : '')).show('blind');
            }
        });
        f.children('textarea').each(function() {
            var i = $(this);
            var rule = i.attr('data-rule');
            if (rule !== undefined) {
                var ierror = false;
                var pos = rule.indexOf(':', 0);
                if (pos >= 0) {
                    var exp = rule.substr(pos + 1, rule.length);
                    rule = rule.substr(0, pos);
                } else {
                    rule = rule.substr(pos + 1, rule.length);
                }
                switch (rule) {
                case 'required':
                    if (i.val() === '') {
                        ferror = ierror = true;
                    }
                    break;
                case 'maxlen':
                    if (i.val().length < parseInt(exp)) {
                        ferror = ierror = true;
                    }
                    break;
                }
                i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') 
				: 'wrong Input') : '')).show('blind');
            }
        });
        if (ferror)
            return false;
        else
            var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "contact/contact.php",
            data: str,
            success: function(msg) {
                $("#sendmessage").addClass("show");
                $("#errormessage").ajaxComplete(function(event, request, settings) {
                    if (msg == 'OK') {
                        $("#sendmessage").addClass("show");
                    } else {
                        $("#sendmessage").removeClass("show");
                        result = msg;
                    }
                    $(this).html(result);
                });
            }
        });
        return false;
    });
	  
 

Функции, расположенные непосредственно в html коде отвечают за самую важную характеристику – это скорость загрузки страницы. Для уменьшения времени загрузки страницы браузерами необходимо подгружать изображения только в видимой области экрана пользовательского устройства. Для снижения нагрузки на сервер и уменьшения времени выполнения скриптов подключаю с CDN необходимые плагины lazyload и isotope:


<!-- lazy -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="text/javascript">
 

<!-- isotope -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js" type="text/javascript">
  
 

Необходимо акцентировать внимание на семантической микроразметке schema.org внедрённой на целевой странице репортажа. Основной контент страницы фотографии. Для представления изображений в результатах поиска сервисов Яндекс.Картинки или Google.Картинки следует обеспечить обработку и извлечение данных парсерами, выполнив семантическую разметку с помощью специальных атрибутов структурирования данных. Если использовать предложенную html разметку для Lazyload по умолчанию с заменой пути к изображению на src="/img/grey.gif" и перенесением пути в тэг data-original="img/photoshoot/mini/05-015.jpg", то парсеры видят только grey.gif размером 1x1px, что не корректно. Но есть выход из этой ситуации благодаря дополнительной опции плагина Lazyload для браузеров без поддержки JavaScript. Эта опция позволяет указать реальный тэг <img/> с корректным путём к изображению, в котором можно и нужно прописать поля микроразметки, внутри конструкции тэгов <noscript>.


<!-- single photoshoot item -->
<div class="gallery-item col-sm-4">
	<div class="item-isotop">
		<a class="fancybox" href="/img/photoshoot/05-015.jpg" rel="lightbox" itemscope itemtype="http://schema.org/ImageObject">
			<meta itemprop="caption" content="фотосессия с Софьей Очигава"/>
				<img class="lazy img-responsive border" width="570px" height="380px" src="/img/grey.gif" data-original="/img/photoshoot/mini/05-015.jpg" alt="фотосессия с Софьей Очигава"/>
			<noscript>
				<img itemprop="image" src="/img/photoshoot/05-015.jpg" itemprop="contentUrl" alt="фотосессия с Софьей Очигава"/>
			</noscript>
		</a>
	</div>										
</div>
<!-- /single photoshoot item -->

Так парсер микроразметки обработал вышеприведённый html код.


  imageobject
	itemType = http://schema.org/ImageObject
	caption = фотосессия с Софьей Очигава
	contenturl
	  href = http://ochigava.sergey-tretyakov.ru/img/photoshoot/05-015.jpg
	  text = фотосессия с Софьей Очигава

  

Заполненные HTML meta тэги.


<meta property="og:type" content="website"/>
<meta name="og:title" content="Открытая тренировка по боксу с Софьей Очигава"/>
<meta name="og:description" content="Репортаж открытой тренировки по боксу с Софьей Очигава прошедшей 21 февраля 2016 года в Физкультурно
Оздоровительном Комплексе САЛЮТ. Приветственные слова почётных гостей. Открытая тренировка. Биография спортсменки. Вручение подарков. Фотосессия.
Афтограф-сессия."/>
<meta name="og:image" content="http://ochigava.sergey-tretyakov.ru/img/cover.jpg"/>
<meta name="og:url" content="http://ochigava.sergey-tretyakov.ru/"/>
  
  

Так парсер микроразметки обработал вышеприведённый код meta тэгов. Благодаря этим тегам социальные сети формируют заполненные поля красивых снипетов при нажатии кнопки поделиться.


rdfanode
 http://ogp.me/ns#type
  @value = website
 http://ogp.me/ns#title
  @value = Открытая тренировка по боксу с Софьей Очигава
 http://ogp.me/ns#description
  @value = Репортаж открытой тренировки по боксу с Софьей Очигава прошедшей 21 февраля 2016 года в Физкультурно Оздоровительном Комплексе САЛЮТ.
  Приветственные с...
 http://ogp.me/ns#image
  @value = http://ochigava.sergey-tretyakov.ru/img/cover.jpg
 http://ogp.me/ns#url
  @value = http://ochigava.sergey-tretyakov.ru/

  

Объединение плагинов задача распространённая stackoverflow предлагает много примеров реализации, но рабочие из них не все. В моём случае хорошо отработал найденный код только для Lazyload, Isotope не стартовал при загрузке страницы и дальнейшем взаимодействии с документом. На принтскрине видно, что отрабатывала только css сетка bootstrap. Фотографии накладывались друг на друга, а консоль молчала. Только вручную изменив размер окна браузера, плагин начинал просчитывать и формировать «кирпичную кладку».



  jQuery(document).ready(function ($) {
			var $win = $(window),
				$imgs = $("img.lazy"),
				$con = $('.gallery').isotope();

			function loadVisible($els, trigger) {
				$els.filter(function () {
					var rect = this.getBoundingClientRect();
					return rect.top >= 0 && rect.top <= window.innerHeight;
				}).trigger(trigger);
			}

			$con.isotope('on', 'layoutComplete', function () {
				loadVisible($imgs, 'lazylazy');
			});

			$win.on('scroll', function () {
				loadVisible($imgs, 'lazylazy');
			});

			$imgs.lazyload({
				effect: "fadeIn",
				failure_limit: Math.max($imgs.length - 1, 0),
				event: 'lazylazy'
			});

			$('#asc').click(function (event) {
				$con.isotope({
					sortAscending: true,
					sortBy: 'original'
				});
			});

			$('#desc').click(function (event) {
				$con.isotope({
					sortAscending: false,
					sortBy: 'original'
				});
			});

			$('#thin').click(function (event) {
				$con.isotope({
					sortAscending: true,
					filter: 'img[width="333"]',
					sortBy: 'original'
				});
			});

			$('#all').click(function (event) {
				$con.isotope({
					sortAscending: true,
					filter: '',
					sortBy: 'original'
				});
			});
		});
  

Из найденной функции убрал куски кода, отвечающие за сортировку по клику. В дизайне страницы все секции с фотографиями изначально разбиты по тематическим блокам. Мне необходимо было заставить isotope пересчитывать свой лейаут каждый раз при каком-то событии. Самый подходящий - это обработчик "прокрутки" элементов документа .scroll() Это событие происходит независимо от типа устройства будь то ноутбук или смартфон. Lazyload подгружает новую фотографию в видимую область при скролле страницы, а isotope должен пересчитать masonry layout.


  $(function () {
  var jqBar = $('#bar-1');
  var jqBarStatus = true;
	  $(window).scroll(function() {
		  var scrollEvent = ($(window).scrollTop() > (jqBar.position().top - $(window).height()));
		  if (scrollEvent && jqBarStatus) { 
			  jqBarStatus = false;
			  jqBar.jqbar({ 
				  label: 'Label', 
				  value: 90, 
				  barColor: '#D64747', 
				  orientation: 'h', 
				  barWidth: 20 
			  });
		  }
	  });
  });
  

Функция выше запускает jqbar.js при прокрутке первого абзаца до определённого места. Демонстрация на jsfiddle. Немного подправив код этого скрипта получил рабочий вариант запуска isotope при скроллинге landing страницы. Если посмотреть до середины страницу репортажа по боксу и ctrl+r перезагрузить данные с сервера, а затем начать прокрутку вверх или вниз наглядно видно как isotope формирует свой masonry layout.

 

  	var loadisotop = $('.gallery');
	$win.scroll(function() {
		var scrollEvent = ($(window).scrollTop() > (loadisotop.position().top - $(window).height()));
		if (scrollEvent) { 
			$container.isotope();
		}
	});
  

	function loadVisible($els, trigger) {
		$els.filter(function () {
			var rect = this.getBoundingClientRect();
			return rect.top >= 0 && rect.top <= window.innerHeight;
		}).trigger(trigger);
	}
	

jQuery(function ($) {
    var $win = $(window),
	$imgs = $('img.lazy'),
	$container = $('.gallery')

	function loadVisible($els, trigger) {
		$els.filter(function () {
			var rect = this.getBoundingClientRect();
			return rect.top >= 0 && rect.top <= window.innerHeight;
		}).trigger(trigger);
	}

	$win.on('scroll', function () {
		loadVisible($imgs,'lazy');

	});

	var loadisotop = $('.gallery');
	$win.scroll(function() {
		var scrollEvent = ($(window).scrollTop() > (loadisotop.position().top - $(window).height()));
		if (scrollEvent) { 
			$container.isotope();
		}
	});

	$imgs.lazyload({
		effect: "fadeIn",
		threshold : 0,
		failure_limit: Math.max($imgs.length - 1, 0),
		event: 'lazy'
	});


});
	
 

Реализовал возможность увидеть responsive дизайн в действии. Кликая по выбранной картинке, открывается окно, в котором отображается страница репортажа, но с лимитированной шириной – это эмулирует экран выбранного устройства. Все скрипты в демонстрации страницы работоспособны.

Landing page при просмотре на Планшетах.

Вид на планшетах. Страница открывается в iFrame окне. Все элементы активны. Можно перейти по ссылкам.

Landing page при просмотре на Планшетах.

Вид на планшетах. Страница открывается в iFrame окне. Все элементы активны. Можно перейти по ссылкам.

Landing page при просмотре на Смартфонах.

Вид на смартфонах. Страница открывается в iFrame окне. Все элементы активны. Можно перейти по ссылкам.

 

Пара фотографий закадровой обстановки на мероприятии ниже. Единственный нюанс, на который хотел бы обратить внимание - это предварительная сборка стоек со вспышками. Которые к началу мероприятия были спрятаны за Пресс Волл. По сценарному плану фотосессия с мастером спорта предпоследний пункт мероприятия. Заранее собрав стойки с софтбоксом и стрипбоксами, а также подобрав мощности источников света и выстроив схему освещения в нужный момент, оперативно заменил оборудование и переключился из репортажного режима на студийный.

Закадровая обстановка на репортажной фотосъёмке мероприятия.

Раздача автографов маленьким поклонникам.

Фото оборудование.

Оборудование

Блог фотосессий и ретуши предметных фотографий
Подписаться Комментарии (0)
Отмена или