А так же о всякой фигне
Разберём только техническую часть.
По сути лендинг это всего-лишь 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 раза, чем контент на сайте.
Существует огромное множество готовых плагинов по созданию слайдеров и в принципе делать свой не имеет смысла. Так же есть много примеров кода, иногда даже с комментариями, но очень редко с подробным объяснением работы.
Вы установили сайт на хостинг, подключили красивую тему, модные плагины, возможно даже зарегистрировались в яндекс-маркете. В общем, жизнь прекрасна, сайт продвигается, товары покупаются, посетители заходят.