Создание лэндинга

11.03.2015 03:49

Разберём только техническую часть.

По сути лендинг это всего-лишь 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 раза, чем контент на сайте.


← простой слайдер без jquery

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

Как взламываются сайты →

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

(0) Комментариев

Написать комментарий


Контакты Телеграмм