Ajax Loader
HTML 
<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
1
<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
2
<!-- Sadly for javascript purposes we need a div within innerGif (CSS animation version doesn't need this, it can use a pseudo-element instead) -->
3
<body>
4
<!-- CSS animation -->
5
<div class='outerGif cssAnim'>
6
  <div class='innerGif'><div class='image'></div></div>
7
  <div class='overlay'><div class='image'></div></div>
8
</div>
9
 
10
<!-- With JS interaction. This is interesting when made full page -->
11
<div class='outerGif jsFollow'>
12
  <div class='innerGif'><div class='image'></div></div>
13
  <div class='overlay'><div class='image'></div></div>
14
</div>
15
</body>
16
 
17
 
18
 
19
 
20
<head>
21
<script type="text/javascript">
22
window.onload=function(){
23
var outerGifs = document.querySelectorAll('.jsFollow'),
24
    innerGifs = document.querySelectorAll('.jsFollow > .innerGif'),
25
    innerGifImages = document.querySelectorAll('.jsFollow > .innerGif > .image');
26
window.onmousemove = rotateElems;
27
function rotateElems(e) {
28
  var mouseX = e.pageX,
29
      mouseY = e.pageY;
30
  for(var i=0; i < innerGifs.length; i++) {
31
    var outerGif = outerGifs[i],
32
        innerGif = innerGifs[i],
33
        innerGifImage = innerGifImages[i],
34
        centerX = outerGif.offsetLeft + (outerGif.clientWidth / 2),
35
        centerY = outerGif.offsetTop + (outerGif.clientHeight / 2),
36
        degree = Math.atan2(mouseX - centerX, - (mouseY - centerY) )*(180/Math.PI);  
37
    innerGif.style.webkitTransform = "rotate(" + degree + "deg)";
38
    innerGif.style.transform = "rotate(" + degree + "deg)";
39
    degree = -degree;
40
    innerGifImage.style.webkitTransform = "rotate(" + degree + "deg)";
41
    innerGifImage.style.transform = "rotate(" + degree + "deg)";
42
  }
43
}
44
}
45
</script></head>
 
CSS 
html, body { height:100%; margin:0; padding:0; }
1
html, body { height:100%; margin:0; padding:0; }
2
.outerGif {
3
  margin-top:50px;
4
  display:inline-block;
5
  position:relative;
6
  background: url(http://25.media.tumblr.com/tumblr_md91o3v2o21rdi9rjo1_500.gif);
7
  border-radius:50%;
8
  background-size:cover;
9
  width:300px; height:300px;
10
  overflow:hidden;
11
  /* Fix webkit rendering bug */
12
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
13
}
14
.innerGif {
15
  position:absolute;
16
  left:-25%; bottom:50%;
17
  width:150%; height:50%;
18
  transform-origin:bottom center;
19
  overflow:hidden;
20
}
21
.innerGif .image {
22
  top:0%;
23
  height:200%; width:100%;
24
  background: url(http://25.media.tumblr.com/tumblr_mayd2coRwu1rhy8q9o1_500.gif) center center;
25
  background-size:cover;
26
}
27
.overlay {
28
  position:absolute;
29
  top:50%; left:50%;
30
  margin-top:-75px; margin-left:-75px;
31
  width:150px; height:150px;
32
  background:white;
33
  border-radius:50%;
34
}
35
.overlay:before {
36
  content:''; position:absolute;
37
  width:170%; height:170%;
38
  border-radius:50%;
39
  margin-top:-68px; margin-left:-68px;
40
  border:15px solid white;
41
}
42
.overlay .image {
43
  position:absolute;
44
  top:60%; left:50%;
45
  width:70px; height:70px;
46
  overflow:hidden;
47
  background:url(http://25.media.tumblr.com/tumblr_ma235cIYyx1rzygcio1_500.gif) center 42%;
48
  margin-top:-35px; margin-left:-35px;
49
}
50
.overlay .image:before {
51
  content:''; position:absolute;
52
  left:-80%;
53
  height:120%; width:80%;
54
  background:white;
55
  transform-origin:top right;
56
  transform:rotate(-33deg);
57
}
58
.overlay .image:after {
59
  content:''; position:absolute;
60
  right:-80%;
61
  height:120%; width:80%;
62
  background:white;
63
  transform-origin:top left;
64
  transform:rotate(33deg);
65
}
66
 
67
.cssAnim { left:15%; }
68
.jsFollow { left:25%; }
69
.cssAnim .innerGif { animation:elem 5s infinite; }
70
.cssAnim .innerGif .image { animation:inner 5s infinite; }
71
 
72
@keyframes elem {
73
  30% { transform:rotate(-50deg); }
74
  70% { transform:rotate(180deg); }
75
}
76
@keyframes inner {
77
  30% { transform:rotate(50deg); }
78
  70% { transform:rotate(-180deg); }
79
}
 
JavaScript 
// NOTE: Javascript is in the head (found in the HTML section here)
1
// NOTE: Javascript is in the head (found in the HTML section here)
2
// For more check out zachsaucier.com
 

Rotation & background experiment

CSSDeck G+