VPF::C днем рождения, dm9! - Форум программистов

Sardar

Дата 12.6.2005, 00:17 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Убил 2 часа на сие чудо, но вышло прикольно smile

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Поздравление для dm9</title>
<style type="text/css">
.dm9 {
  color: #bd4803;
  font-size: 30px;
}
#middle_fuck_w3c {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0px;
  overflow: visible;
  text-align: center;
}
.container {
  position: relative;
  height: 180px;
  width: 600px;
  top: -100px;  
  margin-left: auto;
  margin-right: auto;
/*  border: 1px solid navy; */
}
.slide {
  font-family: Verdana;
  font-size: 24px;
  colr: #061298;
  font-weight: bold;
  display: none;
}
</style>
<script type="text/javascript">
<!--
var a;
function start_animation() {
  a=new Animator(document.getElementById("cont"));
  a.start();
}
function Animator(dv) {
  if(!dv) throw "Animator.<init>: Null pointer exception";
  this.anims=[];
  var el, p, ret, hndl, a;
  for(var i=0; i<dv.childNodes.length; i++) {
    if((el=dv.childNodes[i]).nodeType!=1||el.className!="slide"||(p=el.getAttribute("animation"))==null) continue;
    ret=Animator.parse(p);
    for(var j=0; j<ret.length; j++) {
      hndl="Animation_"+ret[j][0].replace(/-/g,"_");
      if(typeof(window[hndl])!="function") throw "Animator.<init>: Animation: "+ret[j][0]+" is not found";
      this.anims.push(new window[hndl](this.anims.length, this, el, ret[j][1]));
    }
  }
  this.running=false;
}
Animator.prototype.start=function() {
  if(this.running||this.anims.length<1) return;
  this.running=true;
  this.anims[0].start();
}
Animator.prototype.stop=function() {
  this.running=false;
  for(var i=0; i<this.anims.length; i++) this.anims[i].stop();
}
Animator.prototype.notifyFrame=function(anim, id) {
  if(id>=0 && (id+1)<this.anims.length) this.anims[id+1].start();
  //notify listener
}

Animator.parse=function(txt) {
  if(txt==null) throw "Animator.parse: what a fuck? Don't give me null!";
  var ret=[], next=false, a;
  var r=txt.replace(Animator.tagReg, function(full, name, arg, sep, off, str) {
    if((!next&&sep)||(next&&!sep)) throw ("Animator.parsr: Parse error in "+txt+", offset: "+off);
    else {
      if(sep) next=false;
      else {
        a=(arg)? Animator.parseArg(arg): [];
        ret.push([name, a]);
        next=true;
      }
    }
    return "";
  });
  if(!/^\s*$/.test(r)) throw "Animator.parse: Parse error in: "+txt;
  return ret;
}
Animator.parseArg=function(txt) {
  if(txt==null) throw "Animator.parseArg: what a fuck? Don't give me null!";
  var ret=[], t;
  var r=txt.replace(Animator.argReg, function(full, time, color, name, sep, off, str) {
    if(time) {
      t=time.match(/^([0-9]+)([hms]+)$/);
      switch(t[2]) {
        case "h": t=parseInt(t[1])*60*60*1000; break;
        case "m": t=parseInt(t[1])*60*1000; break;
        case "s": t=parseInt(t[1])*1000; break;
        case "ms": t=parseInt(t[1]); break;
        default: t=0;
      }
      ret.push(["time", t]);
    } else if(color) {
      t=[parseInt(color.substr(1,2), 16), parseInt(color.substr(3,2), 16), parseInt(color.substr(5,2), 16)];
      ret.push(["color", color, "rgb("+t[0]+","+t[1]+","+t[2]+")",t]); 
    } else if(name) ret.push(["name", name]);
    return "";
  });
  if(!/^\s*$/.test(r)) {
   alert(r);
   throw "Animator.parse: Parse error in: "+txt;
  }
  return ret;
}
//arguments grammar
Animator.tagReg=/(?:(?:([a-zA-Z0-9\-]+):\s*([^;]*))|(;))/g;
Animator.argReg=/(?:([0-9]+(?:h|s|ms|m))|(#[0-9A-fa-f]{6})|(a-zA-Z0-9_)|(\s+))/g;

//=============- Blink animation -===============
/**
* Last frame animation, blocks further loop
*/
function Animation_blink_loop(id, prnt, dv, param) {
  this.animator=prnt;
  this.id=id;
  this.target=dv;
  this.params=param;
  this.running=false;
  if(this.params[0][0]!="time"||this.params[0][1]<1) throw "Animation::BlinkLoop.<init>: time is not specified, must exists in first parameter";
}
Animation_blink_loop.prototype.start=function() {
  var timeon=this.params[0][1];
  var timeoff=(this.params[1]&&this.params[1][0]=="time")? this.params[1][1]: timeon;
  var on=true, anim=this, tg=this.target;
  tg.style.display="block"; //fixme: only block elements? ;-)
  this.running=true;
  this.tmr=window.setTimeout(function() {
    if(on) {
      tg.style.visibility="visible";
      on=false;
      if(anim.running) this.tmr=window.setTimeout(arguments.callee, timeon);
    } else {
      tg.style.visibility="hidden";
      on=true;
      if(anim.running) this.tmr=window.setTimeout(arguments.callee, timeoff);
    }
  }, timeoff);
}
Animation_blink_loop.prototype.stop=function() {
  this.running=false;
}
//=============- Run color animation -===============
Animation_run_color.frameTime=50;
function Animation_run_color(id, prnt, dv, param) {
  this.animator=prnt;
  this.id=id;
  this.target=dv;
  this.params=param;
  this.tmr=null;
  if(this.params.length<3||this.params[0][0]!="time"||this.params[0][1]<1||this.params[1][0]!="color"||this.params[2][0]!="color")
    throw "Animation::RunColor.<init>: Illigal argument exception, must be <time> <color> <color>";
}
Animation_run_color.prototype.start=function() {
  var frames=Math.floor(this.params[0][1]/Animation_run_color.frameTime);
  if(frames<1) throw "Animation::RunColor.start: Illigal state exception, 0 frames to go";
  var steps=[(this.params[2][3][0]-this.params[1][3][0])/frames,
             (this.params[2][3][1]-this.params[1][3][1])/frames,
             (this.params[2][3][2]-this.params[1][3][2])/frames
            ];
  var color=[this.params[1][3][0],this.params[1][3][1],this.params[1][3][2]];
  this.target.style.display="block";
  this.target.style.color=this.params[1][2];
  var anim=this; 
  this.tmr=window.setInterval(function() {
    for(var i=0; i<color.length; i++) color[i]+=steps[i];
    anim.target.style.color="rgb("+Math.round(color[0])+","+Math.round(color[1])+","+Math.round(color[2])+")";
    if(--frames<=0) {
      window.clearInterval(anim.tmr);
      anim.tmr=null;
      anim.animator.notifyFrame(this, anim.id);
    }
  }, Animation_run_color.frameTime);
}
Animation_run_color.prototype.stop=function() {
  if(this.tmr!=null) window.clearInterval(this.tmr);
  this.tmr=null;
}
//-->
</script>
</head>
<body onload="start_animation()">
<div id="middle_fuck_w3c">

<div class="container" id="cont">
<div class="slide" animation="run-color: 2s #ffffff #061298; run-color: 1s #061298 #ffffff;">Гуру вёрстки...</div>
<div class="slide" animation="run-color: 2s #ffffff #061298; run-color: 1s #061298 #ffffff;">Пример для подражания...</div>
<div class="slide" animation="run-color: 2s #ffffff #061298;">Побольше тебе здоровья, идей и удачи!</div>
<div class="slide" animation="blink-loop: 2s 500ms">С Днём Рождения <span class="dm9">dm9</span> !!!</div>
</div>
<div>
</body>
</html>

Для ленивых ссылка: http://sardar.vingrad.ru/dm9_effects.htm
Загрузиться каракулями, т.к. сервер выдаёт charset=windows-1252. Почему браузеры тег meta игнорируют для меня загадка. Ставим правильную кодировку в ручную smile

Для любознательных: да, аттрибут animation обрабатываться кодом, можно сделать сколь угодно "слайдов". Впрочем это написанно "на скорую руку" для сегодняшнего события, если развить идею, то можно сделать нечто красивое. Хотя зачем, если есть флешь, а в следующем году SVG? smile

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Black

Дата 12.6.2005, 00:37 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

Sardar
ну ты маньяк smile

а кодировку браузер путает :-) надо вручную ставить.

Тока зачем было так извращаться, можно с помощью фильтров обесцвечивания сделать и код будет меньше.

Цитата

filter:alpha(opacity=50); //Это для IE
-moz-opacity:0.5; //Mozilla
opacity:0.5; //Safari
khtml-opacity:0.5; //Konquerer

--------------------

Могу все, но ничего не умею :-)

Sardar

Дата 12.6.2005, 02:42 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

[offtop]

Цитата(PHP @ 11.6.2005, 23:37)

Тока зачем было так извращаться

Это вообще аниматор, а какие фичи браузера использовать, это по вкусу smile

Писать понравилось, года полтора назад хотел подобное нарисовать, появлось время, появился повод, вышел результат smile

Надо будет подчистить, документировать и кинуть в JS, многим интересен будет подход.
[/offtop]

--------------------

Poseidon

Дата 12.6.2005, 03:18 (ссылка)

(нет голосов)

Загрузка ...

Delphi developer

Профиль
Группа: Комодератор
Сообщений: 5273
Регистрация: 4.2.2005
Где: Гомель, Беларусь

Sardar, респект

--------------------

Если хочешь, что бы что-то работало - используй написанное,
если хочешь что-то понять - пиши сам...

dm9

Дата 12.6.2005, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Ребята, громадное спасибо вам всем за поздравления и пожелания! Особенно за стихи smile

Я ваших поздравлений никогда не забуду.

Сардар, супер! smile

Кстати, мы когда-то говорили на эту тему, ты сказал, что такое можно делать только через фильтры под конкретный браузеры smile

Классная демка smile

Насчёт кодировки - попробуй прописать в .htaccess AddDefaultCharset windows-1251 - вроде, помогало.

ManiaK

Дата 12.6.2005, 12:11 (ссылка)

(нет голосов)

Загрузка ...

Homo Sapience

Профиль
Группа: Комодератор
Сообщений: 1145
Регистрация: 3.8.2004
Где: ИУ5-93

Цитата(PHP @ 12.6.2005, 00:37)

ну ты маньяк

Блин, пора менять ник.....

Caramel

Дата 14.6.2005, 10:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 4190
Регистрация: 7.8.2004
Где: Дюссельдорф

Дима, с днем Рождения smile

Ignat

Дата 14.6.2005, 10:49 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

С Днем Рождения.

Пусть твоя жизнь будет красочной!

Только не как новогодняя елка smile

--------------------

Теперь при чем :P

Се ля ви

Дата 14.6.2005, 12:25 (ссылка)

(нет голосов)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Оть!.. Опоздал... smile

Ну, лучше поздно, чем никогда - с Днём Варенья! Всего самого лучшего! smile

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

Mont

Дата 15.6.2005, 04:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Vingrad developer
Сообщений: 274
Регистрация: 13.11.2004
Где: Altay

От тож малость припозднился...
С ДР тебя!
Нескучной жизни тебе!

--------------------

"Если однажды Вдруг
Меня не окажется вовсе
в заповедной заветной тарелке
Твоего праведного сновидения
Знай - Неуловимые мстители настигли меня."
© Егор Летов

Иль

Дата 17.6.2005, 10:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 544
Регистрация: 3.3.2005
Где: Москва

Лучше поздно, чем никогда.

Всего наилучшего dm9.
Желаю, чтоб подарки не надоели или были страшно вкусными, и чтоб в следующем году их было больше чем в этом smile

--------------------

Ты виндусятник?... А я да. smile

dm9

Дата 17.6.2005, 11:53 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Всем ещё раз спасибо smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Флейм \| Следующая тема »