CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
eatmailyo
eatmailyo

Reputation: 670

Text clip by backround color

Im creating a full screen intro page. I need to create a drop down columns witch changes background color from dark to light and reveals a content. But I need that main title (text) clipping to background color - in process of animation it changes.

enter image description here
On the light background text should be black

There's the JSFiddle

SCSS

.header{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  .overlay{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;

    .col{
      flex: 1;
      width: 100%;
      height: 100%;
      background-color: black;
    }
  }

  .content{
    flex: 1;
    display: flex;
    flex-direction: column;

    > div{
      flex: 1;
    }

    .title{
      position: relative;
      color: white;
      z-index: 2;
    }

    .posts{
      display: flex;
      position: relative;
      z-index: 0;

      a{
        display: block;
        width: 100%;
        height: 100%;
        background: lightblue;
        text-align: center;
      }
    }
  }
}

And JS

$(document).ready(function(){

  setTimeout(function () {

    $(".overlay .col").each(function (i) {
        var col = $(this);
      setTimeout(function () {

        if(!col.hasClass('animated')){
            col.addClass('animated');
            col.slideUp(500);
        }

      }, 150 * i);
    });

  }, 500);

});

Also there's is some glitch between animations, I wanted to know why this happening

RESOLVED
add to .header

background: white;

and to .header .content .title {

mix-blend-mode: exclusion;

NEW JSFiddle

Upvotes: 0

Views: 95

Answers (2)

Beavatron Prime
Beavatron Prime

Reputation: 329

Can you edit your title css so it shows:

.title{
  position: relative;
  mix-blend-mode: exclusion;
  color:white;
  z-index: 3;

}

Note: this might not work for older versions of IE - let me know how that works out for you, cheers.

See more about the mix-blend-mode property here.

Update: Here's a modified fiddle showing the animation wrapped over the columns rather than animate per column - https://jsfiddle.net/kqyno63x/

Upvotes: 1

Shiv Patne
Shiv Patne

Reputation: 553

You can set color and opacity for text that you want to display in background. please refer below code. Also please find fiddle link for same.

.textBackground{
 color:black;
 opacity: 0.3;
}
<h1 class="textBackground">Lorem ipsum dolor sit amet</h1>

Upvotes: 0

Related Questions