Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member
    Join Date
    Dec 2013
    Posts
    120
    Member #
    37915
    Liked
    2 times

    Rotating Circular Images

    Hi, I am trying to create 5 circular images that would rotate around one larger, central circular image.

    I'd like the rotation to stop if the cursor is hovered over any image, and have all images linkable to other pages.

    I have 2 partial solutions:

    Move element in a circle path - JSFiddle and
    http://codepen.io/chipower/pen/mysdh

    Does anyone know how to make this happen?
    Last edited by pranaman; Jun 05th, 2014 at 01:57 AM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Are you not able to implement the ones you linked to?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Dec 2013
    Posts
    120
    Member #
    37915
    Liked
    2 times
    the static images use jpgs, but do not spin

    the spinning example doesn't use jpgs. When I add them, they show up rectangular or square. I can't seem to get that 'circle effect' the codepen one has.
    Last edited by pranaman; Jun 05th, 2014 at 12:18 PM.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by pranaman View Post
    the static images use jpgs, but do not spin

    the spinning example doesn't use jpgs. When I add them, they show up rectangular or square. I can't seem to get that 'circle effect' the codepen one has.
    Thats because a jpg wont have a transparent background. You need to use something like a png and make sure there is no background. Just the circular image you want.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  6. #5
    Junior Member
    Join Date
    Apr 2012
    Posts
    8
    Member #
    31392
    some links are not working

  7. #6
    Senior Member
    Join Date
    Dec 2013
    Posts
    120
    Member #
    37915
    Liked
    2 times
    I hired someone to do it. he got it working, however,

    it 'jumps' and won't click on first hover
    looks choppy in Firefox
    jumps also in IE

    he doesn't know how to fix it. It may be the theme I suspect.

    Anyone know how to fix that?

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    2D CSS transforms are pretty resource intensive, especially when animated, because they don't utilize the GPU. Try redoing it using 3D transforms and see if that doesn't work better.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com