Добрый день, друзья. На днях со мной связался Дима Шулешов и предложил мне тему для интересной статьи (Дима, привет!). Ну для меня - интересной и актуальной, надеюсь и вам тоже, кому-нибудь пригодиться. Это несколько строчек кода, которые помогут вам верстать landing page в точности с макетом.
Кроме, того, вы значительно сократите время на замеры расстояний и переключения между фотошопом, окном браузера и текстовым редактором.
Готовый результат сводится к тому, что у вас в проекте есть кнопка, закрепленная в левом верхнем углу (любом месте), при нажатии на которую, на вашу верстку накладывается макет (картинка) с определенной прозрачностью, и вы можете оценить, насколько точно ваши отступы, размеры, позиционирование соответствует дизайну. Чтобы понять, - нужно попробовать. Рекомендую скачать исходник и посмотреть, как это работает или воспроизведите это короткое видео:
Итак, если у вас возникали проблемы с дотошными заказчиками, которые проверяют каждый пиксель, то теперь такой проблемы больше не должно возникнуть. Давайте же наконец реализуем этот эффект.
Первым делом, как это часто бывает, подключаем библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Так как в большинстве проектов она уже подключена, обязательно убедитесь, чтобы вы не сделали этого повторно. Это может вызвать конфликт, и вы долго будете разбираться, почему же именно он возникает.
Теперь, давайте пропишем несколько тегов внутри нашего проекта. У меня это выглядит так:
<div id="p">Pixel Perfect</div> <div class="" id="pp" style="opacity: 0;"></div>
Где первый div - это блок, отвечающий за кнопку, а второй, за наложение нашего макета. Для того, чтобы он накладывался корректно, нужно сделать несколько простых настроек:
.p { background: url(../images/maket.jpg) no-repeat; /* Ваш макет */ width: 1255px;/* ширина макета */ height: 750px;/* высота макета*/ left: calc(50% - 627.5px);/* второе значение - половина, от ширины макета*/ position: absolute; top: 0; opacity: 0.4 !important; transition: .3s; z-index: 97; }
Вот 4 параметра, которые сопровождаются комментарием и нужно заменить на свои. Все - просто!
Теперь, давайте зададим стили для кнопки. Если вам принципиален внешний вид, то редактируйте, а так, можно оставить как есть.
#p { position: fixed; left: 0; top: 0; width: 200px; height: 75px; background: #c36c2c; z-index: 99; cursor: pointer; text-align: center; font-size: 25px; line-height: 0px; color: #c36c2c; left: -150px; vertical-align: middle; font-weight: 700; transition: .3s } #p:hover { left: 0; line-height: 80px; background: #88d3c2; }
Ну и осталось добавить реакцию на клик по кнопке. Будем просто добавлять/удалять класс и менять прозрачность блока с макетом на фоне:
$(document).ready(function () { $('#p').click(function () { $('#pp').toggleClass('p') });});
8 комментариев
Все проще чем кажется на первый взгляд, достаточно исходное изображение подложить фоном, центрировать и верстать поверх, тот же body идеально подходит. Будет все 1 в 1.
После первого фонового изображения ничего уже не будет тогда видно((
А что, прозрачность не помогает?
А видео нет.
Спасибо, поправил
не туда написал)
Подскажите, а какой редактор на скриншоте?
Брекетс (Brackets) - brackets.io