We Keep Coding

I have items arranged in a circle. How can I rotate the whole thing while keeping the inside elements upright?

Im using code based off of this demo (https://codepen.io/KittyGiraudel/pen/vEJXGm) in order to arrange a few items in a circle. I want create an animation to rotate the circle however keep the elements inside upright as it rotates.
So I thought I could use simple jQuery to do a css "transform: rotate()" and then use the same thing with a negative rotation on the elements inside, however because of the way the demo is set up, the inner elements are moved to the center of the whole circle when rotated.
$('.button').click(function() {
$('.box').animate(
{ deg: 72 },
{
duration: 1200,
step: function(now) {
$(this).css({ transform: 'rotate(' + now + 'deg)' });
}
}
);
});
Alternatively, is there a way to use jQuery to change the value of the "$rot" variable? I sass variables can't be accessed by js but maybe there is a workaround?

Since JS is not blocking, I would suggest to simply rotate your inner elements in the opposite direction of your main rotation. It would look something like this:
$('.button').click(function() {
$('.box').animate(
{ deg: 72 },
{
duration: 1200,
step: function(now) {
$(this).css({ transform: 'rotate(' + now + 'deg)' });
}
}
);
$('.box .inner').animate(
{ deg: -72 },
{
duration: 1200,
step: function(now) {
$(this).css({ transform: 'rotate(' + now + 'deg)' });
}
}
);
});
Using the codepen you submitted, I modified it a bit for you to see what would be the actual result.
https://codepen.io/Dvermette018/pen/podGmXR
Dave

Parallax Effect Adjustment for individual DIVs

I created a parallax effect, as it was described here:
Is there a way to make parallax work within a DIV
This method works pretty well, but I have a problem with it. My page is basically composed of alternating DIVs. White DIVs with text and DIVs with a picture in it, which moves with the parallax effect. This works pretty well, unless, that I have to manually adjust the position of each picture DIV. Here is the code from the header:
<script type="text/javascript">
$(window).scroll(function () {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 100;
$('#ff-section01').css('background-position', 'center ' + y + 'px');
$('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
$('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
$('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
}
</script>
As you can see, each section got another vertical position in the background-position value at the bottom. 0, 1000, 1700, 2750. This works well so far, but as soon as the intermediate Text DIVs change in height, this method doesn't work, as the value is always calculated from the top of the page. The HTML of one section looks like this:
<div class="ff-section03" id="ff-section03"></div>
So very simple, and combined with the CSS:
.ff-section03 {
width: 100%; height: 550px;
position: relative;
background: url('system/urbansolutions.jpg') center -300px no-repeat;
}
Also very simple. What can I do, that the calculations are not dependent of the page height? I basically don't want to subtract a superficial number from the background-position, so that the parallax effect works, not dependent of the location on the website.
Thanks a lot!
Sebastian

Animating Top and Bottom Position with jQuery

i'm trying to animate with jQuery.
http://jsfiddle.net/g8mQu/
$('#down').on("click", function() {
$('#inner').animate({ "top": "-=50px" }, "slow" );
});
That's my code pretty much and it works in this demo, but i'm trying to implement this into a Bootstrap framework site. The css is the same though, the wrapper is a container and the scrollable div is a col-xs div.
This should work fine but whenever I click a button it doesn't add 50 to the position but sets the position to 50 / -50 even though i'm using the "+=50" command.

try with
$('#down').on("click", function() {
var $inner = $('#inner');
$inner.animate({ "top": $inner.css("top") - 50 }, "slow" );
});

How to tweak jQuery animation for the element to stay in the middle?

I have a jQuery Mobile page and I want to animate the Save button on this page to lose half of its width/height and then to animate back to its original size.
function animateMe() {
var originalHeight = $("#btnSave").height();
var originalWidth = $("#btnSave").width();
$("#btnSave").animate(
{"height": originalHeight / 2, "width": originalWidth / 2},
{ duration: "fast" }
);
$("#btnSave").animate(
{"height": originalHeight, "width": originalWidth},
{ duration: "fast" }
);
}
The animation works fine, but I was hoping for the button to collapse its middle, instead it collapses to its top/left location (as one would expect).
How can I animate the button to collapse to its middle and then back?

This would be much better using CSS3 animation and the scale transform, instead of relying on jQuery's animate. Beside other advantages with using CSS3 animations for this, the performance should be much better.
Here's a rough example, just to give you an idea:
http://jsfiddle.net/ghinda/8nNeS/

You would have to add to the animation a position change, or padding change, that offsets the element's image as well.
$("#btnSave").animate({
"height": originalHeight / 2 + "px",
"width": originalWidth / 2 + "px",
"padding-left": (originalWidth / 2) + "px",
"padding-top": (originalHeight / 2) + "px",
}, {
duration: "fast"
});
Something similar to that, anyway.

integrate jquery ui slider with my existing script that zooms image

i implemented this javascript that let's you zoom in and out an image into a fixed width div with overflow hidden. i initially implemented it with two simple buttons (increase/decrease) that, onclick, would increase or decrease the width of the contained image.
what i would like to do now is to substitute the buttons with the vertical jquery ui slider but i don't how to do it.
here's my starting point: http://jsfiddle.net/omegaiori/QWfHE/embedded/result/
basically the zoom in/out properties are obtained by this code:
function zoomIn() {
var imgElem = jQuery(".image");
width = width*1.1;
height = height*1.1;
imgElem.css({"width": width + "px", "height": height + "px"});
imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}
function zoomOut() {
var imgElem = jQuery(".image");
width = width/1.1;
height = height/1.1;
imgElem.css({"width": width + "px", "height": height + "px"});
imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}
can anybody help?? that would be so cool :)
thanks in advance

http://jsfiddle.net/bhilleli/QWfHE/1/
Your example was almost there. Just use this as your slide function:
slide: function( event, ui ) {
var prevVal=$( "#amount" ).val();
var newVal=ui.value;
if (prevVal>newVal) {
zoomOut();
} else {
zoomIn();
}
$( "#amount" ).val( ui.value );
}