Salve ragazzi. Ho bisogno del vostro aiuto mai come in questa occasione. Sto sviluppando questo sito ad una azienda che mi ha chiesto se era possibile spostare dietro le slide l'effetto costellazione, già discusso in altro post come realizzazione e come parte integrante del sito di M.Boschetti come codice da lui utilizzato.

E' possibile in pratica far passare dietro gli oggetti questo effetto? Mi sono accorto che lo fa solo sulle immagini di un oggetto testo. Ho provato una alternativa come tabelle dove gli passa dietro ma sono un obrorio. Inutile dire che non si può fare un testo come immagine perchè come ti sposti di risoluzione si ottiene che i caratteri si rimpiccioliscono quindi come fare se si puo fare?

Vi posto il link dello staging https://templatemaxdesign.altervista.org/DEMO1/NEOCODEXTEST/

Semmai dovesse servire posto di seguito il codice del CSS:

=====

/* 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: #050B1B;
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;
}

QUESTO è il richiamo al JS

if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
return window.setTimeout(callback, 1000 / 60);
});
}

$(document).ready(function(){

var onMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { onMobile = true; }

if( ( onMobile === false ) ) {


$('#background').constellation({

line: {
color: 'rgba(255, 255, 255, 0.3)'
}
});

} else {


}

});

(function ($, window) {

function Constellation (canvas, options) {
var $canvas = $(canvas),
context = canvas.getContext('2d'),
defaults = {
star: {
color: 'rgba(255, 255, 255, .9)',
width: 1
},
line: {
color: 'rgba(255, 255, , .7)',
width: 0.2
},
position: {
x: canvas.width * 1,
y: canvas.height * 0.5
},
width: window.innerWidth,
height: window.innerHeight,
velocity: 0.1,
length: 150,
distance: 200,
radius: 150,
stars: []
},
config = $.extend(true, {}, defaults, options);

function Star () {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;

this.vx = (config.velocity - (Math.random() * 0.5));
this.vy = (config.velocity - (Math.random() * 0.5));

this.radius = Math.random() * config.star.width;
}

Star.prototype = {
create: function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fill();
},

animate: function(){
var i;
for (i = 0; i < config.length; i++) {

var star = config.stars[i];

if (star.y < 0 || star.y > canvas.height) {
star.vx = star.vx;
star.vy = - star.vy;
} else if (star.x < 0 || star.x > canvas.width) {
star.vx = - star.vx;
star.vy = star.vy;
}

star.x += star.vx;
star.y += star.vy;
}
},

line: function(){
var length = config.length,
iStar,
jStar,
i,
j;

for (i = 0; i < length; i++) {
for (j = 0; j < length; j++) {
iStar = config.stars[i];
jStar = config.stars[j];

if (
(iStar.x - jStar.x) < config.distance &&
(iStar.y - jStar.y) < config.distance &&
(iStar.x - jStar.x) > - config.distance &&
(iStar.y - jStar.y) > - config.distance
) {
if (
(iStar.x - config.position.x) < config.radius &&
(iStar.y - config.position.y) < config.radius &&
(iStar.x - config.position.x) > - config.radius &&
(iStar.y - config.position.y) > - config.radius
) {
context.beginPath();
context.moveTo(iStar.x, iStar.y);
context.lineTo(jStar.x, jStar.y);
context.stroke();
context.closePath();
}
}
}
}
}
};

this.createStars = function () {
var length = config.length,
star,
i;

context.clearRect(0, 0, canvas.width, canvas.height);

for (i = 0; i < length; i++) {
config.stars.push(new Star());
star = config.stars[i];

star.create();
}

star.line();
star.animate();
};

this.setCanvas = function () {
canvas.width = config.width;
canvas.height = config.height;
};

this.setContext = function () {
context.fillStyle = config.star.color;
context.strokeStyle = config.line.color;
context.lineWidth = config.line.width;
};

this.loop = function (callback) {
callback();

window.requestAnimationFrame(function () {
this.loop(callback);
}.bind(this));
};

this.bind = function () {
$(window).on('mousemove', function(e){
config.position.x = e.pageX - $canvas.offset().left;
config.position.y = e.pageY - $canvas.offset().top;
});
};

this.init = function () {
this.setCanvas();
this.setContext();
this.loop(this.createStars);
this.bind();
};
}

$.fn.constellation = function (options) {
return this.each(function () {
var c = new Constellation(this, options);
c.init();
});
};
})($, window);