пятница, 6 апреля 2012 г.

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

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


Автор: Николай на 13:37 5 коммент.
Теги: ,

вторник, 3 апреля 2012 г.

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

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

Особенности второго варианта:
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>

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

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

Автор: Николай на 11:58 4 коммент.
Теги: , ,

понедельник, 2 апреля 2012 г.

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

Быстрая прокрутка страницы вверх
Справа внизу Вы видите у меня зеленую стрелку. Если прокрутить страницу вниз, а потом нажать на эту стрелку, то произойдет перемещение к самому верху страницы. Давайте разберемся, как это сделано.

На сегодняшний день я знаю два варианта решения этой задачи. Первый вариант без использования JavaScript(я использую именно его) самый простой.

Его особенности:
1. Стрелка видна всегда и не меняет прозрачность при наведении на нее курсора.
2. При нажатии на стрелку производится немедленное перемещение к самому верху страницы.

Теперь покажу, как это реализовать.
Сначала рисуем картинку указателя. У меня - это стрелка размером примерно 50x50px, хотя может быть и другая картинка(к примеру, прямоугольник с надписью).


scrollup.png


Размещаем ее на сервере.

Далее осталось только разместить следующий код:
<html>
  <head>
    <title>Перемещение вверх по странице</title>
    <style type='text/css'>  a:hover {text-decoration:underline; color: #33aaff;
    </style>
    <style type='text/css'>.backtotop a:hover {background:none;}
    </style>
  </head>
  <body>
    <div class='backtotop'>
      <a class='backtotop' href='#' rel='nofollow'
          style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Go Top'>
        <img src='scrollup.png' style='border:0;'/></a>
    </div>
  </body>
</html>


На этом все. Как видите, все действительно очень просто.

В следующей статье я расскажу о втором варианте решения этой задачи с использованием JavaScript и получением некоторых дополнительных эффектов.

Автор: Николай на 11:54 14 коммент.
Теги: , ,

среда, 7 марта 2012 г.

Милые дамы, с наступающим праздником!

Милые дамы, поздравляю вас с наступающим праздником!:(
Здоровья вам, счастья, радости, удачи! Улыбок на ваших лицах, заботливых, любящих мужчин рядом с вами!
В общем, всего - всего вам самого хорошего! С праздником!





Автор: Николай на 15:10 4 коммент.
Теги: , , ,

понедельник, 5 марта 2012 г.

Проверка сайтов на вирусы

Проверка сайтов на вирусы
Заразить свой компьютер вирусом очень легко. К счастью существует огромное количество антивирусных программ, которые защищают и/или лечат Ваш компьютер в случае, если он уже заражен. 

Ваш сайт тоже может довольно легко подхватить заразу - и тогда прости - прощай посетители(если они, конечно, сумеют понять, что Ваш сайт заражен)!

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

Короче, легче периодически проверять свой сайт на вирусы, чем доставлять кучу неприятностей и посетителям Вашего сайта, и себе!

Назову сервисы(которые знаю и которые сейчас работают). Первый и основной сервис - это, конечно же, Dr.Web.

Проверить свой сайт с помощью этого сервиса Вы можете прямо здесь - форму я взял у Dr.Web(он ее сам предлагает встраивать на свой сайт, Вы тоже можете завести у себя такую), а проверяет, конечно же сервис online - проверки Dr.Web.

Внимание! Этот сервис проверяет только одну страницу, адрес которой Вы ввели.


 Проверить сайт на то, насколько безопасным считают его поисковые системы Google и Yandex можно с помощью вот этого сервиса.

Еще одним из известных сервисов проверки сайтов на наличие вирусов является Norton Safe Web. Вот его адрес: Norton Safe Web

Вот и все, что я хотел рассказать сегодня. Не забывайте проверять свои сайты и будьте здоровы!

Автор: Николай на 11:58 16 коммент.
Теги: , , ,

пятница, 2 марта 2012 г.

Публикация видео на продающей странице

Публикация видео на продающей странице
В последнее время стало очень модным размещение видео обращения на продающих страницах. Как правило, такое видео не размещается на Vimeo или YouTube, а размещается прямо на сервере.

Такое видео может Вам понадобиться при каких-то презентациях или для размещения его на минисайте.

Сделать такое видео не представляет труда: нам только нужен сам плеер и возможность как-то разместить его на странице. Давайте это сделаем.

Скачайте плеер и все, что для него нужно, здесь и распакуйте архив в папку flowplayer.


Важно. Обратите внимание, что файл flowplayer.controls-3.2.5.swf должен быть в одной папке с файлом плеера flowplayer-3.2.7.swf

Приведу код моего примера(здесь Webinars.flv - это видео, которое я хочу воспроизвести):
<html>
  <head>
    <title>flowplayer</title>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script>
  </head>
  <body>
    <a   href="flowplayer/Webinars.flv" style="display:block;width:520px;height:330px" id="player">  </a>
<script>
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf");
</script>
  </body>
</html>

Вот что у меня в результате получилось:



Автор: Николай на 14:17 10 коммент.
Теги: , ,

четверг, 1 марта 2012 г.

Самый простой способ вставить аудио на свой сайт

Самый простой способ вставить аудио на свой сайт
Иногда возникает необходимость вставить аудио на свой сайт. Это может быть, например, запись какого-то вебинара, аудио-уроки или еще что-то. Да и модным опять это становится:)
Здесь нам, как всегда, помогут уже апробированные сервисы. Вот ссылка на один из таких сервисов.


Пользоваться этим сервисом очень легко. На картинке у меня помечено, какие пункты нам с Вами нужны:


На следующей картинке красными стрелками отмечено то, что нам нужно заполнить и/или выбрать(mp3-файл, конечно, нужно заранее залить на свой сервер или еще куда-то):


После нажатия на кнопку Вы получите HTML-код примерно такого вида:


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

Пример(нажмите Play):

Вот и все, что я хотел Вам рассказать. Пробуйте, пользуйтесь!


Автор: Николай на 12:32 6 коммент.
Теги: , , , ,