Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
2
3
<header class="main_h">
4
 
5
    <div class="row">
6
        <a class="logo" href="#">L/F</a>
7
 
8
        <div class="mobile-toggle">
9
            <span></span>
10
            <span></span>
11
            <span></span>
12
        </div>
13
 
14
        <nav>
15
            <ul>
16
                <li><a href=".sec01">Section 01</a></li>
17
                <li><a href=".sec02">Section 02</a></li>
18
                <li><a href=".sec03">Section 03</a></li>
19
                <li><a href=".sec04">Section 04</a></li>
20
            </ul>
21
        </nav>
22
 
23
    </div> <!-- / row -->
24
 
25
</header>
26
 
27
<div class="hero">
28
 
29
    <h1><span>loser friendly</span><br>Batman nav.</h1>
30
 
31
    <div class="mouse">
32
        <span></span>
33
    </div>
34
 
35
</div>
36
 
37
<div class="row content">
38
    <h1 class="sec01">Section 01</h1>
39
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
40
    <h1 class="sec02">Section 02</h1>
41
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
42
    <h1 class="sec03">Section 03</h1>
43
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
44
    <h1 class="sec04">Section 04</h1>
45
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
46
</div>
47
 
48
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
49
 
 
CSS 
x
254
1
 
2
 
3
@mixin small {
4
  @media only screen and (max-width: 766px) {
5
    @content;
6
  }
7
}
8
 
9
$color: #8f8f8f;
10
$color2: #e8f380;
11
 
12
// Navigation
13
.main_h {
14
  position: fixed;
15
  top: 0px;
16
  max-height: 70px;
17
  z-index: 999;
18
  width: 100%;
19
  padding-top: 17px;
20
  background: none;
21
  overflow: hidden;
22
  -webkit-transition: all 0.3s;
23
  transition: all 0.3s;
24
  opacity: 0;
25
  top: -100px;
26
  padding-bottom: 6px;
27
  font-family: "Montserrat", sans-serif;
28
  @include small {
29
    padding-top: 25px;
30
  }
31
}
32
 
33
.open-nav {
34
  max-height: 400px !important;
35
  .mobile-toggle {
36
    transform: rotate(-90deg);
37
    -webkit-transform: rotate(-90deg);
38
  }
39
}
40
 
41
.sticky {
42
  background-color: rgba(255, 255, 255, 0.93);
43
  opacity: 1;
44
  top: 0px;
45
  border-bottom: 1px solid lighten($color, 30%);
46
}
47
 
48
.logo {
49
  width: 50px;
50
  font-size: 25px;
51
  color: $color;
52
  text-transform: uppercase;
53
  float: left;
54
  display: block;
55
  margin-top: 0;
56
  line-height: 1;
57
  margin-bottom: 10px;
58
  @include small {
59
    float: none;
60
  }
61
}
62
 
63
nav {
64
  float: right;
65
  width: 60%;
66
  @include small {
67
    width: 100%;
68
  }
69
 
70
  ul {
71
    list-style: none;
72
    overflow: hidden;
73
    text-align: right;
74
    float: right;
75
    @include small {
76
      padding-top: 10px;
77
      margin-bottom: 22px;
78
      float: left;
79
      text-align: center;
80
      width: 100%;
81
    }
82
 
83
    li {
84
      display: inline-block;
85
      margin-left: 35px;
86
      line-height: 1.5;
87
      @include small {
88
        width: 100%;
89
        padding: 7px 0;
90
        margin: 0;
91
      }
92
    }
93
    a {
94
      color: #888888;
95
      text-transform: uppercase;
96
      font-size: 12px;
97
    }
98
  }
99
}
100
 
101
.mobile-toggle {
102
  display: none;
103
  cursor: pointer;
104
  font-size: 20px;
105
  position: absolute;
106
  right: 22px;
107
  top: 0;
108
  width: 30px;
109
  -webkit-transition: all 200ms ease-in;
110
  -moz-transition: all 200ms ease-in;
111
  transition: all 200ms ease-in;
112
  @include small {
113
    display: block;
114
  }
115
 
116
  span {
117
    width: 30px;
118
    height: 4px;
119
    margin-bottom: 6px;
120
    border-radius: 1000px;
121
    background: $color;
122
    display: block;
123
  }
124
}
125
 
126
.row {
127
  width: 100%;
128
  max-width: 940px;
129
  margin: 0 auto;
130
  position: relative;
131
  padding: 0 2%;
132
}
133
 
134
 
135
// Page Style
136
* {
137
  box-sizing: border-box;
138
}
139
 
140
body {
141
  color: $color;
142
  background: white;
143
  font-family: "Cardo", serif;
144
  font-weight: 300;
145
  -webkit-font-smoothing: antialiased;
146
}
147
 
148
a {
149
  text-decoration: none;
150
}
151
 
152
h1 {
153
  font-size: 30px;
154
  line-height: 1.8;
155
  text-transform: uppercase;
156
  font-family: "Montserrat", sans-serif;
157
}
158
 
159
p {
160
  margin-bottom: 20px;
161
  font-size: 17px;
162
  line-height: 2;
163
}
164
 
165
.content {
166
  padding: 50px 2% 250px;
167
}
168
 
169
.hero {
170
  position: relative;
171
  background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
172
  -webkit-background-size: cover;
173
  -moz-background-size: cover;
174
  background-size: cover;
175
  text-align: center;
176
  color: #fff;
177
  padding-top: 110px;
178
  min-height: 500px;
179
  letter-spacing: 2px;
180
  font-family: "Montserrat", sans-serif;
181
 
182
  h1 {
183
    font-size: 50px;
184
    line-height: 1.3;
185
  
186
    span {
187
      font-size: 25px;
188
      color: $color2;
189
      border-bottom: 2px solid $color2;
190
      padding-bottom: 12px;
191
      line-height: 3;
192
    }
193
  }
194
}
195
 
196
.mouse {
197
  display: block;
198
  margin: 0 auto;
199
  width: 26px;
200
  height: 46px;
201
  border-radius: 13px;
202
  border: 2px solid $color2;
203
  position: absolute;
204
  bottom: 40px;
205
  position: absolute;
206
  left: 50%;
207
  margin-left: -26px;
208
  span {
209
    display: block;
210
    margin: 6px auto;
211
    width: 2px;
212
    height: 2px;
213
    border-radius: 4px;
214
    background: $color2;
215
    border: 1px solid transparent;
216
    -webkit-animation-duration: 1s;
217
    animation-duration: 1s;
218
    -webkit-animation-fill-mode: both;
219
    animation-fill-mode: both;
220
    -webkit-animation-iteration-count: infinite;
221
    animation-iteration-count: infinite;
222
    -webkit-animation-name: scroll;
223
    animation-name: scroll;
224
  }
225
}
226
 
227
@-webkit-keyframes scroll {
228
  0% {
229
    opacity: 1;
230
    -webkit-transform: translateY(0);
231
    transform: translateY(0);
232
  }
233
  100% {
234
    opacity: 0;
235
    -webkit-transform: translateY(20px);
236
    transform: translateY(20px);
237
  }
238
}
239
 
240
 
241
@keyframes scroll {
242
  0% {
243
    opacity: 1;
244
    -webkit-transform: translateY(0);
245
    -ms-transform: translateY(0);
246
    transform: translateY(0);
247
  }
248
  100% {
249
    opacity: 0;
250
    -webkit-transform: translateY(20px);
251
    -ms-transform: translateY(20px);
252
    transform: translateY(20px);
253
  }
254
}
 
JavaScript 
// Sticky Header
1
// Sticky Header
2
$(window).scroll(function() {
3
 
4
    if ($(window).scrollTop() > 100) {
5
        $('.main_h').addClass('sticky');
6
    } else {
7
        $('.main_h').removeClass('sticky');
8
    }
9
});
10
 
11
// Mobile Navigation
12
$('.mobile-toggle').click(function() {
13
    if ($('.main_h').hasClass('open-nav')) {
14
        $('.main_h').removeClass('open-nav');
15
    } else {
16
        $('.main_h').addClass('open-nav');
17
    }
18
});
19
 
20
$('.main_h li a').click(function() {
21
    if ($('.main_h').hasClass('open-nav')) {
22
        $('.navigation').removeClass('open-nav');
23
        $('.main_h').removeClass('open-nav');
24
    }
25
});
26
 
27
// navigation scroll lijepo radi materem
28
$('nav a').click(function(event) {
29
    var id = $(this).attr("href");
30
    var offset = 70;
31
    var target = $(id).offset().top - offset;
32
    $('html, body').animate({
33
        scrollTop: target
34
    }, 500);
35
    event.preventDefault();
36
});
 

Batman nav.

CSSDeck G+