Elementor sfondo effetto gradiente durante lo scroll

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();
				
			

10% di sconto su TUTTO il CARRELLO

Iscriviti alla nostra newsletter per ricevere aggiornamenti settimanali dei nuovi template e ricevi subito uno sconto del 10%

Altri Template

Elementor sfondo effetto gradiente durante lo scroll

0.99

Recensioni

Recensioni

Ancora non ci sono recensioni.

Recensisci per primo “Elementor sfondo effetto gradiente durante lo scroll”

Ti trovi sulla sezione demo di WebAwesome, dove puoi trovare effetti e template per il tuo sito web e vedere le bozze realizzate. Per contattarci, controllare il portfolio dei lavori svolti e il listino prezzi, puoi tornare in qualsiasi momento al dominio principale cliccando su WebAwesome. Presto saranno disponibili al download parte dei nostri template!