Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property to function in the same way. Can anyone point out where I might have made a mistake? Below is the code snippet with the left movement working correctly but the transform not:

function parallax(){
    var scrolled = $(window).scrollTop();    
    $('.ball').css('left', (scrolled * 0.9) + 'px');
    $('.ball').css('transform', rotate(scrolled * 180) + 'deg');
}
$(window).scroll(function(e){
    parallax();
});

Your help and insights are greatly appreciated! Sincerely, Shir

jquerycssjquery-animatecss-animationsscrolltop

Answer №1

jQuery struggles with properly supporting the transform property.

If you want to rotate elements, I recommend utilizing the jQuery rotate plugin.

https://code.google.com/p/jqueryrotate/

It's straightforward to use, with syntax similar to this:

$('.circle').rotate(angle)

Answer №2

Give this a shot. Hopefully, it will be beneficial.

Here is the jQuery code:

$('.ball').toggleClass("rotate-180");

And here is the corresponding CSS:

.rotate-180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the value is blank, do not include the class attribute when appending

http://jsbin.com/guvixara/1/edit I have a situation where I am dynamically inserting a button... $(".confirm-add-button").on("click", function() { var $ctrl = $('<button/>').attr({ class: $('.newbtnclassname').val()}).html($(& ...

javascriptjquery

Difficulty in breaking text within flexbox styling

I'm facing an issue where the text inside a flex container does not break correctly when the horizontal space is too small to display it all. But shouldn't it still not break even in the "normal" state? What mistake have I made here? (functio ...

htmlcssflexbox

What is the process for updating the CSS style of every other piece of data (such as an image) retrieved

Is it possible to utilize PHP code when retrieving data from a MySQL database in order to have every other record display with unique CSS formatting? For instance, I am incorporating images similar to this in my comment system: http://prntscr.com/3hpiep ...

phphtmlmysqlcss

Issue with Google Maps Marker Being Strangely Stretched

I have come across an odd issue with Google Maps (as shown in the attached image). Does anyone have any insight into why this might be happening? Has anyone else encountered this before? Check out the code snippet below: <script> <!-- var ...

jquerygoogle-maps-api-3

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components

The Javascript function is designed to function exclusively with onclick events or setTimeout functions

I am currently working on a website that I want to be responsive to the window size. However, I am facing an issue with vertical alignment. I have created a jQuery function to handle this, and it works well for divs with images but not so well for a div wi ...

javascriptjqueryhtmlwebraphael

Adjust the size of the response object in real-time using JQuery after the content has been loaded

Currently, I am utilizing the jquery method .html() to retrieve external content in the form of another page within the same domain. The returned content is encapsulated within a specific div element which all works well initially. However, my issue lies i ...

jquerysizeresponse

Tips for creating a hierarchical multilevel datatable with JavaScript

I am currently working on implementing a multi-level datatable without relying on any external plugins or libraries. My goal is to achieve this using pure JavaScript, JQuery, or AngularJS. I have explored the following resources: Traverse all the Nodes of ...

javascriptjqueryangularjsdatatableshierarchy

Get the page downloaded before displaying or animating the content

Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...

javascriptjqueryhtmlanimationbrowser

DANGEROUS EVALUATION: Tips for Safe Replacement

Looking for a safer alternative to the code below which utilizes eval. The script creates pop-up windows based on different classes. /* exported popup_default , popup_help , popup_sitemap , popup_footerlinks */ var matchClass = ['popup_default' ...

javascriptjqueryeval

organizing arrays with the structure name:url

I have a list of string URLs like "http://dom/image1.jpg","http://dom/image2.jpg" that I obtained from an API which returns only the links. However, the plugin I am using requires the array to be in a specific format: {image:"http://dom/image1.jpg"},{imag ...

javascriptjquery

Steps for populating a dropdown list with a JSON response

I'm facing a challenge in inserting server data into a dropdown list because each object name begins with a random ID. Here's what I'm attempting to achieve here: $("#CampaignOpenActionSubscriber_campaign_id").change(function() { var el ...

javascriptjqueryjson

Setting an if isset statement below can be achieved by checking if the variable

I have included a javascript function below that is designed to display specific messages once a file finishes uploading: function stopImageUpload(success){ var imagename = <?php echo json_encode($imagename); ?>; var result = '& ...

phpjavascriptjqueryajax

Personalized directive for HTTP validation, display dialog box upon detection of incomplete match

Looking to validate input against a server-side REST API and provide options for selection if invalid while typing. Already implemented in jQuery, now looking to implement in AngularJS. Would it be better as a custom directive or functions in the controll ...

jqueryangularjs

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground

How can we combine Angular Gradients and CSS Webkit Gradients for a modern design

Can a gradient be created that resembles the color picker style shown here? The outer part showing full saturated, 50% brightness values and transitioning towards the inside to 100% brightness. https://i.sstatic.net/ohuF4.jpg ...

csscolorsgradientcolor-picker

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

jquerycssbackground

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Creating Responsive Headers Using CSS for Mobile Devices

I'm looking to make my header font size of 60px more responsive for mobile devices so that the text doesn't get cut off. Any suggestions on how to achieve this? Thank you! Here's the code snippet: h1 { font-size: 4.286em; /* 60px */ margi ...

css

Tips for achieving JSON formatting with JavaScript or jQuery

To achieve the desired output format, I am required to transform the provided input json. input json: [ { "key a": "value alpha" "key b": "value beta" "key c": "value gamma& ...

javascriptjqueryjson