Clever Geek Handbook

Pixelate effect with divs?

I am trying to create a pixelation effect, but with a div. The divas are small, 25px by 25px. I dont want to compile hundreds of them into markup.

I want the entire piece of the page to be composed of these "pixels" div so that I can do something interesting with color randomization.

I'm guessing it has something to do with cloning divs, but assuming I am doing this, how would I clone them in such a way that they generate the full body size? So it seems like the full screen is filled with pixels?

Note. I am a beginner developer.

+3


source to share


2 answers


Your question is somewhat vague, but here is what I managed to collect, I hope this answers your question. Basically I just create a long string containing all the divs and insert them into the page

http://codepen.io/anon/pen/pbnth

//helper function see
//http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var num_of_pixels = 5000;

var output = "";

for(var i = 0; i < 5000; i++) {
  output+= '<div style="'
  output+= "background-color:"+getRandomColor()+";"
  output+='"" class="pixel"></div>'
}

var container = document.getElementById('container');
container.innerHTML = output

To get the full screen effect you are talking about, just calculate the innerwidth * and divide it by the area of ​​each pixel, that's 25px with a 2px edge, so 27 ^ 2

EDIT:



Here's an example using a fixed set of colors

http://codepen.io/mattbucci/pen/ueBfx

And here's a bonus animated version, although I think there is probably a more efficient way to do it with canvas

http://codepen.io/mattbucci/pen/avrjd

+1


source


Here's a rudimentary FIDDLE to get you started.

There is a container (you can change it to body) that is filled with small divs (you adjust the size of the divs and container as you see fit).

JavaScript fills the container and assigns an arbitrary color to each inline styled element.



Js

for(var n=1; n < 100; n++)
   {
    for(var r = 1; r < 50; r++)
       {
        mycolor = '#' + Math.random().toString(16).substring(2, 8);
        var mydiv = "<div style='background-color:" + mycolor + " ;'></div>";
        $( '.container' ).append( mydiv );
        }
        $( '.container' ).append( "<div class='clearboth'></div>");
    }
+1


source






More articles:


All Articles