0

I want to rotate element(clockwise on downscroll & anti-clockwise on upscroll) while scrolling the page. For that i use javascript code.But it's not working in angular.I just use the CDN links in index.html.Javascript code is not working in angular.Want to rotate starburst in top right corner

Html File:

<div class="starburst discount" id="star">
   <span>17%</span>
 </div>

My Javascript File is:

<script> 
var star = document.getElementById("star");
window.addEventListener("scroll", function() {
star.style.transform = "rotate("+window.pageYOffset+"deg)";
</script>

Is there any other way to achieve the element rotate in Angular?Can anyone help with this?Thanks in Advance..

Arthi
  • 107
  • 1
  • 2
  • 13

2 Answers2

2

Here is a working example of how to handle window scroll event in angular: https://stackblitz.com/edit/angular-3z533s. I have used HostListener to bind event handler to window scoll event. Refer: HostListener

NiK648
  • 1,484
  • 1
  • 9
  • 18
  • It's working.. But the problem is am displaying multiple products as in the above figure. The first element is alone rotate while scrolling rest of the list doesn't rotate. – Arthi Jul 19 '18 at 11:14
  • How can i achieve this for all starbursts in all products? – Arthi Jul 19 '18 at 11:20
  • This will help you: https://stackoverflow.com/questions/43376081/angular2-retrieve-all-elements-with-class-name – NiK648 Jul 19 '18 at 11:39
  • U r just amazing..I had been searching for this since morning..Thanks its working.. – Arthi Jul 19 '18 at 11:52
  • Happy to help:-) – NiK648 Jul 19 '18 at 12:05
  • I want the content inside starburst remains constant while the starbursts are rotating.I had created h5 tag inside span and gave the content inside it and make its position fixed..But still the content also rotating how can i fix this? – Arthi Jul 20 '18 at 08:50
  • can u help me with the issue? – Arthi Jul 20 '18 at 09:38
  • How are you showing that star background? Using `background-image` or using `img`? – NiK648 Jul 20 '18 at 10:45
  • No its in css file – Arthi Jul 20 '18 at 10:55
  • .starburst { background: #00c851; width: 100%; height: 100%; text-align: center; color: #fff; z-index:999; } .starburst, .starburst span { display: flex; align-items: center; justify-content: center; } .starburst span { width: 100%; height: 100%; background: inherit; transform: rotate(45deg); } .starburst:before, .starburst:after , .starburst span:before, .starburst span:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; z-index: -1; transform: rotate(30deg); } – Arthi Jul 20 '18 at 10:59
  • .starburst:after { transform: rotate(-30deg); } .starburst span:after { transform: rotate(30deg); } .starburst span:before { transform: rotate(-30deg); } .discount { position: absolute; top: 0%; height: 30px; width: 30px; margin-top: 0.4em; margin-left: -1.5em; } #star { left: 95%; transform: rotate(-45deg); } – Arthi Jul 20 '18 at 11:00
  • Is `17%` the only element inside the `div`? – NiK648 Jul 20 '18 at 11:10
  • 17%
     .Percent{ font-weight: 500; position: fixed; }     – Arthi Jul 20 '18 at 11:12
  • Add `element.getElementsByTagName("span")[0].style.transform = "rotate(" + -window.pageYOffset + "deg)";` after `element.style.transform = "rotate(" + window.pageYOffset + "deg)";`. Revert `
    17%
    ` to the old one.     – NiK648 Jul 20 '18 at 11:16
  • Actually am hardcoded the discount price now and i will dynamically bind with the value getting from server in future. Will this work for that too? – Arthi Jul 20 '18 at 11:18
  • It will. Unless you change the html structure. Updated code: https://stackblitz.com/edit/angular-rpd5hs – NiK648 Jul 20 '18 at 11:21
  • Its work..But why the starburst shape becomes irregular while rotating? – Arthi Jul 20 '18 at 11:42
  • I think some parts of the starburst itself also remains stable while scrolling that's why its shape become irregular while scrolling..Did you notice this? – Arthi Jul 20 '18 at 11:48
  • I did. Seems to be an issue with how you created that star background. Try to fix it yourself. I have spoiled you enough already. – NiK648 Jul 20 '18 at 11:58
0

You can use angularjs Directive for DOM Manipulation Angular Directive

Pankaj Kachhwaye
  • 69
  • 1
  • 5