Here is what I currently have /

This works but I want it to be like a wave. Rather than a 'v' shape, it should look like an actual wave. How do you gradually do this?

var height = 0;

setInterval(function () {
    $('#container').prepend('<div style="height:' + Math.abs(height++) + '%"></div>');
    height = (height == 100) ? -100 : height;
}, 10);

my css:

html, body, #outerContainer, #container {
    height:100%;
}
#outerContainer {
    display : table;
}
#container {
    display : table-cell;
    vertical-align:bottom;
    white-space:nowrap;
}
#container > div {
    width:5px;
    background:black;
    display:inline-block;
}

Here is what I currently have http://jsfiddle/6GEfr/

This works but I want it to be like a wave. Rather than a 'v' shape, it should look like an actual wave. How do you gradually do this?

var height = 0;

setInterval(function () {
    $('#container').prepend('<div style="height:' + Math.abs(height++) + '%"></div>');
    height = (height == 100) ? -100 : height;
}, 10);

my css:

html, body, #outerContainer, #container {
    height:100%;
}
#outerContainer {
    display : table;
}
#container {
    display : table-cell;
    vertical-align:bottom;
    white-space:nowrap;
}
#container > div {
    width:5px;
    background:black;
    display:inline-block;
}

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 27, 2018 at 6:18 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked May 1, 2014 at 21:41 user3594098user3594098 8566 bronze badges 1

• 1 There are many different kinds of waves. The one you created is called a triangle-wave. Maybe you want to create a sine wave? – Philipp Commented May 1, 2014 at 21:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Just use Math.sin() to model the wave.

Updated Example

var i = 5, height = 0;
setInterval(function () {
    $('#container').prepend('<div style="height:' + height + '%"></div>');
    i += 0.05;
    height = 50 * Math.sin(i) + 50;
}, 10);

If you want to make the wave smoother, decrease the increment value and the width of the elements. Here is an example.