JqueryNo Comments

default thumbnail

If you want to smoothly transition and change background color while scrolling, preferably using just CSS and jquery then you are at right place.



    <div data-color="red" class="panel home">
        <div class="logo-zoom animate__animated animate__zoomIn">
	    <img src="img/logo-home.svg" alt="Logo Vilson">
    <div class="featured-wrapper panel" data-color="white">
	<div class="container">
	    <div class="row">
	        <div class="col-md-12">
		    <p>Test is a dummy test. </p>

You need to add .panel class and data-color=” ” in main div of every section.


  background-color: #fff;
  background-color: #C1272D;

  background-color: #F4F4F4;

You can create the background classes according to your need.


$(window).scroll(function() {
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
  var scroll = $window.scrollTop() + ($window.height() / 2);
  $panel.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      $body.addClass('color-' + $(this).data('color'));

We have tested the above code. You can try it.

Be the first to post a comment.

Add a comment