KOMPOOS.NL

text effect

home » javascripts » text-effects » text-effect.html

sitemap


uitleg text-effect procedure

Als jouw javascript ingeschakeld staat, zal het effect jou niet ontgaan zijn bij het openen van de pagina. Om dit effect toe te passen op jouw website, moet je het onderstaande javascript(je) zo laag als mogelijk in de body-sectie van jouw pagina plaatsen. In dit voorbeeld heb ik de h1 het id "text-effect" gegeven. Maar ik neem aan dat je begrijpt dat je alle tags en div's op een pagina dit id kan geven. Pas, van geval tot geval, de CSS-code (die helemaal onderaan deze pagina staat) aan om een werkbaar geheel voor jouw website te krijgen.

javascript tekst-effect


<script>
/*global window: false */
var i = -50,
stoppen;
function start_effect(elementid) {
    stoppen = setInterval("effect_id('" + elementid + "')", 15);
}
function effect_id(x) {
    x = document.getElementById(x);
    x.style.top = i + "px";
    if (i > 20) {
        clearInterval(stoppen);
        x.style.color = '#000';
        x.style.zIndex = -1;
        return;
    }
    i++;
}
window.onload = function() {
    start_effect('text-effect');
};
</script>

stylesheet voor tekst-effect


<style type="text/css">
        #text-effect{
                position:absolute;
                top:-60px;
                color:#f00;
                width:100%;
                margin:0}
        h2{
                margin-top:81px}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.