What is the best way to transform this unfamiliar CSS element into JavaScript code?

Question

What is the best way to transform this unfamiliar CSS element into JavaScript code?

I'm facing an issue where I want to animate a CSS image based on time constraints, but since it's in CSS, I'm unable to achieve the desired effect. The animation in question is not the sun itself, but rather a yellowish half-circle animation showcased in this example. My goal is to implement that half circle animation onto a completely random shape.

For example, if there's a white canvas with a random deformed circle in the center, how can I fill that circle with the same animation from the aforementioned example? How do I convert that CSS animation into JavaScript or control the CSS so that it stops and starts at specific values?

I don't expect someone to do all the work for me, but some guidance on where to start when utilizing that yellowish feature from the pen would be greatly appreciated.

Thank you.

Below is the code snippet:

<div class="sunmoon">
        <h2>Sun &amp; Moon</h2>
        ...

javascript jquery html css weather

Answer 1

Answer №1

To achieve this effect in Illustrator, you can create a shape with a transparent inside and a colored outside. Place another box underneath the shape with a different color (such as yellow) and the same width. Use CSS properties like z-index, position:absolute, and left:-100% to position the box perfectly. By clicking on an element, initiate and halt the transition to the right.

A great tool for managing animations like this is GSAP TimeLineMax. It provides functions to control the animation playback:

// Make sure this code runs after the document loads.
let animation = new TimelineMax();
animation
 .to(
      ".underneath-box", // class of the box
      10, // duration in seconds
      { 
        left:"100%", // move to 100% width
        ease: Power4.easeInOut // chosen ease effect
      });

animation.pause(); // Pause the animation by default

$('start-button').click(function(){    // when start button is clicked
    animation.play().timeScale(1);   // start the animation
});


$('reset-button').click(function(){   // when reset button is clicked
    animation.reverse().timeScale(2);   // reverse the entire animation
});

This assumes some knowledge of HTML and CSS basics. Ensure you create the necessary divs and buttons with the correct classes. Good luck!

Answer 2

To achieve this effect in Illustrator, you can create a shape with a transparent inside and a colored outside. Place another box underneath the shape with a different color (such as yellow) and the same width. Use CSS properties like z-index, position:absolute, and left:-100% to position the box perfectly. By clicking on an element, initiate and halt the transition to the right.

A great tool for managing animations like this is GSAP TimeLineMax. It provides functions to control the animation playback:

// Make sure this code runs after the document loads.
let animation = new TimelineMax();
animation
 .to(
      ".underneath-box", // class of the box
      10, // duration in seconds
      { 
        left:"100%", // move to 100% width
        ease: Power4.easeInOut // chosen ease effect
      });

animation.pause(); // Pause the animation by default

$('start-button').click(function(){    // when start button is clicked
    animation.play().timeScale(1);   // start the animation
});


$('reset-button').click(function(){   // when reset button is clicked
    animation.reverse().timeScale(2);   // reverse the entire animation
});

This assumes some knowledge of HTML and CSS basics. Ensure you create the necessary divs and buttons with the correct classes. Good luck!

Answer 3

Answer №2

After spending some time working on this, I've come up with a solution using plain JavaScript. It may not be exactly what you were looking for, but it's the best I could do.

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var context = canvas1.getContext("2d");
context.beginPath();
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.lineWidth = 2;
context.stroke();

animateCanvases();

function animateCanvases(){
  var width = 0;
  var timer = setInterval(function(){
    canvas2.width = width;
    width += 1;
    
    var ctx = canvas2.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 100, 89, 0, 2 * Math.PI);
    ctx.fillStyle = "#efba32";
    ctx.fill();
    
    if (width === 200) {
      clearInterval(timer);
    }
  }, 20);
}

.canvases{
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="canvas1" class="canvases" width="200" height="200></canvas>
<canvas id="canvas2" class="canvases" width="200" height="200></canvas>

Answer 4

After spending some time working on this, I've come up with a solution using plain JavaScript. It may not be exactly what you were looking for, but it's the best I could do.

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var context = canvas1.getContext("2d");
context.beginPath();
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.lineWidth = 2;
context.stroke();

animateCanvases();

function animateCanvases(){
  var width = 0;
  var timer = setInterval(function(){
    canvas2.width = width;
    width += 1;
    
    var ctx = canvas2.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 100, 89, 0, 2 * Math.PI);
    ctx.fillStyle = "#efba32";
    ctx.fill();
    
    if (width === 200) {
      clearInterval(timer);
    }
  }, 20);
}

.canvases{
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="canvas1" class="canvases" width="200" height="200></canvas>
<canvas id="canvas2" class="canvases" width="200" height="200></canvas>

Answer 5

Answer №3

The provided example demonstrates the use of two divs, an outer and an inner, to achieve a specific visual effect. The outer div is styled with a border radius property that gives it the appearance of a half circle. On the other hand, the inner div is designed as a normal rectangle with overflow set to hidden. Through scripting, the illusion of wiping to the right is created by animating the width of the inner div from 0% to 70% of the outer div. To replicate this effect using a polygon shape, one would need to utilize clip-path instead of border-radius.

For instance, here is code showcasing how an arbitrary polygon can be used to wipe right with a contrasting background color:

<div>
<div class="outer"><div class="inner"></div></div>
</div>

CSS:

.outer { 
  margin-left:200px;
  background-color: lightgray;
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  -moz-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
}
.inner  {
  background-color: red;
  width :0;
  height: 300px;
  display: block;
}

jQuery:

$('.outer').click(function() {
    $('.inner').animate({width:"150px"}, 1800)
});

Check out this working fiddle for a live demo: https://jsfiddle.net/r93pocgt/

In my implementation, I've utilized jQuery's animate function to dynamically adjust the CSS property for the width upon clicking the outer div. This approach aims to simplify the process and clarify the functionality of the script.

Answer 6

The provided example demonstrates the use of two divs, an outer and an inner, to achieve a specific visual effect. The outer div is styled with a border radius property that gives it the appearance of a half circle. On the other hand, the inner div is designed as a normal rectangle with overflow set to hidden. Through scripting, the illusion of wiping to the right is created by animating the width of the inner div from 0% to 70% of the outer div. To replicate this effect using a polygon shape, one would need to utilize clip-path instead of border-radius.

For instance, here is code showcasing how an arbitrary polygon can be used to wipe right with a contrasting background color:

<div>
<div class="outer"><div class="inner"></div></div>
</div>

CSS:

.outer { 
  margin-left:200px;
  background-color: lightgray;
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  -moz-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
}
.inner  {
  background-color: red;
  width :0;
  height: 300px;
  display: block;
}

jQuery:

$('.outer').click(function() {
    $('.inner').animate({width:"150px"}, 1800)
});

Check out this working fiddle for a live demo: https://jsfiddle.net/r93pocgt/

In my implementation, I've utilized jQuery's animate function to dynamically adjust the CSS property for the width upon clicking the outer div. This approach aims to simplify the process and clarify the functionality of the script.

What is the best way to transform this unfamiliar CSS element into JavaScript code?

Answer №1

Answer №2

Answer №3

Similar questions

Change this npm script into a gulp task

Troubleshooting Problems with Google Maps and Javascript/JSON in Internet Explorer

Changing array indices in JavaScript by splicing elements

Navigation Bar Search Box Alignment Problem

The error encountered is an unhandled rejection with a message stating "TypeError: Cannot access property 'username' of null

What is the best method for purging a previously stored variable from the cache when making an Ajax call and simultaneously passing a

Sending numerous parameters in a form

Incorporate custom JavaScript files that contain classes within a Vue component

skip every nth element in the array based on the specified value

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Is it possible to automatically access the most recent Beta build through package.json and npm?

The functionality of jquery ujs seems to be impaired when I try to load partials or content remotely using remote calls or

Swap out the HTML button element for text once the form is submitted

Saving Style Sheets in a Database

Converting an onclick event to onsubmit: Tips for doing it right

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

Create a duplicate of a div in jQuery while also updating its contents

Removing cookies after sending a beacon during the window unload event in Chrome

Dealing with Memory Issues in Google Apps Scripts