My smart father is an electronics expert, having studied
electonics on his own for so many years now. Yesterday he came up with a challenge to me. He basically asked me to draw a simple schematic with CSS to be
animated with JavaScript. So he sketched something on his notebook and I took a look at it. Actually, I don't know what it was, but this maorning I managed
to reproduce it using CSS and jQuery. If you know what it is, please let me know because I'm a total ignorant in this field. lol
The first thing to do is using CSS and HTML to draw the schematic. In this case, we have the following HTML structure:
<div id="container">
<div id="line"></div>
<div id="block"></div>
<div id="line2">
<div class="block"><div class="inner"></div></div>
<div class="block"><div class="inner"></div></div>
<div class="block"><div class="inner"></div></div>
</div>
</div>
So we have a square in the center, a thick line on the left and some sequential squares on the right. This is the CSS instead:
#container {
width: 600px;
height: 100px;
position: relative;
margin: 2em auto;
}
#block {
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
#line {
width: 250px;
height: 2px;
background: black;
position: absolute;
left: 0;
top: 50%;
margin-top: -1px;
display: none;
}
#line2 {
width: 250px;
height: 50px;
position: absolute;
right: 0;
top: 0;
}
div.block {
width: 80px;
height: 50px;
position: relative;
border-bottom: 2px solid black;
float: left;
display: none;
}
div.inner {
width: 50px;
height: 50px;
border: 2px solid black;
border-bottom: none;
margin: 0 auto;
background: white;
}
Finally, we can add jQuery:
$(document).ready(function() {
window.setTimeout(function() {
$('#container #line').fadeIn('slow', function() {
$('#container #line2').fadeIn('slow', function() {
$(this).find('div:first').fadeIn('slow', function() {
$(this).next().fadeIn('slow', function() {
$(this).next().fadeIn('slow', function() {
$(this).next().fadeIn('slow');
});
});
});
});
});
}, 1000);
});
You can see the demo below.