Plugin that transitions backgrounds?

I’m looking for a plugin that can take a background color, and the closer you get to a hotspot / element on the page, the background will slowly transition to a different color depending on how close your mouse is to the hotspot / element.

For example, you have a [color1] background and a play button in the center of the page. Maybe ~ 100px out of the button, the transition from color1 to color2 starts to take place, and as you get on top of the button, that’s when you see the full color2? I assume something like this exists? Duckduckgo’ing for this isn’t really turning up much besides SO threads.

A plugin to… what, exactly?

1 Like

I think the first paragraph described the intended functionality I’m trying to replicate. A plugin that combines background transitions with cursor positioning.

Plugins “plug in” to something. What system are you looking for a plugin for?

jQuery would probably be the best shot at finding something like this.

Is my intended functionality not clear? Honestly curious if I need to rewrite what I am looking for.

I found this by Chris Coyier. You could modify it easily to do what you need.

Is my intended functionality not clear?

Well, it doesn’t sound like you’re looking for a plugin. It sounds like you’re just trying to do something. This wouldn’t be a plugin for anything. That’s the part that was confusing. The above wouldn’t be considered a jQuery plugin, but it does use jQuery (though it doesn’t need to).

Gotcha! And this is a great find. A great start for sure. Thanks! :slight_smile:

The other part of this request will be to find a way to transition a background color from one value to the next, depending on how close the cursor is to the box.

For example, in that codepen, hypothetically if you were within 100px of the box, the background would start to transition from white to a different color (so maybe 50px out, it’s partially green or something?)

Does something like that exist?

Does something like that exist?

Probably not. The hard part is covered in the jsfiddle. Just modify that to change the element’s background color based on distance.

1 Like

Ok thanks! If anyone comes across that, I’ll be glad to take it, otherwise i"ll have to try and somehow replicate this.

How would you handle the background transition? I’m not even sure how I’d handle it to be honest.

I would start with a list of colors in an array that create a gradient between the 2 colors you’re looking for, rather than trying to calculate it on the fly.

Then calculate which one you want to put on the background based how far you are from the element. If you have say 10 colors, you could just take a percentage and multiply it by 10 to a fixed decimal length of 0 to get the position of the array you want to use.

Then just set the element in any way you do normally.

 document.getElementById('yourid').style.backgroundColor = newBackgroundColor

If you want a smoother transition, then you’d just use more colors in the array. An array of say 100 colors is nothing. Then you could just find the percentage and use that directly.

If you want a more realtime color shift, then you’d simply just google how to create a gradient programatically.

I found this - https://stackoverflow.com/questions/19160147/animate-background-color-like-a-progress-bar-in-jquery

Before I untangle this, I had a thought…the initial green overlay state on this treatment is a linear-gradient, whereas the “final state” is rgba(#000, 0.6), so it’s moving from a linear-gradient to a solid color. That’s going to thicken things I feel like.

videoPanel () {
    $('<span class="hotspot"></span>').appendTo($(".video-panel .overlay-text"));
    $('<div class="bg-overlay"></div>').prependTo($(".video-panel"));
    const $videoPanel = $(".video-panel");
    const $element  = $videoPanel.find(".hotspot");
    const $bgOverlay  = $videoPanel.find(".bg-overlay");

    const oldRed1 = 4;
    const oldGreen1 = 106;
    const oldBlue1 = 56;
    const oldAlpha1 = 0.7;

    const oldRed2 = 0;
    const oldGreen2 = 79;
    const oldBlue2 = 63;
    const oldAlpha2 = 0.7;

    const newRed = 0;
    const newGreen = 0;
    const newBlue = 0;
    const newAlpha = 0.6;

    function transitionRGB(distance, r,g,b,a) {
      const distancePercentage = "0."+distance;
      // so could be 200 - 100... this would represent the timeline. 
      //then i need to find out how close the distance is. so i need to 
      //minus 100 from the distance so
      //Math.abs(Math.round((200 - 100) * 13% of the way there));
      const newR = Math.abs(Math.round(((r - newRed) * distancePercentage)) + newRed);
      const newG = Math.abs(Math.round(((g - newGreen) * distancePercentage)) + newGreen);
      const newB = Math.abs(Math.round(((b - newGreen) * distancePercentage)) + newBlue);
      const newA = Math.abs(((a - newAlpha) * distancePercentage) + newAlpha);
      console.log(r+","+g+","+b+","+a);
      console.log(newR+","+newG+","+newB+","+newA);
      return newR+","+newG+","+newB+","+newA;
    }
    
    function calculateDistance(elem, mouseX, mouseY) {
      return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {
      let distance = calculateDistance($element, e.pageX, e.pageY);
      if(distance <= 30) {
        $videoPanel.addClass("cursor-on");
      } else if(distance > 30 && distance <= 99) {
        if($videoPanel.hasClass("cursor-on")) {
          $videoPanel.removeClass("cursor-on");
        }
        let gradientValue1 = transitionRGB(distance, oldRed1, oldBlue1, oldGreen1, oldAlpha1);
        let gradientValue2 = transitionRGB(distance, oldRed2, oldBlue2, oldGreen2, oldAlpha2);
        $bgOverlay.css({
          backgroundImage:"linear-gradient(135deg, rgba("+gradientValue1+") 0%, rgba("+gradientValue2+") 100%)"
        });
        console.log("distance: "+distance);
      } else {
        if($videoPanel.hasClass("cursor-on")) {
          $videoPanel.removeClass("cursor-on");
        }
        if($bgOverlay[0].hasAttribute("style")) {
          $bgOverlay.removeAttr("style");
        }
      }
    });
  },

~
Think I got it! The only question is…it’s transitioning to blue first…is that normal? I’m not a color expert but I just want to double check. Also forgive the poor code…threw code at the editor to see what stuck.
http://h ebr onacad emyor g.f inal sit e.c om/
~
Video panel…go into the pink circle.

It’s close but definitely not 100% right. Must tinker some more.

I think I’ll need a little help here. Link given in the previous post. If you slowly traverse over the pink center, you’ll see the console start to light up, and if you slowly go towards the center play button, you’llnotice for a brief moment, near the end of your mouse journey, it starts to go green for a moment. Why is that?

videoPanel () {
    $('<span class="hotspot"></span>').appendTo($(".video-panel .overlay-text"));
    $('<div class="bg-overlay"></div>').prependTo($(".video-panel"));
    const $videoPanel = $(".video-panel");
    const $element  = $videoPanel.find(".hotspot");
    const $bgOverlay  = $videoPanel.find(".bg-overlay");

    const oldRed1 = 4;
    const oldGreen1 = 106;
    const oldBlue1 = 56;
    const oldAlpha1 = 0.7;

    const oldRed2 = 0;
    const oldGreen2 = 79;
    const oldBlue2 = 53;
    const oldAlpha2 = 0.7;

    const newRed = 0;
    const newGreen = 0;
    const newBlue = 0;
    const newAlpha = 0.6;

    function transitionRGB(distance, r,g,b,a) {
      const distancePercentage = "0."+(distance - 30);
      const newValue = 1 - distancePercentage;
      console.log(newValue+"NEWLAJDFKLSADF");
      // The range of possible r/g/b is 0-255
      //...so for example lets do 106 - 79...(its 27)
      //then i need to find out how close you are to the center. so i need to 
      // take that 27 from above and * it by the percentage of how close it is.
      // I track 100 pixels out so if I get 20px closer to it...I'm 80px away (for example).
      // So that's basically 80% away
      // So I take that 27 and do * 0.8. thats 21.6. I round that and that = 22
      // I take that 22 and add it to the 79. that's 101.
      // So it went from 106 to 101
      // (and when its 100% of hte way there, it has to be 79);
      const newR = Math.abs(Math.round(((r - newRed) * newValue)) - r);
      const newG = Math.abs(Math.round(((g - newGreen) * newValue)) - g);
      const newB = Math.abs(Math.round(((b - newBlue) * newValue)) - b);
      const newA = Math.abs(((a - newAlpha) * newValue) - a);
      console.log(newR+","+newG+","+newB+","+newA);
      return newR+","+newG+","+newB+","+newA;
    }
    
    function calculateDistance(elem, mouseX, mouseY) {
      return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {
      let distance = calculateDistance($element, e.pageX, e.pageY);
      console.log(distance);
      if(distance <= 30) {
        $videoPanel.addClass("cursor-on");
      } else if(distance > 30 && distance <= 129) {
        if($videoPanel.hasClass("cursor-on")) {
          $videoPanel.removeClass("cursor-on");
        }
        let gradientValue1 = transitionRGB(distance, oldRed1, oldGreen1, oldBlue1, oldAlpha1);
        let gradientValue2 = transitionRGB(distance, oldRed2, oldGreen2, oldBlue2, oldAlpha2);
        $bgOverlay.css({
          backgroundImage:"linear-gradient(135deg, rgba("+gradientValue1+") 0%, rgba("+gradientValue2+") 100%)"
        });
      } else {
        if($videoPanel.hasClass("cursor-on")) {
          $videoPanel.removeClass("cursor-on");
        }
        if($bgOverlay[0].hasAttribute("style")) {
          $bgOverlay.removeAttr("style");
        }
      }
    });
  },

Edit - Seems when you’re below 10%, it starts to happen

Got it! WHen I set distance percentage, if distance away is 39 or lower, that makes it 0.9 which makes it seem like it’s only 10% in. Quick fix is …

if(distance >= 40) {
        distancePercentage = "0."+(distance - 30);
      } else {
        distancePercentage = "0.0"+(distance - 30);
      }

Not updated on the live site since I’m using webpack and localhost, but I can confirm this now works PERFECTLY. Thanks for the great help everybody.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.