# Rotate an element according a scroll position

hello

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?

hope i’m understood ( 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;

}
else{
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 ( 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

``````i
``````

then the last string in single quotes

``````'rad)'
``````
1 Like