Ajax Loader
HTML 
.container
1
.container
2
      canvas#world
3
      .img
4
        svg(viewbox='0 0 500 400').animated.zoomIn
5
          defs
6
            filter#feDisplacementMap(filterunits='userSpaceOnUse', x='0', y='0', width='500', height='400')
7
              feturbulence(type='fractalNoise', basefrequency='0.995', numoctaves='1', seed='1', stitchtiles='noStitch', result='img')
8
              fedisplacementmap(in='SourceGraphic', in2='img', xchannelselector='R', ychannelselector='G', scale='0')
9
                animate(attributename='scale', values='50;0;0', keytimes='0;0.75;1', begin='0s', dur='5s')
10
          symbol#s-text
11
            text.text(text-anchor='middle', x='50%', y='50%', dy='.35em') ♥
12
          mask#m-text(maskunits='userSpaceOnUse', maskcontentunits='userSpaceOnUse')
13
            use#textMask(xlink:href='#s-text')
14
          g#mainImg(mask='url(#m-text)',filter="url(#feDisplacementMap)")
15
            image(xlink:href='http://cs625624.vk.me/v625624893/2e626/2JbQNf0TmZg.jpg', width='100%', height='100%', x='10%', y='0%')
16
      .num.animated.lightSpeedIn <span class='gold'>19</span> year)
17
        .small С Днем Рождения <a href="http://vk.com/hey_good_morning" class='myNotMy'>Яночка</a>!!!
18
 
19
 
20
  link(rel="stylesheet", href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css")
21
 
 
CSS 
@import url("http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic");
1
@import url("http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic");
2
*
3
  box-sizing border-box
4
.flex
5
html
6
body
7
  width 100%
8
  height 100%
9
a
10
  text-decoration none
11
body
12
  bcl = #333
13
  background bcl
14
  background linear-gradient(45deg,bcl,darken(bcl,15),bcl)
15
  margin 0
16
  font-family: 'Lobster', cursive;
17
  overflow hidden
18
 
19
#textMask
20
  fill: white;
21
  stroke: white;
22
  stroke-opacity: .2;
23
  stroke-width: 10;
24
  font-size: 490px
25
 
26
.container
27
  position relative
28
  height 100%
29
  width 100%
30
  #world
31
  .img
32
    left 0
33
    top 0
34
    bottom 0
35
    right 0
36
  .num
37
  .img
38
    text-align center
39
    position absolute
40
  svg
41
    height: 100%
42
    width 100%
43
 
44
  .num
45
    left 0
46
    bottom 0
47
    right 0
48
    color rgba(255, 255, 255, .99)
49
    text-shadow 0px 0px 5px
50
 
51
    font-size 150px
52
    @media (max-width:870px)
53
      font-size 100px
54
    @media (max-width:588px)
55
      font-size 50px
56
    animation-delay: 1s
57
    .small
58
      font-size 50%
59
    .gold
60
      color rgba(245, 240, 22, .99)
61
    .myNotMy
62
      color rgba(69, 183, 207, .99)
63
 
64
 
65
 
66
.anim-love
67
    transform translate3d(0,0,0)
68
    animation lovelovelove 1s ease infinite alternate
69
  @keyframes lovelovelove
70
    to
71
      font-size: 550px
72
 
73
 
74
@media screen and (-webkit-min-device-pixel-ratio:0)
75
  .anim-love
76
    transform-origin 50% 50%
77
    animation scalHeart 1s ease infinite alternate
78
  @keyframes scalHeart
79
    to
80
      s = .88
81
      transform scale3d(s,s,s)
 
JavaScript 
setTimeout ()->
1
setTimeout ()->
2
  mainImg.setAttribute('filter','')
3
  textMask.classList.add("anim-love")
4
,5000
5
 
6
 
7
NUM_CONFETTI = 69
8
COLORS = [[85,71,106], [174,61,99], [219,56,83], [244,92,68], [248,182,70]]
9
PI_2 = 2*Math.PI
10
 
11
 
12
canvas = document.getElementById "world"
13
context = canvas.getContext "2d"
14
window.w = 0
15
window.h = 0
16
 
17
resizeWindow = ->
18
  window.w = canvas.width = window.innerWidth
19
  window.h = canvas.height = window.innerHeight
20
 
21
window.addEventListener 'resize', resizeWindow, false
22
23
window.onload = -> setTimeout resizeWindow, 0
24
 
25
range = (a,b) -> (b-a)*Math.random() + a
26
 
27
drawCircle = (x,y,r,style) ->
28
  context.beginPath()
29
  context.arc(x,y,r,0,PI_2,false)
30
  context.fillStyle = style
31
  context.fill()
32
 
33
xpos = 0.5
34
 
35
document.onmousemove = (e) ->
36
  xpos = e.pageX/w
37
 
38
window.requestAnimationFrame = do ->
39
  window.requestAnimationFrame       ||
40
  window.webkitRequestAnimationFrame ||
41
  window.mozRequestAnimationFrame    ||
42
  window.oRequestAnimationFrame      ||
43
  window.msRequestAnimationFrame     ||
44
  (callback) -> window.setTimeout(callback, 1000 / 60)
45
 
46
 
47
class Confetti
48
 
49
  constructor: ->
50
    @style = COLORS[~~range(0,5)]
51
    @rgb = "rgba(#{@style[0]},#{@style[1]},#{@style[2]}"
52
    @r = ~~range(2,6)
53
    @r2 = 2*@r
54
    @replace()
55
 
56
  replace: ->
57
    @opacity = 0
58
    @dop = 0.03*range(1,4)
59
    @x = range(-@r2,w-@r2)
60
    @y = range(-20,h-@r2)
61
    @xmax = w-@r
62
    @ymax = h-@r
63
    @vx = range(0,2)+8*xpos-5
64
    @vy = 0.7*@r+range(-1,1)
65
 
66
  draw: ->
67
    @x += @vx
68
    @y += @vy
69
    @opacity += @dop
70
    if @opacity > 1
71
      @opacity = 1
72
      @dop *= -1
73
    @replace() if @opacity < 0 or @y > @ymax
74
    if !(0 < @x < @xmax)
75
      @x = (@x + @xmax) % @xmax
76
    drawCircle(~~@x,~~@y,@r,"#{@rgb},#{@opacity})")
77
 
78
 
79
confetti = (new Confetti for i in [1..NUM_CONFETTI])
80
 
81
window.step = ->
82
  requestAnimationFrame(step)
83
  context.clearRect(0,0,w,h)
84
  c.draw() for c in confetti
85
 
86
step()
 

Birthday confetti heart love

CSSDeck G+