I am looking to implement a unique feature on my website where I create scales with a balancing effect. The scales should mimic an up and down motion continuously. You can see an example of what I'm referring to here
Is there a way in jQuery or CSS to achieve this kind of effect on an element?
If you're seeking a solution, CSS Transform is likely what you need. Check out this link for more information.
The rotate property in CSS Transform allows you to adjust the top piece for your desired effects.
Click here to experiment with rotation effects using CSS Transform.
Check out this JS Fiddle I created to help address your query.
$(document).ready(function(){
var leftSize = $('#left-box').height() * $('#left-box').width();
var rightSize = $('#right-box').height() * $('#right-box').width();
if (rightSize >= leftSize) {
var rotatePercent = 1 - (leftSize / rightSize);
var Deg = (rotatePercent * 20);
$('#scale-top').css({
transform: 'rotate(' + Deg + 'deg)',
})
} else if (leftSize > rightSize) {
var rotatePercent = 1 - (rightSize / leftSize);
var Deg = (rotatePercent * 20);
$('#scale-top').css({
transform: 'rotate(-' + Deg + 'deg)',
})
} else if (leftSize === rightSize ) {
$('#scale-top').css({
transform: 'rotate(0deg)',
})
}
});
This script essentially calculates the area of each div, determines the size difference between them, and applies a corresponding rotation based on the calculation mentioned above.
Purely using CSS:
Here is the keyframe animation:
@keyframes rotate-box{
from {transform: scale(0.5);}
to{transform: scale(1.5);}
}
applied to a large rectangular box:
animation: rotate-box 6s infinite alternate;
Tested in Chrome: https://jsfiddle.net/7asdmzej/
I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...
As a newcomer to this field, I am currently exploring ways to access Wikipedia's API for extracting the value of "extract" and adding it to an HTML element dynamically. The challenge lies in the fact that the information is subject to change based on ...
Is there any game library that can accomplish this task? I believe jQuery may also be able to achieve this, is that correct? Thank you ...
I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...
I am currently troubleshooting an issue with my demo. I am having trouble retrieving the correct index number of .carousel-item.active. Even when the second slide is displayed, I continue to receive the index of the first slide. var totalItems = $(&apos ...
After searching through numerous websites, I have yet to find the ideal horizontal news scroller for my website. My specific requirements include: Must provide a smooth scrolling experience Scroll from right to left covering 100% width of the browser ...
Can anyone provide suggestions on how to select multiple objects on a canvas with a mouse click? I only want to select objects that overlay the point. From my understanding, the target of the mouse event is always the top-most object. I have tried binding ...
Within my script, I have a list controller defined as follows: define([ 'jquery', 'app' ], function ($,app) { app.controller("ListContacts", function($scope,$route,$http){ $http({ method: 'GET&apo ...
I am receiving JSON data from a source [{"Title":"Gross Wages","Last":"$40,000","MTD":"$40,000","QTD":"$40,000","YTD":"$40,000"}, {"Title":"Total Taxes","Last":"$50,000","MTD":"$50,000","QTD":"$50,000","YTD":"$50,000"}, {"Title":"Total Benefits","Last":"$ ...
For my class assignment, I'm developing a webapp and want to implement a login system with only a username. However, when I try sending just the username to the database, it gets stored as a child under the connection ID in Firebase. Below is the Java ...
Within my web project, there is a scenario where if a user has been logged out in one browser tab, they will automatically be redirected to the login page in any other browser tab after interacting with that page (such as clicking on a link). However, this ...
Can anyone help clarify the relationship between CSS pixels and CSS points in modern web design? I've come across information stating that one CSS point is equivalent to 3/4 of a pixel. Is this accurate? Also, is it true that we can disregard the old ...
It's possible that this question has been asked before on this platform. However, I haven't come across a satisfactory answer yet. How can I adjust the size of inputs in the iCheck library? The current size is too large for my website. Css: .ic ...
Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...
I'm currently using WordPress to build my website. If you'd like to take a look, here is the link: I'm trying to make the font size smaller to accommodate more menu bars on the site. Any suggestions on how I can achieve this would be great ...
While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...
I'm having trouble with my graph editor that uses the rangeslider.js plugin. The bars are not updating properly most of the time, and sometimes they don't work at all. I have a demo available here and a simplified version on Fiddle. Strangely, so ...
As I work on building my portfolio website from scratch, I came across a CSS framework known as "960.gs". While I have experience with similar tools, this is my first time delving into a pure CSS framework, so I'm feeling a bit out of practice. Here ...
Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...
I want to create a design where the text flows outside of the image and continues into another container. After some trial and error, I managed to achieve a layout where the text seamlessly extends beyond the image and into a separate section. Ideally, the ...