Боромир объясняет нам концепции Блоггера
Не секрет, что всё модное в веб строительстве доходит до Блоггера с изрядной задержкой. Происходит ли это из-за тяжкого наследия платформы в виде весьма ограниченного языка для создания шаблонов или Гуглу попросту интереснее и выгоднее заниматься Гуглеплюсом вместо Блогспота — сказать трудно, но факт остаётся фактом. Кто-то с этим мирится, кто-то выбирает другие платформы, но только не мы! Мы предпочитаем закатывать солнце вручную изобретать в любых сколько угодно стеснённых условиях.
Итак, если вы всё ещё не знаете, что такое параллакс в вебе, то рекомендуем погуглить "сайты с параллакс эффектом" и удивиться изобретательности дизайнеров и программистов. К сведению, на некотрые такие сайты уходят месяцы работы целых команд. Конечно, большинство не обладает такими ресурсами, а мы, к тому же, хотим минимизировать количество кода и подключаемых плагинов, ведь все мы помним, к чему приводит бесконтрольное добавление виджетов в блог.
Признаться, идею к данной статьи подсказала другая блог-платформа (medium.com). Если там открыть несколько постов, то можно заметить, что при прокрутке страницы текст как бы наползает на картинки с постепенным их затенением. Как оказалось, повторить такой эффект на так уж и сложно. Приступим.
Что нам понадобится:
Не будем вас отсылать за примерами на тестовый блог, для удобства разместим всё прямо здесь. Прокрутите статью немного вниз.
Вы увидите, как картинка замедляется, а текст снизу не неё наползает. Интересный эффект, не так ли? Разберёмся, как его повторить.
Для начала, убедитесь, что jQuery подключен. Затем добавьте следующие стили в шаблон:
.parallaxed-wrapper {
width: 100%;
position: relative;
}
.parallaxed {
position: relative;
z-index: 1;
}
.parallaxed-overlay {
position: relative;
z-index: 2;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 3%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(3%,rgba(255,255,255,0.2)), color-stop(15%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
Теперь в конец статьи, где вы хотите показать данный эффект (либо в шаблон после post.body, если нужно, чтобы эффект работал во всех статьях сразу) добавьте такой скрипт:
<script type="text/javascript">
(function() {
var startTopPosition = 150;
var scrollBy = 0.6;
var parallaxed = $('.parallaxed');
$(document).scroll(function(event) {
var scrollEvent = event;
parallaxed.each(function(event) {
var element = $(this);
var parent = element.parent();
var posTop = element.parent('.parallaxed-wrapper').offset().top - $(window).scrollTop();
var posLeft = element.offset().left;
var scrolledToBottom = $(window).scrollTop() + $(window).height() == $(document).height();
if (posTop < startTopPosition && !scrolledToBottom) {
var newTop = (startTopPosition - posTop) * scrollBy;
element.css({top : newTop});
if (posTop < -parent.data('height') * scrollBy) {
element.css({visibility : 'hidden'});
} else {
element.css({visibility : 'visible'});
}
element.parent().css({height : parent.data('height') - newTop / scrollBy / 2});
} else if (posTop > startTopPosition) {
element.css({visibility : 'visible', top : 0});
element.parent().css({height : 'auto'});
}
});
});
})();
</script>
Когда всё будет готово, со значениями переменных, выделенных красным цветом, можно будет поиграть, чтобы добиться нужного именно вам эффекта.
startTopPosition = 150 говорит о том, что эффект начинает действовать, как только картинка будет на расстоянии менее 150 пикселей от верхей границы экрана;
var scrollBy = 0.6 - коэффициент замедления.
Теперь про разметку статьи. Да, чтобы это всё заработало при составлении статьи нужно будет учитывать, что на что и в какой момент будет накладываться. Сама картинка должна иметь класс parallaxed и быть обёрнута в элемент с классом parallaxed-wrapper, вот так (пример из данной статьи):
<div class="parallaxed-wrapper" data-height="400">
<img class="parallaxed" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7Obw6VqAZfyKCbPO4IpBMkax6rLZ37XZkTGspqln6X3Fpb2lvIvnHvx-cE40fsW8a-HSzk2-Zk_wFJ1tEgeczbXLDqzS2LfOScisiGQW6UwuSCUUXrm1KlGQKwBruVx0kdgbFbXFGmE/s1600/open.jpg"/>
</div>
Далее обратите внимание на data-атрибут обёртки: data-height="400" — в общем случае он должен быть равен высоте картинки, но может и отличаться от неё. Это значение так же влияет на то, как будет проявляться эффект.
За обёрткой следует элемент с классом parallaxed-overlay, включаеющий в себя один или несколько элементов, которые будут перекрывать картинку. Посмотрите исходный код данной страницы, чтобы понять, о чём идёт речь.
Вот и всё, наш простенький эксперимент завершён. Параллаксьте, гуглеплюсьте, задавайте вопросы в комментариях.
