Askmike.org

In this post I’ll list creative and beautiful webGL projects which I think are worth noting. I mainly created this list for myself, it contains cool webGL content from around the web. I’ll try to update it when I find new stuff worthy enough.

WebGL is a technique that extends javascript in a way that enables browser to render graphical stuff super fast (by using the GPU). You need a modern browser for the links to work.

The coolest stuff is on the top of the list.

• Rome (sound)
• webGL terrain (sound)
• A Holiday Message (sound + geo)
• Attractors trip
• Globe
• Animated volume particles
• Chrome Book
• Pool
• dynamic cubemap
• oos.moxiecode.com
  • Particles morth
  • Water/ocean

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore. Also note that it is almost always faster to load one (minified) file with all your javascript over your whole site.

Als je op een gegeven moment merkt dat je heel veel JavaScript plugins gebruikt kan je gaan denken om ze alleen in te laden wanneer nodig met Ajax. Als je met een CMS werkt waar je elke plugin niet op elke pagina nodig hebt kan je hier gebruik van maken om je website sneller te maken.

jQuery biedt voor dit doeleinde een makkelijke functie waarmee je dit kan bereiken:

$(document).ready(function() {
    $.getScript('link naar script',function(){
        //uit te voeren functie
    }
});

Met de functie getScript kan je een script inladen alsof je hem in de html had aangeroepen met , je houdt natuurlijk wel de dynamiek die JavaScript biedt om eerst te checken of je de plugin wel echt nodig hebt.

De uit te voeren functie is niet verplicht maar deze is vaak handig om gelijk een call te doen naar een plugin die je net hebt ingeladen, deze functie wordt pas uitgevoerd zodra het script helemaal is ingeladen.

In mijn blog gebruik ik een JavaScript gebaseerde syntax highlighter die mijn code (zoals hierboven) mooi opfleurt en kleurt. SHJS heb ik alleen op pagina’s nodig waar ik überhaupt code laat zien. Ik zet altijd al mijn code in

$(document).ready(function() {
    if ($('pre').length > 0))
    {
        $.getScript('shmain.min.js',function(){
                shhighlightDocument('/shjs/', '.min.js');
            })
    }
});

Ik moet ook de lengte van pre checken om te verifieren dat hij er echt is. jQuery geeft namelijk altijd een object terug, dit is de makkelijkste manier om te checken iets aanwezig is op de pagina.

Ik ga nog een stapje verder door alleen te checken of er een pre is op een post pagina, en niet op alle andere plekken van mijn website (WordPress only)

if (is_single()) {
    echo '';
}

You’ve found a dinosaur. This is one of my first posts about programming and the code quality is not of high standards, it is only here for archiving purposes.

Last week I’ve been messing around with jQuery and made something worth sharing. Let’s start of by showing you the demo.

As pointed out by YoYoMa, this doesn’t work in IE8

Demo of cool lightbulb animation!

As you can see there are two things happening when you turn the light on or off:

1. You can see a red spark going through the wire towards (or away from) the lightbulb.
2. The lightbulb will start shining with a fade effect.

Here is the code required for the animation, at the bottom I’ll explain how it works.

HTML

<div id="title">
            <img src="logoClean.png" />
            <div id="light" class="javahide">
                <img src="logoLights.png" />
           </div>
            <div id="moreLight" class="javahide">
                <img src="light.png" />
            </div>
            <div id="burn" class="javahide">
                <img src="burn.png" />
            </div>
</div>

<div id="kabel">
            <img src="cableMask.png" />
</div>

<div id="buttons">
            <p><a id="on" href="#">light ON</a></p>
            <p><a id="off" href="#">light OFF</a></p>
</div>

CSS

#light, #moreLight, #burn {
    margin-top: -275px;
}

kabel {
    position:absolute;
    top: 265px;
    left: 306px;
    margin-left: 200px;
    background-color:#c2c2c2;
    width: 500px;
    height: 50px;
    background-image:url(cable.png);
    background-repeat: no-repeat;
    background-position: 475px 0px;
}

Javascript

$(document).ready(function(){
    $(".javahide").hide();

    $('#on')
        .click(function(){
            $('#kabel').stop().animate({backgroundPosition:"(-25px 0px)"}, {duration:1000})
            $("#light").delay(1000).fadeIn(50);   
            $("#moreLight").delay(1600).fadeIn(1000);
            $("#burn").delay(2500).fadeIn(1000);
        })

    $('#off')
        .click(function(){  
            $('#kabel').stop().animate({backgroundPosition:"(475px 0px)"}, {duration:1000})
            $("#moreLight").fadeOut(10);   
            $("#light").fadeOut(50);   
            $("#burn").fadeOut(3000);   
        })
})

How does it work? Lightbulb – The shining light bulb is a combination of a few pictures on top of each other (rule 2 of the CSS makes sure of that), all the pics hidden and fade in after the button light ON is pressed.

the electric wire – Again I use multiple pictures on top of each other. I’ve made a small red ball and it’s set as background-image of the cable div. Inside the div I put a normal picture (HTML) which is white except for some transparency (the grey wire), this picture acts as a mask for the red spark.

I’ve used this jQuery background-position plugin to move the ball horizontally.