Loading...
X

Длинный баннер РСЯ с медленным перемещением при прокрутке


Банер в боковой панели может быть фиксированным (ещё называют «липким»), когда он остаётся на странице при прокрутке. Может быть обычным — когда он прокручивается вместе с остальной страницей.

Мне попался ещё один вариант: липкий банер, который медленно прокручивается при скроллинге страницы, в результате он:

  • всегда остаётся видимым
  • постепенно показывает все свои объявления

То есть получается, что разные части страницы прокручиваются неравномерно: основной текст прокручивается быстрее, чем боковая панель).

Чтобы было наглядно, пример. Далее показана одна и та же страница без перезагрузки, выполняется только скроллинг вниз экрана.

Мы в начале страницы, нам показывается 1, 2 и 3 объявления РСЯ:

Довольно сильно пролистнули страницу (смотрите на ползунок в правой части), но банер сместился лишь на немного, теперь нам показываются 3, 4 и 5 объявление:

Ещё значительно пролистнули страницу (текст длинный), теперь показываются объявления с 5 по 8:

И только когда мы долистываем до конца страницы, нам показывается последний банер.


То есть банер смещается понемногу, в результате в фокус бокового зрения постоянно попадает новое объявление.

Условный живой пример здесь: https://suay.ru/files/2.htm (исходный код меняется из-за PageSpeed, поэтому если хотите скачать и посмотреть оригинал, то ссылка на архив: https://suay.ru/files/2.zip)

Полный исходный код данной реализации:

<html>
    <head>
        <title>Название страницы</title>

        <meta charset="UTF-8">

        <style>
            #banner{display:none;-webkit-transition:top .5s;-moz-transition:top .5s;-o-transition:top .5s;transition:top .5s;position:absolute;left:1000px;top:50px;z-index:1000}
            @media only screen and (min-width:1200px){#banner{display:block}}
        </style>        
    </head>

    <body>
        
       ТЕКСТ СТАТЬИ

    <div id="banner">
        КОД БАННЕРА
    </div>

    <footer id="footer"></footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            window.onscroll = function () {
                let position = window.pageYOffset || document.documentElement.scrollTop,
                        height = document.querySelector('body > footer').offsetTop - 50,
                        banner = document.getElementById('banner'),
                        speed = banner.offsetHeight / height;
                banner.style.top = (window.innerHeight > banner.offsetHeight ? 50 + position : (speed > 1 ? 50 - position * speed : 50 + position * (1 - speed))) + 'px';
            }
        });
    </script>

    </body>
</html>

Обратите внимание на футер <footer id="footer"></footer> - его нужно сохранить, так как относительно него считается расположение, то есть без него не работает.

Подсмотрено на сайте novainfo.ru/article/11315 (если что, это не мой сайт).

Судя по всему, это работает только если гигантский блок РСЯ является единственным в боковой панели. Если там ещё что-то есть, то, наверное, придётся допиливать это решение.

Ожидаемый экономический эффект

Я уже пару лет работаю с РСЯ, но я до сих пор не понимаю, за что именно они платят: за просмотры, за клики, или просто какой-то рандом. Но не суть. В теории Больше просмотров объявлений = Больше кликов = Больше денег. Но в случае с РСЯ это неточно.

Последнее обновление:

Рекомендуется вам:


2 observations on “Длинный баннер РСЯ с медленным перемещением при прокрутке
    1. MiAl MiAl

      Пока что сам не пробовал. Оставил здесь код, чтобы когда понадобиться долго не искать.

       
      Reply

Leave an observation to MiAl Cancel observation

Ваш адрес email не будет опубликован. Обязательные поля помечены *

wp-puzzle.com logo

Scroll Up