Ajax Loader
×
HTML 
<section>
1
<section>
2
    <h1>
3
        <a href="#" class="nice-link">Hover me, please</a>
4
    </h1>
5
    <p>
6
        Lorem ipsum dolor sit amet, consectetur <a href="#" class="nice-link">adipiscing</a> elit fusce vel sapien elit in malesuada semper mi,
7
        id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
8
        Lorem ipsum dolor sit amet, <a href="#" class="nice-link">consectetur</a> adipiscing elit fusce vel sapien elit in malesuada semper mi,
9
        id <a href="#" class="nice-link">sollicitudin urna fermentum ut fusce</a> varius nisl ac ipsum gravida vel pretium tellus.
10
    </p>
11
</section>
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 
32
 
33
 
34
 
35
 
36
 
37
 
38
 
39
 
40
 
41
 
42
 
43
 
44
 
45
 
46
 
47
 
48
 
49
 
50
 
51
 
52
 
53
<footer>
54
    <a id="dex-sign" href="http://drygiel.com" target="_blank"></a>
55
</footer>
56
 
57
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
a.nice-link {
1
a.nice-link {
2
    @bg-color: #262626;
3
    @color: #168dff;
4
    @hover-color: lighten(spin(saturate(@color, 50%), -8), 8%);
5
 
6
    position: relative;
7
    color:  @color;
8
    h1 &:after {
9
        border-bottom: 1px solid @hover-color; // Underline
10
    }
11
 
12
    &:after {
13
        text-align: justify;
14
        display: inline-block;
15
        content: attr(data-text);
16
        position: absolute;
17
        left: 0;
18
        top: 0;
19
        white-space: nowrap;
20
        overflow: hidden;
21
        color: @hover-color;
22
        min-height: 100%;
23
        width: 0;
24
        max-width: 100%; // 'cause of IE bug
25
        background: @bg-color;
26
        -moz-transition: .3s;
27
        -o-transition: .3s;
28
        -webkit-transition: .3s;
29
        transition: .3s;
30
    }
31
 
32
    &:hover {
33
        color: @color; // To override default hover color
34
 
35
        &:after {
36
            width: 100%;
37
        }
38
    }
39
}
40
 
41
 
42
//_____________ PAGE
43
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
44
 
45
* {
46
    margin: 0;
47
    padding: 0;
48
    -moz-box-sizing: padding-box;
49
    -webkit-box-sizing: padding-box;
50
    box-sizing: padding-box;
51
}
52
 
53
body, html {
54
    color: #dedede;
55
    height: 100%;
56
    background: #262626;
57
    font: 300 130% 'Open Sans',sans-serif;
58
    -webkit-font-smoothing: antialiased;
59
}
60
 
61
::selection {
62
    background: #90bbff;
63
}
64
 
65
::-moz-selection {
66
    background: #90bbff;
67
}
68
 
69
a {
70
    text-decoration: none;
71
    color: #168dff;
72
 
73
    &:hover {
74
        color: #90bbff;
75
    }
76
}
77
 
78
section {
79
    text-align: center;
80
    height: 100%;
81
 
82
    h1 {
83
        padding-top: 40px;
84
        text-transform: uppercase;
85
    }
86
 
87
    p {
88
        min-width: 300px;
89
        text-align: left;
90
        display: inline-block;
91
        padding: 30px;
92
    }
93
}
94
 
95
 
96
 
97
 
98
 
99
 
100
 
101
 
102
 
103
 
104
 
105
 
106
 
107
 
108
 
109
 
110
 
111
 
112
 
113
 
114
 
115
 
116
 
117
 
118
 
119
 
120
 
121
 
122
 
123
 
124
 
125
 
126
 
127
 
128
 
129
 
130
 
131
 
132
 
133
 
134
 
135
 
136
 
137
 
138
 
139
 
140
 
141
 
142
 
143
 
144
footer  {
145
  text-align: center;
146
}
147
//____________SIGN
148
@sign-x: 255px;
149
@sign-y: 84px;
150
@sign-frames: 85;
151
@sign-duration: 2.5s;
152
 
153
a#dex-sign {
154
    margin: 20px 0 2px 0;
155
    opacity: .5;
156
    display: inline-block;
157
    width: @sign-x;
158
    height: @sign-y;
159
    background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat; // Only 20KB!
160
    &:hover {
161
        opacity: 1;
162
        -webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg)';
163
    }
164
 
165
    &.play {
166
        -moz-animation: sign-anim @sign-duration steps(@sign-frames) forwards;
167
        -o-animation: sign-anim @sign-duration steps(@sign-frames) forwards;
168
        -webkit-animation: sign-anim @sign-duration steps(@sign-frames) forwards;
169
        animation: sign-anim @sign-duration steps(@sign-frames) forwards;
170
    }
171
}
172
 
173
@-webkit-keyframes sign-anim {
174
    to {
175
        background-position: 0 @sign-frames * -@sign-y;
176
    }
177
}
178
 
179
@-moz-keyframes sign-anim {
180
    to {
181
        background-position: 0 @sign-frames * -@sign-y;
182
    }
183
}
184
 
185
@keyframes sign-anim {
186
    to {
187
        background-position: 0 @sign-frames * -@sign-y;
188
    }
189
}
 
JavaScript 
$('a.nice-link').each(function () {
1
$('a.nice-link').each(function () {
2
  $(this).attr('data-text', $(this).text());
3
});
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 
32
 
33
 
34
 
35
 
36
 
37
 
38
 
39
 
40
 
41
 
42
 
43
 
44
 
45
 
46
 
47
 
48
 
49
 
50
// Play signature when it's in view
51
$(window).scroll(function () { var sign = $('#dex-sign'); if (sign.offset().top + sign.outerHeight() <= $(this).scrollTop() + window.innerHeight + 5) sign.addClass('play'); });
52
 
 

Progress Hover

CSSDeck G+