I have reached a technical and intellectual roadblock. The issue at hand is this: I need the text to encircle an image and create the illusion that it is moving in front of or behind the image, while keeping the image static.
Currently, 1) the rotating text is nested inside a div called "loader." 2) Each letter has its own div for proper rotation and degrees adjustment. And 3) the animation rotates all the letters to give the appearance of encircling. However, I want the last div within the overall structure to remain stationary.
Here is the code:
body {
background-color: #333;
}
/* Remaining CSS code */
<div class="preloader">
<div class="preloader__ring">
<div class="preloader__sector"></div>
<!-- More sector divs -->
</div>
<div class="phone_static">
<img src="https://github.com/Jitlclarke/ux_portfolio/blob/main/images/small_version_mockup.png?raw=true" alt="" height=560 width=300>
</div>
</div>This is what it currently looks like after following some unsuccessful attempts:
- I tried putting the text inside a div and using position:fixed on the class, as well as creating an animation with deg going in the opposite direction for an extended duration, but without success.
So far, I have only managed to rotate the "phone_static" div in the opposite direction but haven't been able to stop it.