Positioning of element with JS transform properties (CSS get's overwritten by JS)

Question

I'm trying to position two images on top of eachother, and having one of them rotate on scroll while the other one is not rotating - which works, except i'm unable to position and scale my elements in my CSS. As soon as i start scrolling, the image with the JS jumps into the corner while the other one remains where it is. I believe it's because my JS overwrites my CSS properties, but is there any way of working around this? Can i position my two elements while maintaining my JS?

var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});

body {
  height: 200vh;
  background: darkblue;
}

.guide {
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

<div class="guide" style="position:relative">
    <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
    <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>

I'v created a running Stack Snippet. Feel free to edit if anything is wrong. — StackByMe
– StackByMe, Commented Oct 13, 2021 at 11:09

Zain · Accepted Answer · 2021-10-13 11:19:33Z

3

Remove translate from your code.

var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `rotate(${value}deg)`; 
});

body {
  height: 200vh;
  background: darkblue;
}

.guide {
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

<div class="guide" style="position:relative">
    <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
    <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>

answered Oct 13, 2021 at 11:19

Zain

3423 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

luroc · Accepted Answer · 2021-10-13 11:18:30Z

1

I am not sure what you want to achieve by usingtranslatex(-50%) translatey(-50%), but this is causing the images center to be positioned on the top left corner of the parent element. If you just use elem.style.transform = `rotate(${value}deg)`; it will rotate in place.

answered Oct 13, 2021 at 11:18

luroc

1831 silver badge8 bronze badges

Collectives™ on Stack Overflow

Positioning of element with JS transform properties (CSS get's overwritten by JS)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related