JS Kefrens Bars 256b by Clash
screenshot added by Skate on 2007-05-19 03:51:58
platform :
type :
release date : may 2007
  • 29
  • 6
  • 2
popularity : 59%
  • 0.73
alltime top: #5748
added on the 2007-05-19 03:51:58 by Skate Skate

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr


rulez added on the 2007-05-19 05:09:34 by GnoStiC GnoStiC
It moves :)
rulez added on the 2007-05-19 11:03:08 by Optimus Optimus
Yea, very cool. I watched all 256B jscript intros, but I've just realized I remember a few of them. This one is really nice. Only the name is bad! - what will be next - "DOS Tunnel 256B" or "Windows Cool Textures And Spheres Demo"?
rulez added on the 2007-05-19 13:02:32 by Pirx Pirx
rulez added on the 2007-05-19 13:14:35 by Pulsar Pulsar
rulez added on the 2007-05-19 13:57:09 by MGzzY MGzzY
Too bad the background isn't black. It sort of ruin the visual :\

Using the same image I managed to squeeze the fx ( it's flickering a bit in Opera, but perfectly fine in FF and IE ) into 244b and have a black background. Using another image I'm 2 bytes over the limit. Even when trimming the GIF.

Too bad position:fixed; is so slow/buggy in most browsers. It could really help for JS byte-tros.

Nice and dirty trick with the trimming of the GIF ;)
added on the 2007-05-19 14:01:06 by p01 p01
cool :)
rulez added on the 2007-05-19 14:13:10 by am-fm am-fm
sucks added on the 2007-05-19 14:15:31 by elkmoose elkmoose
Another option, is to get rid of the image and use a tag with a background color + left/right borders. It's not difficult to fit that and a black bg in 256b.
added on the 2007-05-19 14:22:54 by p01 p01
BB Image for the intro, but BB Image for the browser of choice.
So pig it is!
added on the 2007-05-19 14:26:12 by nitro2k01 nitro2k01
nice. @ nitro2k01 what's wrong with FF2.x?
rulez added on the 2007-05-19 14:33:17 by cxt cxt
cxt: I was referring to the screenshot. If that's really FF2.x he deserves a thumbdown for styling it like IE.
added on the 2007-05-19 14:37:36 by nitro2k01 nitro2k01
@pirx: as you may remember, I recently used "kle$100" like names which were more original than "JS Kefrens Bars 256b" :) But when I uploaded this one, it was very very late (5:00am or so) and I was very sleepy. Next time I'll wait for the morning and name my products better, I promise ;)

@p01: I like your 256b js effects. Nice to hear that you could find more optimizations. I gave up trying when I reached 256b limit :)

@tmb: believe or not, I agree with you. not only this product, JS is totally crap (for demo programming). But I like it somehow :)

@nitro2k01: At my home PC, it works faster and smoother on IE. This is why I put IE in the screenshot. It's my personal recommendation. Of course you can always hate Microsoft. I'm not against that :)

p.s: I'm using IE 7.0 and FF 2.0.3.
added on the 2007-05-19 15:00:14 by Skate Skate
For the record: It works with FF 1.5 too.
rulez added on the 2007-05-19 15:01:51 by René Madenmann René Madenmann
For me it works about equally fast on Opera and IE6, but slightly slower on FF2. But not everybody can like Opera I guess.

I'lll give you your thumb if you promise to at least try Opera 9 out.
rulez added on the 2007-05-19 15:26:56 by nitro2k01 nitro2k01
whats the big idea, c64 can do this with hands down.
sucks added on the 2007-05-19 15:28:43 by Oswald Oswald

Sure JS, and web standards in general, have lots of limitations making it non trivial to do demo coding. But it's a fun challenge.

The version I mentionned above( 210b of JS/html + XXb for the image ) :
Code:<body bgColor=0 id=B><script>setInterval("b='';i=90;S=Math.sin;while(i--)b+='<img src=i style=position:absolute;width:6%;bottom:0;height:'+i+'%;left:'+(46+32*S(A+=88)*S(A+i/6))+'%>';B.innerHTML=b",A=9)</script>

The no image version ( 256b of JS/html ) :
Code:<body bgColor=0 id=B><script>setInterval("b='';i=90;S=Math.sin;while(--i)b+='<p style=\"position:absolute;background:red;border:outset red;width:6%;bottom:0;border-width:0 9;height:'+i+'%;left:'+(47+36*S(A+=88)*S(A+i/6))+'%\">';B.innerHTML=b",A=9)</script>

/!\ pouët's comment parser, introduces undesired whitespaces, line breaks and badly split html entities breaking the code.
added on the 2007-05-19 15:35:35 by p01 p01
nice effect
rulez added on the 2007-05-19 15:59:35 by vigo vigo
Alcatraz bars not kefrens ;)
added on the 2007-05-19 16:01:08 by hitchhikr hitchhikr
Metalwar bars :)
Kefrensbars are always nice
rulez added on the 2007-05-19 17:25:21 by cruzer cruzer
@p01: thanks for ruining my product's page ;)
I tried your codes and both of them have some nice and smart solutions. But using percentage size looks awful in full screen. btw, if you use black background, you can simple gain 1 byte by initializing "b" variable like b=0 instead of b=''. "0" will be invisible right? :)
added on the 2007-05-19 21:51:48 by Skate Skate
Sorry. FWIW the page is only ruined in IE :p

Good catch with the b=0. Going one step further leads to b=i=90 which allows to use a 49 bytes image \o/
added on the 2007-05-19 22:22:10 by p01 p01
rulez added on the 2007-05-19 23:45:10 by decipher decipher
rulez added on the 2007-05-20 01:44:42 by T$ T$
rulez added on the 2007-05-20 13:22:32 by coze coze
This is misnamed, these are Alcatraz bars or, as "I am going to change my nick regularly" says, Metalwar bars. It is nice.
cool indeed
rulez added on the 2007-05-20 22:44:40 by tesla tesla
rulez added on the 2007-05-24 17:18:42 by puNky puNky
good for 256 bytes
rulez added on the 2007-05-24 17:21:21 by RA RA

(the bonus one is better)
rulez added on the 2007-06-28 18:24:00 by Momo Vampire Momo Vampire
Super cool, bro, keep it up.
added on the 2007-07-02 02:10:43 by LHW II LHW II
rulez added on the 2007-07-11 20:47:58 by Teehase Teehase
to me, they're js bars only :)
rulez added on the 2008-01-05 13:51:59 by anesthetic anesthetic
rulez added on the 2008-01-07 23:33:09 by xeron xeron
rulez added on the 2008-01-07 23:39:36 by Preacher Preacher
heh sk8
rulez added on the 2010-03-20 09:38:01 by spritus spritus
rulez added on the 2010-03-20 09:42:35 by Mystra Mystra
rulez added on the 2010-03-20 09:47:35 by SiR SiR
Pretty sweet :-)

I haven't been able to find much about kefrens or alcatraz bars and I'm trying to recreate them in a rasterizer demo. Anybody has some good info about them? I've tried to create them from the scripts in the replies but it works differently since I have to fill a buffer which is buffer[ x+y*pitch]; and just can't get it right. Any help would be appreciated.
rulez added on the 2010-06-09 14:22:36 by _0x3a ^DESiRE _0x3a ^DESiRE
Uhmm... simulating kefratraz bars in a chunky buffer is really, really basic stuff...

for( bar=0; bar<number_of_bars; bar++ )
for( count=bar*bar_gap; count<displayheight; count++ )
for( x=0; x<barwidth; x++ )
buffer[count*pitch+x+barxpos[bar]] = barimage[x];


bar_gap is the gap between the bars at the top
barxpos[] is your calculated wave function
barimage[] is the barwidth x 1 bar image
added on the 2010-06-09 14:58:38 by xeron xeron
rulez added on the 2010-06-09 16:01:26 by lsl lsl
Ah right, I was doing it way too complicated, many thanks xeron.
Good for the size.
rulez added on the 2011-05-15 13:20:35 by johnl johnl

lists containing this prod

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment