Что нам понадобится:
- подключенный jQuery, во многих шаблонах он уже есть. Если в вашем нет и вы не знаете, как его подключить, то воспользуйтесь нашим поиском;
- немножко CSS, в частности, вот этот замечательный генаратор стилей для создания полупрозрачного фона;
- немножко JS для определения поведения элементов при прокрутке.
Не будем вас отсылать за примерами на тестовый блог, для удобства разместим всё прямо здесь. Прокрутите статью немного вниз.
Теперь в конец статьи, где вы хотите показать данный эффект (либо в шаблон после 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, включаеющий в себя один или несколько элементов, которые будут перекрывать картинку. Посмотрите исходный код данной страницы, чтобы понять, о чём идёт речь.
Вот и всё, наш простенький эксперимент завершён. Параллаксьте, гуглеплюсьте, задавайте вопросы в комментариях.
Комментариев нет :
Отправить комментарий