CODEWITHSUNDEEP
jqueryhtmlcss-animationscss
user3079986
user3079986

Reputation: 1

CSS3-Animations - infinite rotate high-res image, box-shadow pulsing glow

UPDATE

Now tested some other solutions and created a fiddle. The Code in this Fiddle is correct but the animations can´t be displayed for some browsers. However now everyone can see my performance killer live. =D I hope this helps to find a better solution for creating this animation!

Click here

After hours of testing alternatives I can´t increase my performance in Firefox 25 or Internet Explorer 10.(Chrome currently uses 15% of i7-CPU) In my project I have a fluid div-Container which resizes on the current display-resolution. This div-Container have rounded borders (50%) and shows up as a circle (not perfectly but this is another bug?!). In this div-Container I have a high-res image (2880px*2880px) which resizes with the height and width of the div-Container. The div-Container rotates infinite and also have a glowing pulse-effect around it. The glowing pulse-effect (box-shadow) changes the color and width and also shows up as a circle around the fluid div-Container.

I tried to rebuild these effects with flash, jquery and GIF-Images. Flash also have performance issues with this high resolution. jQuery have low FPS and don´t looks nice. GIF-Images with this resolution gets to big.

Now heres an example:

HTML-Markup

<div id="disk">
   <div id="pulse"></div>
</div>

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
 function upd() {
  var h = $("body").height();
  $("#disk").height(h / 1.5);
  $("#disk").width(h / 1.5);
            }
  upd();
  window.onresize = upd;
});//]]>
</script>

CSS-Markup

#disk {
  border-radius: 50%;
  background-image: url(hires.png);
  background-size: 100% 100%;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  position: absolute;
  animation: rotate 5s infinite linear;
  transform: translateZ(0);
}
@keyframes rotate {
  0% {   transform: rotateZ(0);}
  100% {  transform: rotateZ(359deg); }
}
#pulse {
  position: absolute;
  border-radius: 50%;
  animation: pulse 60s infinite linear;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  transform: translateZ(0);
}
@keyframes pulse {
  0%  { box-shadow: 0 0 50px rgba(255,255,555,0.9); } 
  5%  { box-shadow: 0 0 200px rgba(255, 0, 0,0.9); }
  10% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  15% { box-shadow: 0 0 200px rgba(255, 255, 127,0.9); }
  20% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  25% { box-shadow: 0 0 200px rgba(255, 255, 0,0.9); }
  30% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  35% { box-shadow: 0 0 200px rgba(103, 255, 190,0.9); }
  40% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  45% { box-shadow: 0 0 200px rgba(0, 255, 0,0.9); }
  50% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  55% { box-shadow: 0 0 200px rgba(0, 0, 255,0.9); }
  60% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  65% { box-shadow: 0 0 200px rgba(75, 0, 130,0.9); }
  70% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  75% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  80% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  85% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  90% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  95% { box-shadow: 0 0 200px rgba(0,0,0,0.9); }
 100% { box-shadow: 0 0 50px rgba(255,255,555,0.9); }
}

I know box-shadow animations are performance killers. But currently I can´t work out another solution for my project. The rotation of fluid div-Container uses 5% of my i7-CPU in Chrome and thats much. (without pulse-effect) Maybe I can delete some of the box-shadow keyframes and minimize the amount of this animation. But I want to get my effects to work without performance issues in original conditions.

I hope someone can help me. If needed I can create an example for you. Thanks for your attention.

Upvotes: 0

Views: 1278

Answers (1)

Deryck
Deryck

Reputation: 7658

You might be the first person I've come across that could benefit from this but that makes me so happy.

Pure Javascript is way faster than jQuery. The link below benchmarks using native properties .outerHeight/.outerWidth vs. jQuery .height()/.width() methods and shows how much native improves when the objects are cached first.

JS Perf Benchmark

Given the amount of processing your app is demanding, this might increase your FPS significantly.

Or my computer is just amazing and hates jQuery. Who knows. Happy testing :)

Upvotes: 1

Related Questions