Looking for Dawn theme editor who can change appearance of my website with additional moving icons

JadeEFung
Visitor
1 0 0

Hey! I'm looking for someone who can help make my website appear more profesional and more fun. I love the idea of moving icons. I really like this website for inspiration https://bubbleteaclub.com.au/ If anyone can help me please get in touch. I currently use Dawn theme.

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Hi @JadeEFung 

Please go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <body> tag 

<img id="follower" loading="eager" width="50" height="auto" src="https://cdn.shopify.com/s/files/1/0269/9254/1757/files/BBT_Bob_Icon_52272c5b-0629-420e-a938-82b7266cb12a.png?v=1696813178" alt="Cartoon pufferfish" style="position: absolute; pointer-events: none; z-index: 9999;">
    <script>
const follower = document.getElementById('follower');

let mouseX = 0, mouseY = 0, lastMouseX = 0; // Added lastMouseX to track the previous mouse X position
let followX = 0, followY = 0; // Follower position

// Mouse move event to update mouse position
document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    
    // Determine the direction of mouse movement
    if (mouseX > lastMouseX) {
        // Moving right
        follower.style.transform = `scaleX(-1)`; // Flipped orientation
    } else if (mouseX < lastMouseX) {
        // Moving left
        follower.style.transform = `scaleX(1)`; // Normal orientation
    }

    // Update lastMouseX for the next mousemove event
    lastMouseX = mouseX;
});

// Function to update follower position with some delay
const animate = () => {
    // Calculate the distance to move the follower
    const dx = mouseX + window.scrollX - followX;
    const dy = mouseY + window.scrollY - followY;

    // Move the follower a fraction of the distance to the cursor
    followX += dx / 40; // Adjust the divider to control the speed
    followY += dy / 40;

    // Apply the position to the follower element. Removed transform scale as it is being handled in the mousemove event.
    follower.style.left = `${followX}px`;
    follower.style.top = `${followY}px`;

    // Continue the animation
    requestAnimationFrame(animate);
};

// Start the animation
animate();
</script>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now