Changing background to black

I Need Help
1

Hey, how can I change the background color from white to black? You can find the effect at this page when you scroll to the end of the website.

Thanks for your help.

2

You can trigger on scroll when a div gets towards the top of the viewport (you could define what ever offset you want). And in the case of this website, it adds a class to the body tag that has the black BG.

But thats the general idea anyway. I am unable to make any code up right now.

1 Like
3

Hello @RME is something like this you need?

If so from the html code, just need to copy the data-color="white" and the others.
So that you will select in the tree the bloc and in “Custom Atributes” you add in:

  • Name: data-color
  • Value: white
    And so on regarding other blocs.

Then open page preferences → Code and in the Header part copy the CSS from the code pen and add style tags in it and change .panel to .bloc, erase the part of alignment and erase the demo part so it ends in something like this:

/* Setting fade transition and default settings */
body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
}

/* panel styles */
.bloc {
  /* min height incase content is higher than window height */
  min-height: 100vh;
  display: flex;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
}

/* colours */
.color-violet {
  background-color: #7A4EAB;
}
.color-indigo {
  background-color: #4332CF;
}
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #4DCF42;
}
.color-yellow {
  background-color: #FAEB33;
}
.color-orange {
  background-color: #F19031;
}
.color-red {
  background-color: #F2293A;
}

Of course you need to change the color for what you need…

Then take the part of the JS copy it, add SCRIPT tags, and in Page Settings → Code select Footer and edit the information regarding the changes you made in CSS and then it will end with something like this:

<script>
$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $bloc = $('.bloc');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $bloc.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
</script>

Hope it helps you and guide you in the right way…

3 Likes
4

hey @Pealco it works perfect. Thanks for your friendly support und your help to make my websites even better. That’s a cool effect!

5

@Pealco unfortunately there is a problem. everything is displayed correctly in the browser preview. As soon as I have the page on the server, nothing happens. There is no visible effect.

6

Hello, @RME please check if you have lazy load active when you export…

7

Lazy loading is deactivated. Should I turn to on?

8

ok now it works.

image
image894Ă—668 55.9 KB

Perfect. Thanks a lot.

9

Since I’ve been with Blocs I seen lots or Pro & Cons on Minify as to whether to use these features of not.
Does anyone have a breakdown list that would tell us when to use the and when not?

2 Likes
10

@PeteSharp @Pealco You can see that effect at my new page:

www.homepage-eins.de

What do you think? Many thanks for your support!

5 Likes
11

nice :wink:

We will probably see a few more doing this after this thread, no doubt.

1 Like
12

Hello @RME it worked very well, congratulations… its a very nice effect!..

1 Like
13

Very well designed website. Love the white space, it make it easy to read.

1 Like
14

Superb as usual. Super neat, RME.

1 Like
15

Love this ! very very clean and modern. Nice one !

1 Like
16

Hey guys,Is it possible that the text will automatically change to white if the background is black?

17

Hello @RME , off course and easilyyyyyy…

just in the css after the .color-violet for example you have:

.color-violet {
 background-color: #7A4EAB;
}

Just change for :slight_smile:

.color-violet {
  background-color: #7A4EAB;
  color: #FFFFFF;
}

But then you will find that the change of the color is very abrupt, so in this part of the code:

body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
}

Just change to :slight_smile:

body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
  transition: color 1s ease;
}

And there you go… you can have different colors of text regarding different backgrounds and with a smooth transition…

Hope it help you…