CODEWITHSUNDEEP
javascripthtmlcss
AntunCrnja
AntunCrnja

Reputation: 119

Change element color black or white depending on background color

I'm setting up a new website, and I want to change logo color (that is position: fixed) depending on background color or image.

An example that I found is on this site. You can look at how the logo and some elements change color depending on background.

body {
  margin: 0;
}

.logo img {
  position: fixed;
  width: 100px;
}

.black {
  background: black;
  width: 100%;
  height: 400px;
}

.yellow {
  background: yellow;
  width: 100%;
  height: 400px;
}

.red {
  background: red;
  width: 100%;
  height: 400px;
}

.imageBg {
  background: url(https://images.pexels.com/photos/2208895/pexels-photo-2208895.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  width: 100%;
  height: 400px;
  background-size: cover;
}
<div class="logo">
  <img src="http://www.clker.com/cliparts/n/y/a/M/G/h/fdl-logo.svg">
</div>

<!-- change logo color to: black -->
<section class="yellow"></section>

<!-- change logo color to: white -->
<section class="black"></section>

<!-- change logo color to: white -->
<section class="red"></section>

<!-- change logo color to: black -->
<section class="yellow"></section>

<!-- change logo color to: white -->
<section class="imageBg"></section>

Here is my fiddle: https://jsfiddle.net/o0gnayht/

Upvotes: 4

Views: 2921

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

by using filter:invert() you can change the logo color from black to white. If you use jquery in onscroll event you can call filter based on closest to top section 

$(window).scroll(function ()
{
	var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop());
	$('section').each(function (index)
	{
		if (windowTop > ($(this).position().top - 100))
		{
			if ($(this).hasClass('yellow'))
			{
				$('.logo img').css('filter', 'invert(0)');
			}
			else
			{
				$('.logo img').css('filter', 'invert(1)');
			}
		}
	});
}).scroll();
body {
  margin: 0;
}

.logo img {
  position: fixed;
  width: 100px;
}

.black {
  background: black;
  width: 100%;
  height: 400px;
}

.yellow {
  background: yellow;
  width: 100%;
  height: 400px;
}

.red {
  background: red;
  width: 100%;
  height: 400px;
}

.imageBg {
  background: url(https://images.pexels.com/photos/2208895/pexels-photo-2208895.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  width: 100%;
  height: 400px;
  background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo">
  <img src="http://www.clker.com/cliparts/n/y/a/M/G/h/fdl-logo.svg">
</div>

<!-- change logo color to: black -->
<section class="yellow"></section>

<!-- change logo color to: white -->
<section class="black"></section>

<!-- change logo color to: white -->
<section class="red"></section>

<!-- change logo color to: black -->
<section class="yellow"></section>

<!-- change logo color to: white -->
<section class="imageBg"></section>

Upvotes: 3

Examath
Examath

Reputation: 176

I couldn't change the colour of the logo, but I've made a basic function to determine whether it's dark:

<script>
  var data = [false, true, true, false, true];

  function isDark() {
    var scrollPos = window.pageYOffset;
    var n = Math.floor((scrollPos + 50) / 400);
    console.log(data[n]);
    return data[n];
  }
</script>

When the user scrolls, the scroll position window.pageYOfset is used to determine which section the logo is above. It then uses the array data to determine what colour the logo should be.

The function will return true or false depending on what section the user has scrolled to. To actually change the logo, you could replace it with an another image, or change the images colour using code behind. Hope this helps.

Upvotes: 1

Related Questions