Ho provato, ma forse per la foga di inserire un qualcosa di nuovo ho capito poco e niente
questo � il codice che ho in uso
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body {
background-image: url(castello.jpg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: ; /* optional, center the image */


}
* {
box-sizing: border-box;
}


body {
font-family: 'Montserrat';
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}


ul {
list-style-type: none;
padding: 0;
margin: 0;
}


.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 85vh;
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__list--active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav__item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__link:hover {
background: #272b2e;
}
@media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}


.burger {
height: 15vh;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: "";
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty, .burger__patty:before, .burger__patty:after {
will-change: transform;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
-webkit-transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
-webkit-transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
@media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.burger--active .burger__patty {
-webkit-transform: scale(0.😎 rotate(90deg);
transform: scale(0.😎 rotate(90deg);
}
}


.panel {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.panel__wrapper {
padding: 7vh 7vw;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.panel__content {
will-change: transform;
-webkit-transform: scale(0.7) rotateX(-230deg);
transform: scale(0.7) rotateX(-230deg);
-webkit-transform-origin: center 80%;
transform-origin: center 80%;
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel__content--active {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.panel__headline {
font-weight: 700;
opacity: 0.8;
font-size: 48px;
margin: 0 0 25px 0;
}
.panel p {
margin: 0 0 25px 0;
color: #1a1a1a;
font-size: 24px;
max-width: 800px;
}
.panel p:last-child {
margin-bottom: 0;
}
.panel__block {
height: 3px;
background: rgba(0, 0, 0, 0.2);
margin: 0 0 25px 0;
}
@media (max-width: 640px) {
.panel__headline {
font-size: 36px;
}
.panel__wrapper {
padding: 10vh 10vw;
}
.panel p {
font-size: 16px;
}
}


.c-blue {
color: #5fc7ea;
}


.c-red {
color: #e68568;
}


.c-green {
color: #68e6ac;
}


.c-yellow {
color: #e6d068;
}


.b-blue {
background: #5fc7ea;
}


.b-red {
background: #e68568;
}


.b-green {
background: #68e6ac;
}


.b-yellow {
background: #e6d068;
}


.logo {
position: fixed;
bottom: 3vh;
right: 3vw;
z-index: 2;
}
.logo img {
width: 65px;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: rotate(0);
transform: rotate(0);
}
.logo img:hover {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}


</style>




<script>
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();


var openMenu = function() {
burger.classList.toggle('burger--active');
menu.classList.toggle('nav__list--active');
};


// reveal content of first panel by default
panel.eq(0).find('.panel__content').addClass('pane l__content--active');


var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;

// if the panel is in the viewport, reveal the content, if not, hide it.
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds+of) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};


var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);


$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function () {
window.location.hash = target;
});
}


var init = function() {
burger.addEventListener('click', openMenu, false);
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^="#"]').on('click',scrolly);
};


doc.on('ready', init);
</script>


</body>
</html>
Ho seguito il tuo consiglio, ho usato solo i file Css e Js, solo che non mi legge niente...