Change the colour of a triangle div over time

Question

EDIT: https://codepen.io/TechTime/pen/NjZOGE This is what I want to achieve, happening every few random amount of seconds with random colors.

EDIT2: How would this be done with multiple triangles? I've tried a few things, but it hasn't worked. Help would be appreciated

I was wandering if it were possible to change the color of a triangle div so that every few seconds it would glow a color then go back to normal. Below is my triangle code:

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid #e6e6e6;
}

I don't mind if it uses css, javascript or jquery. Just that it works! Thanks in advance.

Answer 1

The accepted solution does not meet all the criteria currently requested by the OP, I believe this one does and those being:

1. Random colors.
2. Random time intervals.
3. Return to initial color.
4. "Glows".

We use JS to change bottom border color and transition duration to random values. We also respond to the transitionend event so we don't have to use setInterval and know that the transition between colors has fully completed. Every other transition returns to the default gray. Glows by fading between colors instead of the color instantly changing to next color.

I've done this through a function that allows you to assign the element that requires the animation/transition and min/max parameters to control the time interval range between color changes. You'll also notice that I removed the pseudo element and nested a regular DIV as changing pseudo element CSS properties can be tricky.

var colorizer = function ( el, min, max ) {

    // @link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
    function getHexColor() {
      return "#000000".replace( /0/g, function () {
        return ( ~~( Math.random() * 16 ) ).toString( 16 );
      } );
    }

    // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    function getRandomInt( min, max ) {
      return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
    }

    min = undefined == min ? 250 : min;
    max = undefined == max ? 1500 : max;

    var isDefaultColor = true,
        style          = el.style,
        defaultColor   = style.borderBottomColor,
        color;

    return function ( e ) {
    
      el.offsetWidth; // Reset transition so it can run again.
      
      color                    = isDefaultColor ? getHexColor() : defaultColor;
      isDefaultColor           = !isDefaultColor;
      style.borderBottomColor  = color;
      style.transitionDuration = ( getRandomInt( min, max ) ) + 'ms';

    };

  },
  triangle          = document.querySelector( '.triangle > div' ),
  triangleColorizer = colorizer( triangle, 750, 2000 );

triangle.addEventListener( 'transitionend', triangleColorizer );

// Kick it off!
triangleColorizer();

.triangle {
  width: 5%;
  height: 0;
  padding: 0 0 5% 5%;
  overflow: hidden;
}
.triangle > div {
  width: 0;
  height: 0;
  margin-left: -500px;
  border-right: 500px solid transparent;
  border-left: 500px solid transparent;
  border-bottom: 500px solid lightgray;
  transition: border-bottom-color 1000ms ease-in-out;
}

<div class="triangle">
  <div></div>
</div>

Answer 2

This changes the triangle color into a random color every 2 seconds. On the first function we iterate on a string of letters and return it with as a random hex code. The x function creates a style tag and appends it into the head tag then it toggles the class randColor defined inside the previous statement. Finally the setInterval function is called calling the functions every 2 seconds. The remover function just removes the style tag from the head so we don't keep appending style tags every 2 seconds. It changes color every 2 seconds then goes back to its original color. Hope this helps.

function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }


function remover(){
 $(".style-tag").remove();
}

function x(){
    var style = $('<style class="style-tag">.randColor:after { border-bottom: 500px solid ' + getRandomColor() +'; }</style>');
  $('html > head').append(style);
  $(".triangle-up").toggleClass("randColor");
    
}

$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);




});

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid #e6e6e6;
  transition: all 0.4s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle-up"></div>

Answer 3

So this is very crude, but the only way I see this possible is using jQuery and having a bunch of css classes. You cannot change the :after css rule via jquery, since it's not part of the dom. But we can do something like this (which I admit is tedious, but I don't quite see another way given your current html).

html

<div class="triangle-up blue">

</div>

jquery

var cachedColorName;

$(document).ready(function() {
setInterval(function(){ 
    var newColor = 'red'; //(here you'd want to randomnly find a color that you have in your css
    changeColor(newColor); 
}, 3000);});

function changeColor(colorName) {
    $('.triangle-up').removeClass(cachedColorName).addClass(colorName);
    cachedColorName = colorName;
}

css

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}
.triangle-up:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
}
.triangle-up.blue:after {
  border-bottom: 500px solid blue;
}

.triangle-up.red:after{
  border-bottom: 500px solid red;
}

So you're just toggling different classes here. But this is the only way to make it random like you want (instead of hardcoded red that I did, you can programmatically pick a random color each time from a collection you have that has all the css classes that accompanies it).

Here's it in action:

https://jsfiddle.net/5b7wLv3r/2/

EDIT: if you need help randomly selecting a color, let me know. I can add that code.

EDIT 2: I made this a bit smarter for you

EDIT 3: finding the random color

css

.triangle-up {
  z-index: 1;
  float: left;
  margin: 0.5%;
  width: 5%;
  height: 0;
  padding-left: 5%;
  padding-bottom: 5%;
  overflow: hidden;
}

.triangle-up:after {
    content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
}

 .triangle-up.blue:after {
  border-bottom: 500px solid blue;
}

.triangle-up.red:after{
  border-bottom: 500px solid red;
}

.triangle-up.purple:after{
  border-bottom: 500px solid purple;
}


.triangle-up.yellow:after{
  border-bottom: 500px solid yellow;
}

.triangle-up.orange:after{
  border-bottom: 500px solid orange;
}

.triangle-up.green:after{
  border-bottom: 500px solid green;
}

html

<div class="triangle-up blue">

</div>

js

var cachedColorName;

var colorCollection = ['red', 'blue', 'purple', 'yellow', 'orange', 'green']

$(document).ready(function() {
setInterval(function(){ 
var newColor = randomItem(colorCollection); //(here you'd want to randomnly find a color that you have in your css
    changeColor(newColor); 
}, 3000);});

function changeColor(colorName) {
    $('.triangle-up').removeClass(cachedColorName);
    $('.triangle-up').addClass(colorName);
    cachedColorName = colorName;
}

function randomItem(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}

So basically, we have a collection here, which we randomly find a value in it, then pass the color name to our changeColor method. I did see in your question you want to change to random color, then back to default. Let me know if you need me to help you with that as well, basically just a boolean to see if you changed to random before. I would have implemented this in the code, but since you did not try it on your own I want to leave something up to you to figure out if so, just change to default. Otherwise, find the random color.

Working here:

https://jsfiddle.net/5b7wLv3r/3/