Какова техника верстки landing page?

Question

[kamwork]

Как верстать лендинги? Т.е. где 1 блок = 1 страница с красивым переходом? Может есть заготовки какие-то? Если нет, то как правильно подойти к этому вопросу, интересует именно адаптивность хорошая.

Answer 1

[kapai69]

alvarotrigo.com/fullPage

Comments

[Dartess]

Как же давно я пытаюсь найти что-то такое, а то свой велосипед убогий вышел... Спасибо!

[Марина]

огонь! спасибо!

Answer 2

[Павел]

Наткнулся на канал недавно , по моему очень содержательно:

• Часть 1: Адаптивная HTML верстка на примере сайта автосервиса(смотреть)
  
• Адаптивная HTML верстка на примере образовательного Landing Page(смотреть)
  

Comments

[al3ch5]

тоже недавно смотрел его, но это не для новичков! Скорей всего подойдет тому, кто уже сверстал "свой первый мега сайт".

[dk-web]

al3ch5: xromoff.narod.ru - про мега сайты))) эх..м молодость;)

[dk-web]

al3ch5: аж слеза накатилась от чтения гостевой.... а ведь если мозги тогда были б))) 400 уникальных посетителей в 2004 не шутки были...

Answer 3

[tim_tairan]

Если стоит задача именно в переходе красивом то можно так:
https://github.com/peachananr/onepage-scroll
https://github.com/alvarotrigo/fullPage.js
tympanus.net/Development/ArticleIntroEffects/index...

А по факту адаптивности дизайна то bootstrap в зубы и поехал:
getbootstrap.com

Comments

[Евгений]

Бутстрап - действительно отличное решение для адаптивности, все работает из коробки, не нужно ничего допиливать.
Если нужно сделать полноэкранные блоки с параллаксом, что отлично смотрится на лендингах - то вот неплохое решение: minimit.com/articles/lets-animate/parallax-backgro...
Прошло проверку боем :)

Answer 4

[xmoonlight]

alvarotrigo.com/fullPage

„Что тут дивного? ну, вот!
Белка камушки грызет,
Мечет золото и в груды
Загребает изумруды;
Этим нас не удивишь,
Правду ль, нет ли говоришь.
В свете есть иное диво:
Free jQuery grid layout Plugins & jQuery Layout Plugins
Это диво, так уж диво,
Можно молвить справедливо!

Comments

[kamwork]

Жжете :)

[xmoonlight]

kamwork: Пушкин рулит!

Answer 5

[Анна Бакурова]

Я сейчас как раз написала вот такое решение https://github.com/librisius/PageSlider
Пока с головой хватает

Comments

[Анна Бакурова]

css для перехода можно выбрать любой отсюда tympanus.net/Development/PageTransitions

[smiros]

Анна Бакурова: он у вас адаптивный?) Извини, если звучит тупо, я только учусь ;)

[Анна Бакурова]

smiros: в каком плане адаптивный?
Вы про поддержку touch устройств?

[Анна Бакурова]

smiros: поддержка touch есть

[smiros]

Анна Бакурова: ну да... А вы, кстати, и на js кодите?)

[Анна Бакурова]

smiros: что значит и на js )) конечно такое на css нельзя
а плагин был специально сделан для анимации с минимум затрат производительности (ну как старалась)
Сейчас изучаю ООП и буду дописывать туда диструктор и в прототипный стиль переписвать
Так что если буду юзать на живом проекте пишите, Я вылью ласт версию.

Вот плагин на живом проекте neemble.ru/index.php#home

[smiros]

Анна Бакурова: почему спросил про js - потому что сам его изучаю с апреля... с переменным успехом. А пообщаться с профи в этом деле за милую душу)))

[Анна Бакурова]

smiros: Я сама новичок, если вам интересен послушать про js Я могу вас добавить в конфу в скайпе
мой контакт ninth-element
встречаемся раз в неделю, выступаем на разные темы

Answer 6

[Николай]

Лучшее решение - разобраться как написать его самостоятельно вручную. Нужно всего лишь не боятся трудностей.