relaunch tekknik.com - v 2.0, architecture, graphics, music Einstellungen

[TEKKNIK]

hi leute

meine website erstrahlt in neuem design...

ich habe wert darauf gelegt dass diesesmal nicht nur musik so im vordergrund steht
sondern auch meine anderen leidenschaften grafik design & architektur erkennbar sind..

auch wollte ich die navigation ein wenig witziger gestallten, da ich nichts von dem
0815 navigationsmenü halte...

und bitte nicht wieder die alte diskussion aufrollen ob jetzt flash toll ist oder nicht, ich kann halt nur das... (IMG:style_emoticons/default/biggrin.gif)

würde mich über feedback freuen...

tekknik.com - v 2.0

Der Beitrag wurde von TEKKNIK bearbeitet: 25 Mar 2007, 21:10

[nives]

mir gefällt's natürlich auch und ich finde, nur weil ne page simpler gebaut wurde, is sie deshalb nicht minder wert. man muss ja nicht immer krampfhaft alles in eine webseite packen, nur um zu zeigen, was man nicht alles kann. für mich erfüllt sie ihren zweck.

ich teile deine meinung alpha, dass es dem user immer so einfach wie möglich gemacht werden soll, aber wenn ein flash-player kein standard ist, dann sollte man sowieso mal seine pc durchchecken lassen... (finde ich)

[eigengrau]

aber wenn ein flash-player kein standard ist, dann sollte man sowieso mal seine pc durchchecken lassen... (finde ich)

Meinst du damit einen Searchbot, Handy oder anderes portables Gadget? Deshalb heisst es auch User-Agent und nicht Browser - es gibt viele Möglichkeiten.

Ich hab mal die beiden hauptsächlichen Effekte nachgebaut:
1) Text einblenden wenn man über etwas drüberfahrt mit nach unten klappen
2) Bild beim drüber fahren austauschen (die Polygone die dann blinken)

Schaut dann mal so schnell getippt so aus:

CODE

<style>
#link1, #link2 { display: block; width: 50px; height: 50px; }
#link1 *, #link2 *{ display: none; }
#link1 { background: url('http://www.technoboard.at/style_emoticons/default/biggrin.gif') no-repeat 50% 50%; }
#link1:hover { background: url('http://www.technoboard.at/style_emoticons/default/alien.gif') no-repeat 50% 50%; }
#link2 { background: url('http://www.technoboard.at/style_emoticons/default/closedeyes.gif') no-repeat 50% 50%; }
#link2:hover { background: url('http://www.technoboard.at/style_emoticons/default/sleeping.gif') no-repeat 50% 50%; }
#link2:hover { background: url('http://www.technoboard.at/style_emoticons/default/sleeping.gif') no-repeat 50% 50%; }
#text { display: none; overflow: hidden; width: 200px; position: absolute; top: 10px; right: 10px }
#link2:hover #text { display: block }
</style>

<script>
var text_height = 300;
var text_steps = 50;
var text_step_time = 10;
var text_step_current = 0;
var text_timeout;

function text_step() {
    var el = document.getElementById('text');
    el.style.height = (text_height * (text_step_current / text_steps)) + 'px';
    if (text_step_current < text_steps) {
        text_step_current++;
        text_timeout = window.setTimeout('text_step()', text_step_time);
    }
}

function text_animate() {
    text_step_current = 0;
    var el = document.getElementById('text');
    el.style.height = 0;
    el.style.display = 'block';
    text_step();
}

function text_stop() {
    window.clearTimeout(text_timeout);
    document.getElementById('text').style.display = 'none';
}
</script>

<a id="link1" href="#"><span>link 1</span></a>
<a id="link2" href="#" onmouseover="text_animate()" onmouseout="text_stop();"><div id="text">
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
</div></a>

Geht so auch noch mit einem User-Agent der kein Javascript kann und auch mit einem der kein CSS mehr kann - im Grunde braucht man also nur HTML und alles andere ist Eye-Candy.

Vielleicht mal ein Anreiz zu schauen was es sonst noch so gibt und geht.