Rotate an element according a scroll position


i write a code that element an image according the scroll direction. if i scroll down the image will rotate clockwise and if i scroll up it will rotate counter clockwise.

It is working but my question is what is the +i+ in the code and why it doesn’t work when i write i+red. i is a number that changes all the time. what is the +i+ and why it works only when i use quotations around it, it is a variable why it needs quotations?

’ rotate(’+i+‘rad)’

hope i’m understood (:slight_smile:

this is the full code

var i = 0;
var lpos = -1;
		$(document).on("scroll", function() {
		var dis = $(window).scrollTop();
		if (dis > lpos) {
		i = i - 0.05;
		lpos = dis;
		$("img#pic1").css({transform : ' rotate('+i+'rad)',transition: 'all 0.05s'});

You will notice this is just a concatenation of a 3 things:
The first is a string rotate(
The second is the value of i
The last is the string rad

The transform property value must be a string, so that is why it must be concatenated in order to have the correct value for it.

hey Randell thanks for the reply!

If i is a number and a variable why i concatenate it to become a string when i use quotations around it? and what is the double +. I never used double plus before to concatenate

if i will use a number like 50rad it will work. and 50 is a number not a string

You can use the + operator as many times as you want.

var mySting = "Hello, " + "my name " + "is " + "Randell"

When you concatenate a string and a number, the result is a string.

and why we use a plus before and after the i?


if the value of i will be 50, so basically what i write is '+50+'rad

I already explained this above. You are concatenating the two strings before and after the i to create a final string.

If the value of I is 50, it would be the equivalent of writing '+50+'rad

Hey Randell,

Thanks again for your patience and taking the time answering my questions (:slight_smile:

I still don’t understand what is the use of writing + before and after the variable i:

i know when concatenating, we use + after the quotations like this:

var mySting = "Hello, " + "my name " + "is " + "Randell"

or when we have a variable, to use it like this:

var num = 50;

var new_num = num + "px";

Just think of the variable i as if it were a string, because in the following code, it will become part of a string once it is concatenated with the other strings:

var years = 2.5;
var myString = "Hello, my name is Randell. I started with Free Code Camp almost " + years + " ago.";

In the above code, years is the same as the variable i in your code.

but Randell it is not like your example with years.

in my case the + sign is in the quotations (’+i+’). and i don’t understand why?

It is exactly like it. Mine uses double quotes and your code has single quotes. The first string in single quotes is:

' rotate('



then the last string in single quotes

1 Like