0
{{#css:
body{ 
-moz-transform:rotate(2.0deg); 
-webkit-transform:rotate(2.0deg); 
transform:rotate(2.0deg);

}}

I've got this piece of code here and am trying to rotate a page on a site which uses the Wikimedia Software. Here is an exaple of the above codesnippet used to slightly rotate the view: https://nonciclopedia.org/wiki/Torre_di_Pisa. My question is: is it possible to rotate the page according to your mousescroll? And if yes, how? I have no clue about CSS and couldn't find any helpful information previously posted.

Lorem Ipsum1729
  • 1
  • 2

1 Answers1

0

You can achieve this, but you still need JS to set scroll position. You can save it as a global variable. Then there is a little trick to handle it with css - you have create an infinite animation set on pause and change delay instead:

window.addEventListener(
  "scroll",
  () => {
    document.body.style.setProperty(
      "--scroll",
      window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
    );
  },
  false
);
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 500vh;
}
div {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}


code {
  font-size: 40px;
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  /* w/o these two rows there are might be some artifacts */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
<div><code>+</code></div>

I think, I've seen it on css-tricks for the first time, but there is a restricted access currently. Still, the link might be useful: https://css-tricks.com/books/greatest-css-tricks/scroll-animation/

extempl
  • 2,987
  • 1
  • 26
  • 38
  • This question might be pretty stupid: so, I see a javascript, a CSS and a HTML "file", correct? do I just insert them into the page? do I have to save them somewhere? – Lorem Ipsum1729 May 26 '21 at 18:42
  • This is just an example of animating something with css (rotation actually) based on scroll position. I am not sure how to put it to the wikimedia, but if you can edit css, it is probably possible to add an event handler as well. – extempl May 26 '21 at 18:48
  • ok so I realized jacascript can be "inserted" into HTML using `` but can I put that into the CSS? where does the HTML belong? – Lorem Ipsum1729 May 26 '21 at 19:12
  • You can't. And you don't need the html from my example to get what you need. Unfortunately, it looks like you missing some basic knowledge. And this is not the right place where you can get someone who could completely solve your issue, sorry. – extempl May 27 '21 at 03:07