Параллакс эффект в Блоггере

Опубликовано:
Боромир объясняет нам концепции Блоггера

Не секрет, что всё модное в веб строительстве доходит до Блоггера с изрядной задержкой. Происходит ли это из-за тяжкого наследия платформы в виде весьма ограниченного языка для создания шаблонов или Гуглу попросту интереснее и выгоднее заниматься Гуглеплюсом вместо Блогспота — сказать трудно, но факт остаётся фактом. Кто-то с этим мирится, кто-то выбирает другие платформы, но только не мы! Мы предпочитаем закатывать солнце вручную изобретать в любых сколько угодно стеснённых условиях.

Итак, если вы всё ещё не знаете, что такое параллакс в вебе, то рекомендуем погуглить "сайты с параллакс эффектом" и удивиться изобретательности дизайнеров и программистов. К сведению, на некотрые такие сайты уходят месяцы работы целых команд. Конечно, большинство не обладает такими ресурсами, а мы, к тому же, хотим минимизировать количество кода и подключаемых плагинов, ведь все мы помним, к чему приводит бесконтрольное добавление виджетов в блог.

Признаться, идею к данной статьи подсказала другая блог-платформа (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="http://2.bp.blogspot.com/-VxiU5uJQRgw/UvqmdwB5YdI/AAAAAAAAAlA/B2S8AouijUs/s1600/open.jpg"/>
</div>

Далее обратите внимание на data-атрибут обёртки: data-height="400" — в общем случае он должен быть равен высоте картинки, но может и отличаться от неё. Это значение так же влияет на то, как будет проявляться эффект. За обёрткой следует элемент с классом parallaxed-overlay, включаеющий в себя один или несколько элементов, которые будут перекрывать картинку. Посмотрите исходный код данной страницы, чтобы понять, о чём идёт речь.

Вот и всё, наш простенький эксперимент завершён. Параллаксьте, гуглеплюсьте, задавайте вопросы в комментариях.


Ярлыки:
| Издатель: +BlogopoiskRu |