В первой части Алекс представил нашу реализацию рекламы Catfish и продемонстрировал, как нам удалось сделать так, чтобы они появлялись внизу окна во всех браузерах без резких движений при прокрутке.
Если вы пропустили это, вернитесь и посмотрите часть 1 . Мы нашли удобный способ обойти отсутствие поддержки Internet Explorer для фиксированного позиционирования элементов.
Теперь у нас есть рабочая реклама Catfish . Он прикреплен к нижней части экрана и остается там при прокрутке.
Проблема в том, что она всегда есть. Сом был бы гораздо привлекательнее, если бы он «скользнул» в поле зрения, а не появлялся сразу. Поймай посетителей своего сайта врасплох!
Скольжение сома в вид
С небольшим количеством jiggery-pokery DHTML мы можем расположить сома так, чтобы он был просто вне поля зрения, с верхней частью чуть ниже нижней части окна нашего браузера. Это идеальная точка, с которой можно «скользить, чтобы посмотреть» позже.
Подсказка: это также дает нам возможность начать предварительную загрузку изображений в Catfish, так что, когда они подпрыгнут, изображения должны быть готовы к работе.
Отрицательное нижнее поле приятно убирает его.
margin-bottom: -79px; Если использование для этой цели отрицательного поля заставляет вас чувствовать себя немного нечистым, не волнуйтесь. Когда мы передвинем сома в поле зрения, мы удалим это поле. Чтобы мы не столкнулись с зияющей дырой, в которую собирается направить сома, мы временно удалим пустое пространство, добавленное в нижнюю часть элемента body.
/* html { padding:0 0 58px 0; } */
Загружая документ сейчас, вы будете прощены за то, что думаете, что сома нет. Это там, но это просто вне поля зрения. Мы должны установить несколько тайм-аутов, чтобы вывести это на всеобщее обозрение.
Я создал новый файл с именем catfishdeploy.js, который очень похож на код, который мы используем на sitepoint.com.
// Deploy the Catfish // The Catfish should be located in an element of id 'catfish' and should be hidden // out of view function deploycatfish() // initializing { catfish = document.getElementById('catfish'); catfishheight = 79; // total height of catfish in pixels catfishoverlap = 21; // height of the 'overlap' portion only (semi-transparent) catfishtimeout = setTimeout(startcatfish, 2000); }
Последняя строка этой функции устанавливает время ожидания 2 секунды, которое вызовет startcatfish . Изображения в этом соме занимают около 10 КБ. Это, вероятно, немного высоко, хотя этого будет достаточно для демонстрационных целей. Ожидание в течение 2 секунд, прежде чем показывать Catfish, должно дать изображениям немного времени для загрузки, даже при модемном соединении.
В startcatfish мы установили переменную catfishposition будет содержать текущую позицию Catfish. setInterval может быть использован для плавного перемещения сома.
function startcatfish() // starts the catfish sliding up { catfishposition = 0; // catfishposition is expressed in percentage points (out of 100) catfishtimeout = setInterval(positioncatfish, 25); }
Поскольку позиция сома меняется каждые 25 миллисекунд или около того (в лучшем случае), мы не хотим делать слишком много времени, когда меняем позицию. Мы можем разобраться с дополнительными проблемами, такими как добавление пространства внизу элемента html чтобы зарезервировать пространство для Catfish позже — как только оно станет полностью видимым. А пока мы просто изменим положение сома, изменив его нижнее поле.
function positioncatfish() { catfishposition += 10; catfish.style.marginBottom = '-' + (((100 - catfishposition) / 100) * catfishheight) + 'px'; if (catfishposition >= 100) { clearTimeout(catfishtimeout); catfishtimeout = setTimeout(finishcatfish, 1); } }
После того, как Catfish будет в полном finishcatfish , мы установим таймаут для вызова finishcatfish . finishcatfish немного отступа к элементу body, чтобы «зарезервировать место» для него. Это гарантирует, что посетители смогут прочитать нижний колонтитул вашей страницы, не прикрывая его сомом. См. Часть 1 для получения информации о том, как это было достигнуто.
function finishcatfish() { catfish.style.marginBottom = '0'; // jump the bottom of the document to give room for the catfish when scrolled right down document.body.parentNode.style.paddingBottom = (catfishheight - catfishoverlap) +'px'; // here you could use AJAX (or similar) to log the popup hit for tracking purposes }
Результат
Проверьте результат! Сом теперь скрывается из виду на некоторое время, наконец, удивляя нас загрузкой, когда мы меньше всего этого ожидаем. Это выглядит довольно гладко. Это также очень привлекательно, не слишком раздражает (это не отвлекает внимание от остальной части страницы).
Что еще мы можем сделать?
В SitePoint мы чередуем различные рекламные объявления Catfish. Сами объявления размещаются с помощью JavaScript, а не отображаются статически в нашем коде. Информация о том, как этого можно достичь, станет темой будущего поста в блоге!