How can I make my logo spin?

ferverco
Visitor
1 0 0

for reference: petalsandpeacocks.com

 

I already have the code thanks to google gemini.

 

// Get a reference to the logo element
const logo = document.getElementById("logo");

// Function to handle the scroll event and rotate the logo
function handleScroll() {
  // Get the current scroll position
  const scrollPosition = window.pageYOffset;

  // Get the total document height and viewport height
  const docHeight = document.documentElement.scrollHeight;
  const viewportHeight = window.innerHeight;

  // Calculate the rotation angle based on scroll position
  const rotationAngle = (scrollPosition / (docHeight - viewportHeight)) * 360;

  // Apply the rotation transformation to the logo
  logo.style.transform = `rotate(${rotationAngle}deg)`;
}

// Add a scroll event listener to the window
window.addEventListener("scroll", handleScroll);

 

This method involves editing your Shopify theme files directly. Here's how to do it:

  • Access Theme Code: Go to your Shopify admin panel, navigate to Online Store > Themes. Click Customize on your chosen theme.
  • Locate Template: In the theme editor, click on Actions > Edit code. Locate the template file responsible for your website header section (usually header.liquid or a similar name).
  • Add Script Tag: Find the closing </body> tag in the template code. Just before this tag, paste the following code snippet:
<script>
  // Paste your JavaScript code for the spinning logo here
</script>

 

So now I just need to be able to give my logo element a unique ID but this is where I get stuck.

 

Any help is much appreciated

Reply 1 (1)

EBOOST
Shopify Partner
870 235 263

Hi @ferverco,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Sections/header.liquid

3. find "header__heading-logo motion-reduce"

4. Add "id: 'logo'," likes the screenshot below

 

EBOOST_0-1713947369845.png

 

If petalsandpeacocks.com is your store. You only need replace code

From

const logo = document.getElementById("logo");

To

const logo = document.getElementById("rotate3D");

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤