А так же о всякой фигне
Разберём только техническую часть.
По сути лендинг это всего-лишь 1 свёрстанная страничка, на которой для зрелищности используются некоторые html эффекты.
Создадим простейшую хтмл страницу:
<html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <title>Пример простого лэндинга</title> </head> <body> </body> </html>
В нём сразу подключим jquery. Далее добавим тестовый блок с id "test", слой-контейнер с классом "conteiner" и текстовые слои с классом "block" и id "show1", "show2"... итд. Получается примерно следующее:
<html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <title>Пример простого лэндинга</title> </head> <body> <div id="test"></div> <div class="conteiner"> <div class="block" id="show1">Какой-то текст</div> <div class="block" id="show2">Какой-то текст</div> <div class="block" id="show3">Какой-то текст</div> </div> </body> </html>
Наметим стили. Контейнер у нас будет стандартной ширины- 980 пикселей, расположенный по центру:
.conteiner { width:980px; max-width:98%; margin:0px auto; }
Текстовые блоки, тело страницы и тестовый блок:
body { background:#eee; } .block { margin:20px 0px; padding:10px; border-radius:3px; border:1px solid #ddd; background:#fff; } #test { position:fixed; top:0px; right:0px; padding:15px; border:1px solid #555; z-index:100; background:#fff; }
Приступаем к javascript. Нам нужна функция, которая будет знать когда включать html эффекты для любого текстового блока. При этом нужно учесть разные размеры экрана и блоков.
function isneedshow(el) { curpos=$(window).scrollTop()+document.body.clientHeight; showpos=$(el).offset().top+($(el).height()/2); if(curpos>=showpos) { return 1; }else { return 0; } }
Если элемент уже наполовину показался, то функция вернёт 1, иначе 0. Далее нужно отслеживать событие- скроллинг и проверять пришло ли время показывать блок. Там же повесим индикатор текущего положения скролла.
$('document').ready(function() { $(window).scroll(function (event) { $("#test").html($(window).scrollTop()); if(isneedshow("#show1")) { $("#show1").css({"left":"0px"}); } if(isneedshow("#show2")) { $("#show2").css({"left":"0px"}); } if(isneedshow("#show3")) { $("#show3").css({"opacity":"1"}); } if(isneedshow("#show4")) { $("#show4").css({"opacity":"1"}); } }); });
Первый блок будет выезжать слева, второй справа, третий и четвёртый плавно появляться. Стилями разводим их в первоначальное положение:
#show1 { position:relative; left:-2000px; transition:all 0.5s; } #show2 { position:relative; left:2000px; transition:all 0.5s; } #show3 { opacity:0; transition:all 1s; } #show4 { opacity:0; transition:all 1s; }
Но теперь, ожидаемо, наш лэндинг пейдж обзавёлся горизонтальным скролингом, что бы от него избавиться добавляем стиль overflow-x:hidden; для тела страницы (body).
Готовый пример на отдельной странице.
На этой базовой структуре можно создать лендинг практически любого вида. Главное качественно сверстать информацию, таблички, слайды и т.д. Адаптивность у нас уже заложена в стилях- максимальная ширина контейнера- 98% (стиль max-width:98%;), блок не будет выходить за пределы любого экрана. Но адаптивность содержимого текстовых блоков лежит на совести верстальщика.
В завершении добавим эффект параллакса на фон страницы. Повесим фон на body:
body { overflow-x:hidden; background:url('/examples/img/back1.png'); background-color:#eee; background-position:0px 0px; background-repeat:repeat; background-attachment:fixed; }
Стилем "background-attachment" прикрепляем фон, а стилем "background-position" будем задавать его координаты в обработчике события по скроллу:
$('body').css({"background-position":"0px -"+($(window).scrollTop()/2)+"px"});
Теперь фон буде прокручиваться медленнее в 2 раза, чем контент на сайте.
Существует огромное множество готовых плагинов по созданию слайдеров и в принципе делать свой не имеет смысла. Так же есть много примеров кода, иногда даже с комментариями, но очень редко с подробным объяснением работы.
Вы установили сайт на хостинг, подключили красивую тему, модные плагины, возможно даже зарегистрировались в яндекс-маркете. В общем, жизнь прекрасна, сайт продвигается, товары покупаются, посетители заходят.