Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timdt

Fade out container background without fading out content in it.

Recommended Posts

Hey guys, i ran into a little problem. i have a container div wich contains a background image.
Now i want to set the autoalpha of the background to 0, or the opacity. I got it working except for the content inside of the container div.
Everything inside of it will be set to autoAlpha 0 and this isnt what i want.    

 

I am sorry no codePen because i only need to know what the solution is.

 

<div id="container">
        <div>
          <img class="man" src="assets/man.png" />
          <img class="tv" src="assets/tv.png" />
          <img class="tafel" src="assets/tafel.png" />
          <img class="bitcoin" src="assets/bitcoin.png" />
          <img class="light" src="assets/light.png" />

          <div id ="circle" class="rondje">
          </div>
          <div id ="circle1" class="rondje">
          </div>
          <div id ="circle2" class="rondje">
            </div>

          </div>


  </div>

 

js:

var $img = $('#container');

tl.to($img,3, {opacity:0})

 

css:

  #container {
        width:600px;
        height:400px;
        background-image:url('assets/woonkamer2.jpg');
        border:1px solid black;
        overflow: hidden;


      }

Link to post
Share on other sites

Trick to fading a background image and not the content is to separate the two from a markup standpoint. Using a container div with its position set to relative, place two children within the container; one for the background, one for the content. Set both of their positions to absolute, width 100%, height 100%, and be sure sure the stacking order places the content over the background (or explicitly set that with z-index). You're now free to animate any property (autoAlpha) on the background-image div without affecting the content div.

 

See the Pen yvNbqz by sgorneau (@sgorneau) on CodePen

 

Of course, you'd probably want to mess with some layout options to accommodate things like dynamic height (based on the content), but this should get things going in the right direction.

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

@Shaun Gorneau Thank you for your replie, this makes total sense. I kind off was hoping their would be a alternative. If i use this line of code though:

 

tl.to($img,1,{backgroundImage:'url("")'},"-=2") ( i could have used .set that also works )

the content in the container doesn't get removed. 

 

For now i will keep my current layout, but for the next time i will keep this in mind. 
Learned another thing today :) Thank you
 

Link to post
Share on other sites
2 minutes ago, timdt said:

If i use this line of code though:

 

tl.to($img,1,{backgroundImage:'url("")'},"-=2") ( i could have used .set that also works )

the content in the container doesn't get removed.
 

 

Yeah, animating any of the background properties won't affect the element's children since the background doesn't cascade. Too bad there isn't a "background-opacity" property! So you can change a background's color or position without affecting the element's content. Opacity, on the other hand, affects the the element (not simply its background) and all its children.

  • Like 1
Link to post
Share on other sites

Yes! Maybe something for in the future :) Would make things easier. But if i would have done things right the first time i would not have encountered this problem in the first place. 

Link to post
Share on other sites

That's not to say you haven't done things right! Your markup makes sense and is structured appropriately for its static (and default) purpose. I'm actually not a fan of bending markup to make Javascript work; I would actually use Javascript to modify the markup to make the Javascript work (i.e. progressive enhancement). That has a nice consequence; where Javascript isn't available (environment, errors, etc.) you get an appropriate outcome ... basic, unobstrusive HTML and CSS.

 

So, in your case (and using my pen as an example) I would actually do something like this ...

 

See the Pen EQjwZQ by sgorneau (@sgorneau) on CodePen

 

Now, I did the manipulation in a fairly verbose way ... it could be consolidated ... but I spelled it out to illustrate the manipulation. If this were to affect multiple elements on the page I would have wrapped the manipulation in an .each().

 

 

  • Like 3
Link to post
Share on other sites
3 hours ago, Shaun Gorneau said:

Too bad there isn't a "background-opacity" property! So you can change a background's color or position without affecting the element's content. Opacity, on the other hand, affects the the element (not simply its background) and all its children.

 

You'll be able to do that in the future. Requires Chrome 65 or experimental web platform features enabled to view.

https://lab.iamvdo.me/houdini/background-properties/

 

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×