Member Avatar for Latrell_vie

Hello ! I want to improve my website. Currently I'm using a circular Logo. Now i want to change that logo to a spinning ball with the logo on it. How can i achieve this.

What software/programm should i use ?

I haven't found any javascript and jquery code that gets the job done. I found an adobe flash cs6 tutorial that would serve me right but that would mean my logo woun't run on apple devices from what i understand.
Are there any html5 plugins or whatever for my idea ? Help !

  • 6 Contributors
  • 6 Replies
  • 313 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kelly Burby

Dani AI

Generated

Short, practical guide (pick one by need and budget)

  • Quick and fully compatible: pre-render the sphere as an optimized animation (PNG sequence → APNG/WebP or a small MP4) and drop that on the page. This is the fastest route if you don’t need interactivity or true 3D lighting. Export your logo as a high‑resolution PNG, wrap it as a texture in a 3D tool (Blender/Photoshop 3D), render a 24–30 fps sequence at the target pixel size (keep the final diameter modest — 200–400px) and optimize the output (reduce colors/dither for GIF, or use WebP/MP4 for much smaller files).

  • True 3D, modern browsers: use a WebGL library (Three.js) and map your logo as a texture to a sphere. This gives proper wrap, lighting and smooth animation while keeping client CPU/GPU usage reasonable. Important tips: use a single PNG with transparency for the logo, keep texture sizes to power-of-two (512 or 1024), add simple lighting (Hemisphere or Directional) and throttle geometry (32–64 segments). Use requestAnimationFrame and respect devicePixelRatio.

Example minimal Three.js pattern:

const w=400,h=400;
const scene=new THREE.Scene();
const cam=new THREE.PerspectiveCamera(60,w/h,0.1,1000);
const rnd=new THREE.WebGLRenderer({antialias:true,alpha:true});
rnd.setSize(w,h); document.body.appendChild(rnd.domElement);

const tex=new THREE.TextureLoader().load('logo.png');
const mat=new THREE.MeshStandardMaterial({map:tex});
const geo=new THREE.SphereGeometry(1,48,48);
const ball=new THREE.Mesh(geo,mat);
scene.add(ball);
cam.position.z=3; scene.add(new THREE.HemisphereLight(0xffffff,0x444444,1));

(function anim(){ requestAnimationFrame(anim); ball.rotation.y += 0.01; rnd.render(scene,cam); })();
  • Lightweight CSS fallback: for a simple “spinning coin” effect use CSS transforms and hardware acceleration. Always include a static image fallback and honor reduced‑motion for accessibility:
    .mylogo{width:160px;height:160px;border-radius:50%;
background:center/cover no-repeat url('logo.png');
animation:spin 2s linear infinite; will-change:transform;}
@keyframes spin{to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){ .mylogo{animation:none} }

Tiebacks and practical notes: and were right that pre-rendering is the simplest; ’s caution about Flash is valid — avoid Flash entirely. If you go WebGL, add a small static PNG fallback for older browsers and test battery/CPU use on phones.

Recommended Answers

All 6 Replies

Member Avatar for rtrethewey

The easiest method is to create an animated GIF image. You'll find lots of tools and tutorials online to help you.

The alternative would be to use JavaScript to control the CSS property transform with 'transform.Rotate()' to do the animation, but it won't work on IE 8 and earlier.

Member Avatar for Latrell_vie

okay lots of thx for your help #rtrethewey Does anybody has further tips ?

Member Avatar for Member #120589

DO not use flash. If you have images or an example of what you want, that would help. Check your user stats for IE8- usage. Perhaps transform.rotate could work for you. There aren't any easy shivs / polyfills for rotate AFAIK.

Member Avatar for mattster

3D in photoshop to create an animated GIF would probably be easiest - I can't think of any other way without using CSS transformations, but to be fair, if your users are still using IE8 than they're already doomed.

Maybe suggest they upgrade, or have a static IE8 fallback alternative?

Edited by mattster
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.