Elementor sfondo effetto gradiente durante lo scroll

Name: Elementor sfondo effetto gradiente durante lo scroll - WebAwesome Template
Price: 0.99 EUR
Availability: InStock

# Template # Video

€0.99

Con questo codice JavaScript gratuito è possibile creare, durante lo scroll, un effetto gradiente tra i colori di sfondo dei contenitori su Elementor. Basta applicare i tuoi colori preferiti in HEX all’interno del codice, tanti quanti sono i contenitori con la classe colorchange e lo script applicherà un effetto gradiente scrollando tra uno e l’altro. L’impostazione è semplice e il video a fondo pagina spiega passo-passo come configurarlo.

Trovi il codice gratuito in basso, sotto il video. Acquistando, invece, supporterai il lavoro e otterrai un ulteriore script, con l’effetto mostrato a fine video.

Requisiti

Elementor

☑

Elementor Pro

☒

Altri Plugin

☒

Difficoltà modifiche

Facile

Scarica e usalo subito!

Pronto all'uso

Scarica il templeate, inseriscilo sul tuo sito e utilizzalo subito

Sempre disponibile

Dopo l'acquisto, il file sarà sempre disponibile al download

Dove vuoi

L'utilizzo non è limitato ad un singolo sito. Puoi utilizzarlo su tutti i siti web che vuoi

Personalizzabile

Personalizzazione semplice nella maggior parte dei template. Altri richiedono conoscenza base di CSS/HTML o Javascript

Esempi

[ Il risultato potrebbe essere leggermente diverso ]

Codice

				
					// IT: Definisci i colori dei contenitori
// EN: Define the colors of the containers
var colors = ['#e30022', '#0057cc', '#9acd32', '#ff6666', '#8736c7'];

function setBodyBackground(color) {
  document.body.style.backgroundColor = color;
}

function interpolateColor(color1, color2, percentage) {
  var color1RGB = hexToRgb(color1);
  var color2RGB = hexToRgb(color2);

  var r = Math.round(color1RGB.r + (color2RGB.r - color1RGB.r) * percentage);
  var g = Math.round(color1RGB.g + (color2RGB.g - color1RGB.g) * percentage);
  var b = Math.round(color1RGB.b + (color2RGB.b - color1RGB.b) * percentage);

  return rgbToHex(r, g, b);
}

function hexToRgb(hex) {
  var bigint = parseInt(hex.substr(1), 16);
  var r = (bigint >> 16) & 255;
  var g = (bigint >> 8) & 255;
  var b = bigint & 255;
  return { r: r, g: g, b: b };
}

function rgbToHex(r, g, b) {
  var componentToHex = function (c) {
    var hex = c.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };

  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function handleScroll() {
  var containers = document.getElementsByClassName('colorchange');
  var windowHeight = window.innerHeight;
  var scrollPosition = window.scrollY;

  var firstContainerOffset = containers[0].offsetTop;
  var lastContainerOffset = containers[containers.length - 1].offsetTop;
  var lastContainerHeight = containers[containers.length - 1].offsetHeight;

  if (scrollPosition < firstContainerOffset) {
    setBodyBackground(colors[0]);
  } else if (scrollPosition > lastContainerOffset + lastContainerHeight - windowHeight) {
    setBodyBackground(colors[colors.length - 1]);
  } else {
    var activeIndex = Math.floor((scrollPosition - firstContainerOffset) / containers[0].offsetHeight);
    var scrollPercentage = (scrollPosition - (activeIndex * containers[0].offsetHeight) - firstContainerOffset) / containers[0].offsetHeight;

    var activeColor = colors[activeIndex];
    var nextColor = colors[activeIndex + 1];
    var interpolatedColor = interpolateColor(activeColor, nextColor, scrollPercentage);
    setBodyBackground(interpolatedColor);
  }
}

window.addEventListener('scroll', handleScroll);

handleScroll();