Dimenticavo: questo è il css che richiama ▼

/* INIZIO CODICE */
body, input, select, textarea {
color: #FFFFFF;
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 15pt;
line-height: 1.25;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
background: #000000;
overflow: ;
}

a {
-webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
-ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
}
a:hover {
color: #30a2ff;
text-decoration: none !important;
outline: none !important;
}
a:active, a:focus {
outline: none !important;
text-decoration: none !important;
color: #FFFFFF;
}

/* Wrapper */
@-webkit-keyframes wrapper {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes wrapper {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes wrapper {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#wrapper {
-webkit-animation: wrapper 3s forwards;
-moz-animation: wrapper 3s forwards;
animation: wrapper 3s forwards;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}

/* Main */
#main {
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
}
#main:before {
content: '';
display: inline-block;
height: 100%;
margin-right: 0;
vertical-align: middle;
width: 1px;
}

/* VARIANTE */
#background {
background: transparent;
bottom: 0;
width: 100vw;
left: 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}

/* Footer */
#footer {
line-height: 30px;
position: fixed;
text-align: center;
font-size: 15px;
width: 100%;
z-index: 50;
bottom: 10px;
height: 30px;
background-image: -webkit-linear-gradient(150deg, #004e958c 40%, #10283ea1 80%);
padding: 10px 15px 10px 5px;
}
#footer .copyright {
color: #f2f3f7;
font-size: 12px;
opacity: 0.8;
}

... personalmente userei il mio storico metodo che ho divulgato, div_custom+iframe o anche il solo iframe, con effetti concentrati e senza tanti rompimenti di capo, che ormai vedo usato da diversi utenti per tutti gli scopi...
... comunque, a farla breve, lasciando le cose come stanno adesso,  puoi usare questo mio codice, immediato:
<script>
$(document).ready(function () { //K>
$('#wrapper').insertAfter('#imHeader')
}) //K<<
</script>

... ed ovviamente l'intestazione con sfondo nero...

*

Ciao KolAsim. Funziona ma funziona al contrario nel senso che vedo l'effetto proprio dove non si dovrebbe vedere e cioè sul footer. Anche cambiando #imHeader con #imFooter la situazione rimane invariata si vede sto effetto su tutta la pagina. Io invece volevo che non si vedesse solo sul footer ma si vedesse solo sull'header. Probabilmente sbaglio io qualcosa.

.. prova questa variante:

<script>
$(document).ready(function () { //K>
$('#wrapper').insertAfter('#imHeader').attr("id","K")
$('#K, #K > div').css("height","135")
}); //K<<
</script>

... ma secondo me potresti risolvere meglio come detto prima, con iframe, ...certo da provare...
... altrimenti dovresti personalizzare direttamente il codice JS e CSS a servizio...

.

Provato ma non funziona! Elimina l'effetto e lo fa vedere solo in alto nella barra nera del footer. In attesa di miracoli (kol non sbaglia mai) ho ripristinato il codice originario.

... non vedo il codice applicato per poter valutare, ma nella mia simulazione funzionava correttamente, ...a meno che non ci sia da valutare il ritardo detto prima...
... in alternativa puoi provare in CSS con questo codice:
<style>
#wrapper #main {position:absolute !important;height:135px !important;overflow:hidden}
</style>
... ... ovviamente l'HEADER non deve essere bianco (!) com'è adesso...
...
... però ripeto quanto detto prima, ...per come la vedo che preferisco le soluzioni semplici, io penso che la soluzione con iframe di immediato riscontro possa essere la più semplice e facile, a meno di non dover riprogettare tutto o meglio, di cercare in rete altri effetti più adatti per tale scopo...

*

Forse ho toppato io di brutto. La parte che interessa di far vedere e dove c'è lo slider (la foto in alto) Perdona Kool ma in questi gg coi problemi che ho sulla 21.2.8 mi si è fuso il cervello.

si deve vedere solo sulla foto è possibile?

Praticamente dove deve essere NON VISIBILE questa animazione è sul Footer ▼

DEMO SPOSTATO

... ah! ... mi era parso strano.........
... quindi non HEADER, ma per la prima riga di ambedue i LINK...
... ho applicato anche un mio esclusivo controllo sulla eventuale latenza accennata prima:
<script>
$( document ).ready(function() {/**K>**/
n=0;avvioK();
}); /**K<<**/
//------------------------------------f-K1-------
function avvioK() {/**K1>**/
calcoloK = setInterval(function(){/**K2>**/
n=n+1;
if($('#wrapper').is(':visible') || n>20){/**K3>**/
wrapperK()
clearInterval(calcoloK); calcoloK = 0;
} /**K3<<**/
}, 500); /**K2<<**/
} /**K1<<**/
//------------------------------------f-K3-------
function wrapperK() {/**K3>**/
divK='<div id="K" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"> </div> ';
$('#imPageRow_1').append(divK);
k=$('#K').height();
$('#wrapper,#wrapper div').css("height",k);
$('#wrapper,#wrapper div').css("position","absolute");
$('#wrapper').insertAfter('#K');
} /**K3<<**/
</script>

.

ciao

.

... nota: ... nel tuo secondo LINK la costellazione non mi si presenta; ...forse dipende dal mio PC in sovraccarico rispetto agli effetti in atto...

. 

Sei un grande KolAsim lo sapevo che tu NON sbagli mai un colpo anzi scusami per il mio refuso iniziale. Grazie Dell'aiuto Kol grazie di cuore e se il cliente fa storie glielo stampo sul cervello il codice.