KOMPOOS.NL

flame effect css3

home » javascripts » text-effects » script-flame-effect-css.html

voorbeeld flame effect

vuur en vlam

uitleg css3 flame procedure

De vervangende code voor IE (filters) is heel makkelijk in te bouwen in dit script. Toch is de alternatieve IE-code niet ge-implementeerd op deze pagina. Het resultaat is dermate lelijk, dat je jouw bezoekers dit echt niet aan wilt doen... Beter (dan maar) gewoon niets (natuurlijk wél de tekst, maar geen effect) in IE weergeven. Alle andere browsers geven het effect zoals je op deze pagina kunt zien.

Plaats de regel html-code op de plaats waar je het effect wilt hebben, en plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina. Het javascript is foutloos volgens de JSLint norm en valideert voor het overige op HTML5

html code voor het flame effect "gebeuren"


<h1 style="margin-left:1em;color:#300;"      id="flame_effect">vuur en vlam</h1>

javascript voor het flame effect


<script>
/*global window: false */
var i, rook = ',0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e';
var vuur_effect = {
    effect_kleur: ['#ff0000', 'transparent', '#ff0'],
    vuur_schakering: ['0px -1px 2px', '0px -1px 3px', '0px -2px 3px'],
    flame_positie: [0, 1, 2],
    maak_flames: function() {
        var flame_object = document.getElementById("flame_effect");
        var schaduw_variabelen = '';
        for (i = 0; i < 3; i++) {
            if (schaduw_variabelen) {schaduw_variabelen += ", ";}
            var effect_schaduwen = this.vuur_schakering[this.flame_positie[i]];
            schaduw_variabelen += effect_schaduwen + ' ' + this.effect_kleur[i];
            this.flame_positie[i] = ++this.flame_positie[i] % 3; 
        }
        flame_object.style.textShadow = schaduw_variabelen + rook;
    }
};
window.setInterval(function() {
    vuur_effect.maak_flames();
}, 60);
</script>