Hast du noch Fragen? Schreibe mir einfach eine Nachricht!

Change background color on scroll Elementor

Elementor: Farbwechsel beim Scrollen

Möchtest du, dass sich die Farben auf deiner Website beim Scrollen ändern? Heute gebe ich dir eine einfache Anleitung, die du schnell auf deiner Website umsetzen kannst.

Ich liebe es, wenn sich die Hintergrundfarbe auf Websites ändert. Es ist ein ganz einfacher Effekt, der deine Website lebendiger macht.

Den Farbwechsel auf deiner Website kannst du in 3 Schritten umsetzen:

Schritt 1:

Wähle eine Seite aus, auf der du die Änderung der Hintergrundfarbe beim Scrollen anwenden möchtest. Wenn du Elementor nutzt, besteht deine Seite aus verschiedenen Abschnitten. Die Hintergrundfarbe der Abschnitte bestimmt, zu welcher Farbe sich der Abschnitt beim Scrollen ändert.

Achte darauf, dass beim Farbwechsel der Text immer noch genügend Kontrast zur Hintergrundfarbe aufweist. Ideal wäre es, wenn der Text bei beiden Farben gut lesbar bleibt.

Schritt 2:

Gehe in Elementor zu „Custom Code“ und klicke auf „Custom Code hinzufügen“. Du kannst einen beliebigen Namen dafür verwenden. Das Wichtigste ist, dass du in Zukunft weißt, um welchen Code es sich an dieser Stelle handelt.

<style>
body{
opacity: 0;
}
</style>

Kopiere den Code und füge ihn in das dafür vorgesehene Fenster ein. Als Ort für den Code wähle „Head“. Anschließend klicke auf „Veröffentlichen“ und wähle deine ausgesuchte Seite aus, auf der er angewendet werden soll.

Schritt 3:

Beim nächsten Schritt gehst du erneut zu „Custom Code“ und fügst den nachfolgenden Code hinzu.

<script>
 
var $ = jQuery,
selector = ‚[data-elementor-type=“wp-page“] > .elementor-element, [data-elementor-type=“header“] > .elementor-element, [data-elementor-type=“footer“] > .elementor-element‘
 
$(window).on(‚load‘, function(){
 
$(selector + ‚, .sb-color > .elementor-element‘).each(function(){
var color
 
if($(this).css(‚background-color‘) != ‚rgba(0, 0, 0, 0)‘){
color = $(this).css(‚background-color‘)
}else{
color = $(‚body‘).css(‚background-color‘)
}
 
$(this).attr(‚data-color‘, color)
$(this).css(‚background-color‘, ‚rgba(0, 0, 0, 0)‘)
})
 
setTimeout(function(){
$(‚body‘).addClass(‚loading‘)
}, 200)
setTimeout(function(){
$(‚body‘).addClass(‚loaded‘)
}, 300)
})
 
var changing = false
 
function encodeClass(color){
console.log(color)
return color.replace(/, /g, ‚-‚).replace(‚(‚, ‚c‘).replace(‚.‘, ‚d‘).replace(‚)‘, ‚e‘)
}
function decodeClass(className){
return className.replace(/-/g, ‚, ‚).replace(‚c‘, ‚(‚).replace(‚d‘, ‚.‘).replace(‚e‘, ‚)‘)
}
 
$(window).on(‚load scroll resize‘, function(){
 
changing = true
 
var lastVisible = $(‚[data-elementor-type=“wp-page“] > .elementor-element‘).eq(0),
bottomOffset = 200,
startFrom = 200
 
if( $(window).width() < 768 ){
bottomOffset = 100
}
 
$(selector).each(function(){
 
var top_of_element = $(this).offset().top,
bottom_of_element = $(this).offset().top + $(this).outerHeight(),
bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(),
top_of_screen = $(window).scrollTop()
 
if ((bottom_of_screen – bottomOffset > top_of_element) && (top_of_screen < bottom_of_element)){
lastVisible = $(this)
}
})
 
if($(window).scrollTop() < startFrom){
lastVisible = $(‚[data-elementor-type=“wp-page“] > .elementor-element‘).eq(0)
}
$(‚body‘).addClass(‚changing‘).css(‚background-color‘, lastVisible.attr(‚data-color‘))
 
setTimeout(function(){
if(!changing){
$(‚body‘).removeClass(‚changing‘)
}
changing = false
}, 800+100)
 
var classList = document.querySelector(‚body‘).className.split(‚ ‚)
classList.forEach(function(className){
if( className.startsWith(‚rgbc‘) || className.startsWith(‚rgbac‘) ) {
$(‚body‘).removeClass(className)
}
})
 
var currentClass = encodeClass(lastVisible.attr(‚data-color‘))
 
$(‚body‘).addClass(currentClass)
 
$(‚.sb-color > .elementor-element‘).removeClass(’show‘)
$(‚.sb-color‘).each(function(){
 
var found = false
$(this).children(‚.elementor-element‘).each(function(){
if( encodeClass($(this).attr(‚data-color‘)) == currentClass ){
$(this).addClass(’show‘)
found = true
}
})
if(!found){
$(this).children(‚.elementor-element‘).eq(0).addClass(’show‘)
}
})
 
})
 
</script>
<style>
body.loading{
opacity: 1;
}
body.loaded{
–g-transition: 0.8s;
}
body,
body .elementor-widget,
body .elementor-widget > *{
transition: all var(–g-transition) ease-in-out !important;
}
 
</style>

Diesmal wählst du als Ort „Body-End“ und klickst daneben auf „Always load jQuery“. Du veröffentlichst es und wählst deine Website aus.

Falls etwas nicht funktioniert, schreib mir bitte, und vielleicht finden wir gemeinsam heraus, woran es liegt.

Hallo, ich bin Maria!

Melde dich bei mir und lass uns zusammen deine Website zum Strahlen bringen! Ich freue mich auf deine Nachricht!