<html> 11 | <body> 12 | <section id="home" data-section-menu="Home"> 13 | <p>Home</p> 14 | </section> 15 | <section id="about" data-section-menu="About"> 16 | <p>About</p> 17 | </section> 18 | <section id="contact" data-section-menu="Contact"> 19 | <p>Contact</p> 20 | </section> 21 | </body> 22 | </html>23 | 24 | ### CSS 25 |
<link rel="stylesheet" href="assets/css/jquery.sectionmenu.css" />26 | 27 | ### Javascript 28 | 29 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
30 | <script type="text/javascript" src="assets/js/jquery.fragmentscroll.min.js"></script>
31 | <script type="text/javascript" src="assets/js/jquery.sectionmenu.min.js"></script>
32 | <script type="text/javascript">
33 | $(window).load(function() {
34 | $('body').sectionMenu().fragmentScroll();
35 | });
36 | </script>
37 |
38 | ## Options
39 |
40 | $('body').sectionMenu({
41 | // Show title in the menu
42 | enableTitle: true,
43 |
44 | // Outer element
45 | element: 'nav',
46 |
47 | // Class and data- name
48 | class: 'section-menu',
49 |
50 | // Insert content before the menu
51 | insertBefore: '',
52 |
53 | // Insert content after the menu
54 | insertAfter: ''
55 | });
56 |
--------------------------------------------------------------------------------
/assets/css/color.css:
--------------------------------------------------------------------------------
1 | @keyframes color-background {
2 | 0% {
3 | background-color: #d65d5b;
4 | }
5 | 33.3333333333% {
6 | background-color: #ed8745;
7 | }
8 | 66.6666666667% {
9 | background-color: #7a576d;
10 | }
11 | 100% {
12 | background-color: #d65d5b;
13 | }
14 | }
15 | .color-background {
16 | animation: color-background 15s linear infinite;
17 | }
18 |
19 | @keyframes color-border {
20 | 0% {
21 | border-color: #d65d5b;
22 | }
23 | 33.3333333333% {
24 | border-color: #ed8745;
25 | }
26 | 66.6666666667% {
27 | border-color: #7a576d;
28 | }
29 | 100% {
30 | border-color: #d65d5b;
31 | }
32 | }
33 | .color-border {
34 | animation: color-border 15s linear infinite;
35 | }
36 |
37 | @keyframes color-text {
38 | 0% {
39 | color: #d65d5b;
40 | }
41 | 33.3333333333% {
42 | color: #ed8745;
43 | }
44 | 66.6666666667% {
45 | color: #7a576d;
46 | }
47 | 100% {
48 | color: #d65d5b;
49 | }
50 | }
51 | .color-text {
52 | animation: color-text 15s linear infinite;
53 | }
54 |
55 | .color-overlay {
56 | position: relative;
57 | }
58 | .color-overlay::before {
59 | content: "";
60 | position: absolute;
61 | top: 0;
62 | left: 0;
63 | width: 100%;
64 | height: 100%;
65 | opacity: 0.85;
66 | animation: color-background 15s linear infinite;
67 | }
68 |
69 | /*# sourceMappingURL=color.css.map */
70 |
--------------------------------------------------------------------------------
/assets/css/color.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["color.scss"],"names":[],"mappings":"AAYC;EAIE;IACC,kBARK;;EAON;IACC,kBARK;;EAON;IACC,kBARK;;EAYP;IACC;;;AAIF;EACC;;;AAfD;EAIE;IACC,cARK;;EAON;IACC,cARK;;EAON;IACC,cARK;;EAYP;IACC;;;AAIF;EACC;;;AAfD;EAIE;IACC,OARK;;EAON;IACC,OARK;;EAON;IACC,OARK;;EAYP;IACC;;;AAIF;EACC;;;AAIF;EAEC;;AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"color.css"}
--------------------------------------------------------------------------------
/assets/css/color.scss:
--------------------------------------------------------------------------------
1 | // _color.scss
2 |
3 | $color-attributes: (
4 | ('background', 'background-color'),
5 | ('border', 'border-color'),
6 | ('text', 'color'),
7 | );
8 |
9 | $color-animation: 15s linear infinite !default;
10 | $colors: #d65d5b, #ed8745, #7a576d !default;
11 |
12 | @each $color-attribute-name, $color-attribute in $color-attributes {
13 | @keyframes color-#{$color-attribute-name} {
14 | @each $color in $colors {
15 | $i: index($colors, $color) - 1;
16 |
17 | #{$i / length($colors) * 100%} {
18 | #{$color-attribute}: $color;
19 | }
20 | }
21 |
22 | 100% {
23 | #{$color-attribute}: nth($colors, 1);
24 | }
25 | }
26 |
27 | .color-#{$color-attribute-name} {
28 | animation: color-#{$color-attribute-name} $color-animation;
29 | }
30 | }
31 |
32 | .color-overlay
33 | {
34 | position: relative;
35 |
36 | &::before
37 | {
38 | content: "";
39 | position: absolute;
40 | top: 0;
41 | left: 0;
42 | width: 100%;
43 | height: 100%;
44 | opacity: 0.85;
45 | animation: color-background $color-animation;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/assets/css/jquery.sectionmenu.css:
--------------------------------------------------------------------------------
1 | .section-menu
2 | {
3 | position: fixed;
4 | top: 0;
5 | right: 0;
6 | height: 100%;
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | }
11 |
12 | .section-menu ul
13 | {
14 | padding-right: 25px;
15 | list-style: none;
16 | }
17 |
18 | .section-menu a
19 | {
20 | display: block;
21 | position: relative;
22 | height: 25px;
23 | color: white;
24 | font-size: 12px;
25 | white-space: nowrap;
26 | transition: all 0.5s
27 | }
28 |
29 | .section-menu a::after
30 | {
31 | content: "";
32 | display: inline-block;
33 | border-radius: 50%;
34 | width: 8px;
35 | height: 8px;
36 | background-color: white;
37 | box-shadow: 0 0 0 4px transparent;
38 | transition: all 0.3s ease;
39 | }
40 |
41 | .section-menu a:hover::after
42 | {
43 | background-color: transparent;
44 | box-shadow: 0 0 0 4px white;
45 | }
46 |
47 | .section-menu a span
48 | {
49 | position: absolute;
50 | right: 25px;
51 | text-align: right;
52 | opacity: 0;
53 | transition: all 0.3s ease;
54 | }
55 |
56 | .section-menu a:hover span
57 | {
58 | opacity: 1;
59 | }
60 |
--------------------------------------------------------------------------------
/assets/css/jquery.sectionmenu.dark.css:
--------------------------------------------------------------------------------
1 | .section-menu a
2 | {
3 | color: black;
4 | }
5 |
6 | .section-menu a::after
7 | {
8 | background-color: black;
9 | box-shadow: 0 0 0 4px transparent;
10 | }
11 |
12 | .section-menu a:hover::after
13 | {
14 | background-color: transparent;
15 | box-shadow: 0 0 0 4px black;
16 | }
17 |
--------------------------------------------------------------------------------
/assets/css/kelson.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Kelson";
3 | font-style: normal;
4 | font-weight: 100;
5 | src: url("../webfonts/kelson-thin.eot");
6 | src: url("../webfonts/kelson-thin.eot?iefix") format("eot"), url("../webfonts/kelson-thin.ttf") format("truetype"), url("../webfonts/kelson-thin.woff") format("woff"), url("../webfonts/kelson-thin.woff2") format("woff2");
7 | }
8 | @font-face {
9 | font-family: "Kelson";
10 | font-style: normal;
11 | font-weight: 300;
12 | src: url("../webfonts/kelson-light.eot");
13 | src: url("../webfonts/kelson-light.eot?iefix") format("eot"), url("../webfonts/kelson-light.ttf") format("truetype"), url("../webfonts/kelson-light.woff") format("woff"), url("../webfonts/kelson-light.woff2") format("woff2");
14 | }
15 | @font-face {
16 | font-family: "Kelson";
17 | font-style: normal;
18 | font-weight: 400;
19 | src: url("../webfonts/kelson.eot");
20 | src: url("../webfonts/kelson.eot?iefix") format("eot"), url("../webfonts/kelson.ttf") format("truetype"), url("../webfonts/kelson.woff") format("woff"), url("../webfonts/kelson.woff2") format("woff2");
21 | }
22 | @font-face {
23 | font-family: "Kelson";
24 | font-style: normal;
25 | font-weight: 500;
26 | src: url("../webfonts/kelson-medium.eot");
27 | src: url("../webfonts/kelson-medium.eot?iefix") format("eot"), url("../webfonts/kelson-medium.ttf") format("truetype"), url("../webfonts/kelson-medium.woff") format("woff"), url("../webfonts/kelson-medium.woff2") format("woff2");
28 | }
29 | @font-face {
30 | font-family: "Kelson";
31 | font-style: normal;
32 | font-weight: 700;
33 | src: url("../webfonts/kelson-bold.eot");
34 | src: url("../webfonts/kelson-bold.eot?iefix") format("eot"), url("../webfonts/kelson-bold.ttf") format("truetype"), url("../webfonts/kelson-bold.woff") format("woff"), url("../webfonts/kelson-bold.woff2") format("woff2");
35 | }
36 | @font-face {
37 | font-family: "Kelson";
38 | font-style: normal;
39 | font-weight: 800;
40 | src: url("../webfonts/kelson-extra-bold.eot");
41 | src: url("../webfonts/kelson-extra-bold.eot?iefix") format("eot"), url("../webfonts/kelson-extra-bold.ttf") format("truetype"), url("../webfonts/kelson-extra-bold.woff") format("woff"), url("../webfonts/kelson-extra-bold.woff2") format("woff2");
42 | }
43 |
44 | /*# sourceMappingURL=kelson.css.map */
45 |
--------------------------------------------------------------------------------
/assets/css/kelson.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["kelson.scss"],"names":[],"mappings":"AAYC;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA;;AALA;EACA;EACA;EACA,aAbgB;EAchB;EACA","file":"kelson.css"}
--------------------------------------------------------------------------------
/assets/css/kelson.scss:
--------------------------------------------------------------------------------
1 | // kelson.scss
2 |
3 | $kelson-weights: (
4 | ('kelson-thin', 100),
5 | ('kelson-light', 300),
6 | ('kelson', 400),
7 | ('kelson-medium', 500),
8 | ('kelson-bold', 700),
9 | ('kelson-extra-bold', 800)
10 | );
11 |
12 | @each $kelson-weight-key, $kelson-weight-value in $kelson-weights {
13 | @font-face {
14 | font-family: 'Kelson';
15 | font-style: normal;
16 | font-weight: $kelson-weight-value;
17 | src: url('../webfonts/#{$kelson-weight-key}.eot');
18 | src: url('../webfonts/#{$kelson-weight-key}.eot?iefix') format('eot'),
19 | url('../webfonts/#{$kelson-weight-key}.ttf') format('truetype'),
20 | url('../webfonts/#{$kelson-weight-key}.woff') format('woff'),
21 | url('../webfonts/#{$kelson-weight-key}.woff2') format('woff2');
22 | }
23 | }
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after
2 | {
3 | box-sizing: border-box;
4 | }
5 |
6 | html, body
7 | {
8 | margin: 0;
9 | padding: 0;
10 | height: 100%;
11 | }
12 |
13 | body
14 | {
15 | color: #dfdfdf;
16 | font-family: 'Kelson', sans-serif;
17 | font-size: 20px;
18 | }
19 |
20 | h1
21 | {
22 | font-size: 40px;
23 | font-weight: 400;
24 | color: white;
25 | }
26 |
27 | p
28 | {
29 | line-height: 30px;
30 | }
31 |
32 | a
33 | {
34 | color: white;
35 | text-decoration: none;
36 | transition: all 0.3s ease;
37 | }
38 |
39 | .container
40 | {
41 | margin: 0 auto;
42 | padding: 15px;
43 | }
44 |
45 | .container::before, .container::after
46 | {
47 | content: " ";
48 | display: table;
49 | }
50 |
51 | .container::after
52 | {
53 | clear: both;
54 | }
55 |
56 | #nav
57 | {
58 | position: fixed;
59 | top: 0;
60 | width: 100%;
61 | height: 60px;
62 | }
63 |
64 | #nav .logo
65 | {
66 | display: inline-block;
67 | width: 80px;
68 | }
69 |
70 | #nav .logo svg
71 | {
72 | fill: white;
73 | }
74 |
75 | #nav ul
76 | {
77 | float: right;
78 | margin: 0;
79 | font-size: 14px;
80 | font-weight: 500;
81 | padding-top: 15px;
82 | padding-right: 30px;
83 | list-style: none;
84 | }
85 |
86 | #nav li
87 | {
88 | margin-left: 25px;
89 | }
90 |
91 | @media (min-width: 480px)
92 | {
93 | #nav li
94 | {
95 | float: left;
96 | line-height: 50px;
97 | }
98 | }
99 |
100 | #nav a
101 | {
102 | color: #dfdfdf;
103 | transition: color 0.3s ease;
104 | }
105 |
106 | #nav a:hover
107 | {
108 | color: white;
109 | }
110 |
111 | #page .container
112 | {
113 | display: flex;
114 | flex-direction: column;
115 | justify-content: center;
116 | padding: 100px 15px;
117 | width: 100%;
118 | min-height: 100vh;
119 | text-align: center;
120 | }
121 |
--------------------------------------------------------------------------------
/assets/images/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miWebb/jQuery.sectionMenu/d3183da0b343006bde17d41e8df61066e8825aca/assets/images/background.jpg
--------------------------------------------------------------------------------
/assets/js/jquery.easing.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3 | *
4 | * Uses the built in easing capabilities added In jQuery 1.1
5 | * to offer multiple easing options
6 | *
7 | * TERMS OF USE - jQuery Easing
8 | *
9 | * Open source under the BSD License.
10 | *
11 | * Copyright © 2008 George McGinley Smith
12 | * All rights reserved.
13 | *
14 | * Redistribution and use in source and binary forms, with or without modification,
15 | * are permitted provided that the following conditions are met:
16 | *
17 | * Redistributions of source code must retain the above copyright notice, this list of
18 | * conditions and the following disclaimer.
19 | * Redistributions in binary form must reproduce the above copyright notice, this list
20 | * of conditions and the following disclaimer in the documentation and/or other materials
21 | * provided with the distribution.
22 | *
23 | * Neither the name of the author nor the names of contributors may be used to endorse
24 | * or promote products derived from this software without specific prior written permission.
25 | *
26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34 | * OF THE POSSIBILITY OF SUCH DAMAGE.
35 | *
36 | */
37 | jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b+c;return-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b+c;return d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b+c;return-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b*b+c;return d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return b==0?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){if(b==0)return c;if(b==e)return c+d;if((b/=e/2)<1)return d/2*Math.pow(2,10*(b-1))+c;return d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){if((b/=e/2)<1)return-d/2*(Math.sqrt(1-b*b)-1)+c;return d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h