What is the most creative way you can think of to create a CSS/JS animated

Question

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take?

Here is a similar example I found

var wave = document.createElement("div");
    wave.className += " wave";
    docFrag.appendChild(wave);
    wave.style.left = i * waveWidth + "px";
    wave.style.webkitAnimationDelay = (i / 100) + "s";

Adding touch interaction functionality would be great. Are there any potential issues with using canvas for this purpose?

https://i.stack.imgur.com/VedDo.jpg

javascript jquery css animation

Answer 1

Answer №1

Check out this code snippet inspired by @DA.'s excellent response:

https://i.stack.imgur.com/Ymuhj.png

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var cw=canvas.width;
var ch=canvas.height;

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='16px verdana';
ctx.lineWidth=5;
ctx.strokeStyle='white';
ctx.fillStyle='white';
var offsetX=0;

var bk=makeWave(canvas.width,canvas.height-120,10,2,'lightskyblue','cornflowerblue');

requestAnimationFrame(animate);

function animate(time){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(bk,offsetX,0);
    ctx.fillStyle='white';
    ctx.font='18px verdana';
    ctx.fillText('Multiple Lists',cw/2,30);
    ctx.strokeRect(cw/2-50,85,100,50);
    ctx.fillStyle='gray';
    ctx.font='12px verdana';
    ctx.fillText('You can create and save multiple ...',cw/2,250);
    offsetX-=1;
    if(offsetX< -bk.width/2){offsetX=0;}
    requestAnimationFrame(animate);
}

function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){
    var PI2=Math.PI*2;
    var totValue=PI2*wavesPerWidth;
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');
    c.width=width*2;
    c.height=midWaveY+amplitude;
    var grad=ctx.createLinearGradient(0,0,0,midWaveY);
    grad.addColorStop(0.00,grad0);
    grad.addColorStop(1.00,grad1);

    ctx.beginPath();
    ctx.moveTo(0,0);
    for (x=0;x<=200;x++) {
        var n=totValue*x/100;
        ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY);
    }
    ctx.lineTo(c.width,0);
    ctx.closePath();
    ctx.fillStyle=grad;
    ctx.fill();
    return(c);
}

body{ background-color:white; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id=canvas width=300 height=300></canvas>

Answer 2

Check out this code snippet inspired by @DA.'s excellent response:

https://i.stack.imgur.com/Ymuhj.png

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var cw=canvas.width;
var ch=canvas.height;

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='16px verdana';
ctx.lineWidth=5;
ctx.strokeStyle='white';
ctx.fillStyle='white';
var offsetX=0;

var bk=makeWave(canvas.width,canvas.height-120,10,2,'lightskyblue','cornflowerblue');

requestAnimationFrame(animate);

function animate(time){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(bk,offsetX,0);
    ctx.fillStyle='white';
    ctx.font='18px verdana';
    ctx.fillText('Multiple Lists',cw/2,30);
    ctx.strokeRect(cw/2-50,85,100,50);
    ctx.fillStyle='gray';
    ctx.font='12px verdana';
    ctx.fillText('You can create and save multiple ...',cw/2,250);
    offsetX-=1;
    if(offsetX< -bk.width/2){offsetX=0;}
    requestAnimationFrame(animate);
}

function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){
    var PI2=Math.PI*2;
    var totValue=PI2*wavesPerWidth;
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');
    c.width=width*2;
    c.height=midWaveY+amplitude;
    var grad=ctx.createLinearGradient(0,0,0,midWaveY);
    grad.addColorStop(0.00,grad0);
    grad.addColorStop(1.00,grad1);

    ctx.beginPath();
    ctx.moveTo(0,0);
    for (x=0;x<=200;x++) {
        var n=totValue*x/100;
        ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY);
    }
    ctx.lineTo(c.width,0);
    ctx.closePath();
    ctx.fillStyle=grad;
    ctx.fill();
    return(c);
}

body{ background-color:white; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id=canvas width=300 height=300></canvas>

Answer 3

Answer №2

To create the effect of a wave, I would design it as a PNG with the bottom part solid gray and the top part transparent. This image would be placed in a div that is twice the width of the card, and then this div would be placed in another div the same width as the card (this second div acts as a 'mask').

Using CSS, I would apply a transform on the x-axis to animate the wave sideways. This can all be done without the need for any JavaScript.

Answer 4

To create the effect of a wave, I would design it as a PNG with the bottom part solid gray and the top part transparent. This image would be placed in a div that is twice the width of the card, and then this div would be placed in another div the same width as the card (this second div acts as a 'mask').

Using CSS, I would apply a transform on the x-axis to animate the wave sideways. This can all be done without the need for any JavaScript.

Answer 5

Answer №3

If I were to approach this task, here is what I would do:

Upon loading the page, I would create an off-screen canvas by setting it to display: none.
Next, in a loop, I would calculate the wave effect by:

Clearing with transparency,
Painting only the white parts since the colored part has a gradient,
After each paint stroke, extracting the PNG data from the canvas and saving it into an array.

After completing the loop, I would have an array of PNG images representing frames.
I could then cycle through these frames without having to recalculate the wave each time.

To achieve this, the period of the wave should align with the number of frames taken. For example, a 2-second animation at 10 Hz would require 20 frames for smooth cycling.

Alternatively, instead of computing this client-side, one could store the generated images server-side for easy downloading. These PNG images would be small in size due to their simple color scheme (transparent/white/alpha channel). With optimal settings, around 1KB per frame should suffice, resulting in a total size of just 20 KB for all frames.

Answer 6

If I were to approach this task, here is what I would do:

Upon loading the page, I would create an off-screen canvas by setting it to display: none.
Next, in a loop, I would calculate the wave effect by:

Clearing with transparency,
Painting only the white parts since the colored part has a gradient,
After each paint stroke, extracting the PNG data from the canvas and saving it into an array.

After completing the loop, I would have an array of PNG images representing frames.
I could then cycle through these frames without having to recalculate the wave each time.

To achieve this, the period of the wave should align with the number of frames taken. For example, a 2-second animation at 10 Hz would require 20 frames for smooth cycling.

Alternatively, instead of computing this client-side, one could store the generated images server-side for easy downloading. These PNG images would be small in size due to their simple color scheme (transparent/white/alpha channel). With optimal settings, around 1KB per frame should suffice, resulting in a total size of just 20 KB for all frames.

What is the most creative way you can think of to create a CSS/JS animated

Answer №1

Answer №2

Answer №3

Similar questions

Ways to eliminate the Horizontal scroll bar

Python script for downloading audio files loaded with JavaScript

Content that is partially concealed when scrolling through div elements

Ensure to wait for the user ID before accessing Firestore collections

Is there a way to modify the header color in LESS? I attempted to do so, but unfortunately, my changes were unsuccessful

What steps can I take to fix the sum function?

How to precisely position a div within a table cell using Firefox

AngularJS: resolving route dependencies

What is the best approach for extracting JSON data (using jQuery) from Google Geocoding services?

Discovering the Authentic Page upon Completion of Load using PhantomJS

Refusing to include two values due to the presence of a comma in JavaScript

Updating array with user input using Ajax

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

Adjust the background color of the header as you scroll

Obtaining information from the HttpServletResponse through an AJAX form

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

methods for extracting json data from the dom with the help of vue js

Determining the specific button pressed using jQuery

Using JavaScript to inject PHP variables into multiple <span> elements

What is the best method for displaying the accurate calculated value based on an element?