I was looking into how to make a parralax scroll effect using Javascript, and i came across a syntax that I haven’t come across before.
Instead of typing in a number value and unit on any css rule, you can substitute with the number value of a variable by typing in the syntax ‘“+[variableName]+”’. This opens up for CSS that change at runtime.
Does anyone know where can I find information on how to use this powerfull feature, and what the drawbacks might be?
Can you provide an example of a use case so that I may understand what you are trying to achieve and what this would solve?
Thanks
Hey Deeess
Yes!
I found the tutorial video i was following. See this timestamp youtube link. He is using those plus’es. I think i can get it to work, but my goal is just to develop a deeper understanding of this syntax, so i can find out when it is good practice to use it, and when to look for other approaches. For example, it might not work in all browsers, or it might create jaggy animations, or tend to create issues with other functions etc… I haven’t come across it before, so i guess it is rarely used, but then again i am still new to coding.
That is just joining strings in JS using +
(With es6 you can do that using string interpolation)
Ahaa! Now i get it!
So back in the days people used string concatentation with the plus operator to change strings. But after ES6, it is concidered a better practice to use the new syntax for string interpolation; ${variableName}, as it is easier to read and uses less code. (read source, paragraph 4.1).
I was beginning to think that the first plus was converting the variable to a number, and the second one was adding it to the unit, but it turns out that wasn’t the case.
Thank you for making me understand.