Почему долго не появляется новых статей

Твитнуть

Здравствуйте, уважаемые читатели блога! Долго проболел я, поэтому и статей новых не было. Сейчас уже практически выздоровел. Подготовил вчерне новую статью, выложу в первой половине дня 2-го мая.
С уважением, Николай.

Создаем интерактивное меню DVD - диска

Твитнуть

В этом видео покажем, как сделать интерактивное меню DVD - диска с помощью бесплатной программы DVDStyler. С помощью этой программы можно делать DVD - диски, которые можно просматривать не только на компьютере, но и на домашнем DVD - плеере.

Ссылка для скачивания:
DvdStyler

Высказывайте Ваше мнение о статье и/или программе в комментариях.

Записываем аудио

Твитнуть

В этом видео уроке будет показано, как записывать и редактировать аудио с помощью известной бесплатной программы Audacity.

Ссылки для скачивания:

Программа audacity

Библиотека lame

Конвертируем аудио онлайн

Твитнуть

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

Подбор гармоничного шрифта

Твитнуть

Подбор гармоничного шрифта для сайта иногда бывает непростой задачей. Покажу бесплатный онлайн сервис, который может облегчить Вашу жизнь.

Учимся делать анимированные стрелки

Твитнуть

На страницах подписки или продающих страницах часто можно видеть анимированные стрелки, привлекающие внимание к какому-то элементу страницы. Выглядят они примерно вот так:

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

Плавная прокрутка страницы вверх

Твитнуть

В предыдущей статье я обещал рассказать о втором варианте решения задачи прокрутки страницы вверх.

Особенности второго варианта:

1. Использование JavaScript

2. Стрелка видна не постоянно, а появляется только при прокрутке страницы вниз.

3. При наведении на стрелку курсора она меняет прозрачность.

4. Перемещение вверх по странице осуществляется плавно.

Привожу решение.

Сначала рисуем картинку:

scrollup2.png

Как видим, картинка состоит уже из двух частей. Верхняя часть - это изображение стрелки, которое появляется при прокрутке страницы вниз. Нижняя часть картинки - это изображение той же стрелки при наведении на нее курсора.

Каждая часть картинки имеет размер 50x50 пикселей.

Размещаем картинку на сервере.

Для решения задачи мы будем использовать JavaScript. Привожу его текст.

Gotop.js

(function() {

function $(id){
return document.getElementById(id);
}

function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 12;

var dx = 0;
var dy = 0;
var bx = 0;
var by = 0;
var wx = 0;
var wy = 0;

if (document.documentElement) {
dx = document.documentElement.scrollLeft || 0;
dy = document.documentElement.scrollTop || 0;
}
if (document.body) {
bx = document.body.scrollLeft || 0;
by = document.body.scrollTop || 0;
}
var wx = window.scrollX || 0;
var wy = window.scrollY || 0;

var x = Math.max(wx, Math.max(bx, dx));
var y = Math.max(wy, Math.max(by, dy));

var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"
window.setTimeout(invokeFunction, time);
}
return false;
}

//*
function scrollTop(){
var el = $('gotop');
var stop = (document.body.scrollTop || document.documentElement.scrollTop);
if(stop>400){
if(el.style.display!='block'){
el.style.display='block';
smoothopaque(el, 0, 100, 1);
}
}
else
el.style.display='none';

return false;
}

// Плавная смена прозрачности
function smoothopaque(el, startop, endop, inc){
op = startop;
// Устанавливаем прозрачность
setopacity(el, op);
// Начинаем изменение прозрачности
setTimeout(slowopacity, 1);
function slowopacity(){
if(startop < endop){
op = op + inc;
if(op < endop){
setTimeout(slowopacity, 1);
}
}else{
op = op - inc;
if(op > endop){
setTimeout(slowopacity, 1);
}
}
setopacity(el, op);
};
};
// установка opacity
function setopacity(el, opacity){
el.style.opacity = (opacity/100);
el.style.filter = 'alpha(opacity=' + opacity + ')';
};

if (window.addEventListener){
window.addEventListener("scroll", scrollTop, false);
window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", scrollTop);
window.attachEvent("onload", scrollTop);
}


window['top'] = {};
window['top']['goTop'] = goTop;

})();

Файл Gotop.js также размещаем на сервере.

Осталось привести код вызова:

<html>
  <head>
    <title>Плавное перемещение вверх по странице - JavaScript</title>
    <script src="/js/gotop.js"></script>
    <style type="text/css">
        .scrollTop{
        background:url(/img/scrollup2.png) 0 0 no-repeat;
        display:block; width:50px; height:50px;
        position:fixed;bottom:5px;right:5px;
        z-index:2000;
    }
    .scrollTop:hover{ background-position:0 -58px; }
    </style>
    </head>
    <body>
        <a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;"></a>
    </body>
</html>

Как видите, в принципе и здесь тоже нет ничего сложного. Пользуйтесь на здоровье.

Предыдущая статья: Быстрая прокрутка страницы вверх