Page scroll

There is such a picture. It is necessary that it continuously changes color to yellow from top to bottom. Is it possible to do this, and if so, how?

  • Firstly, PNG cannot change color by itself (without duplication or even some tricks), secondly, what does it mean "continuously"? Yellow has a yellowish ceiling. I would say that without svg will not do here - MedvedevDev
  • @Khipster, if you move, it will move ... you probably meant to put it on top and change the height. But then there will not be a smooth transition ... of course it depends on the specific task, here it seems to me that there is still a smooth color transition - MedvedevDev
  • @MedvedevDev I will try to describe in detail .... this picture is placed on the page, you need to make an animation with the help of which, the picture gradually gradually from top to bottom will be filled with yellow. And you need to make sure that this animation is repeated - Nikita Knyazev
  • @MedvedevDev Should just be an animation - Nikita Knyazev
  • @MedvedevDev yes, the picture turns yellow, then stained gray and circle again from top to bottom - Nikita Knyazev

4 answers 4

Really fun task ... forgive me all who see this my "masterpiece", I honestly tried ...

.icon { position: relative; width: 66px; height: 77px; height: font-size: 0; } .icon_container { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 0; min-height: 100%; font-size: 0; overflow: hidden; animation: colorizeOut 1.5s linear infinite; } .icon_container__yellow { top: 0; bottom: auto; animation: colorizeIn 1.5s linear infinite; } .icon_image { position: absolute; top: auto; bottom: 0; width: 100%; } .icon_container__yellow .icon_image { top: 0; bottom: auto; } @keyframes colorizeIn { 0% { min-height: 0; } 100% { min-height: 77px; } } @keyframes colorizeOut { 0% { min-height: 77px; } 100% { min-height: 0; } } 
 <div class="icon"> <div class="icon_container"> <img src="//i.imgur.com/Ou00Phd.png" class="icon_image"> </div> <div class="icon_container icon_container__yellow"> <img src="//i.imgur.com/yCnqsy6.png" class="icon_image"> </div> </div>

  • Already close to the truth. You can only fix it so that after filling it with yellow color, the picture immediately returns to its original state and then turns yellow again - Nikita Knyazev
  • Well, yo, and for so long it was with this effect that I fought .... well, no, no, the owner is a master, now I’ll get rid of too much - MedvedevDev
  • @Nikita Knyazev I removed the superfluous, now I see what I need, but I liked the old version more, trying to get it in vain ( - MedvedevDev
  • I put the animation for 2.5 seconds and it became straight perfect. Thank you very much and sorry that I tormented you)) - Nikita Knyazev
  • @Nikita Knyazev is actually one of the most non-trivial tasks in recent days (even though it seems so), it was interesting, and the coolest thing is that a couple of interesting solutions were thrown in))) - MedvedevDev

Fuh, you know, it was difficult. I once looked for this, but did not find it. And right now for 20 minutes more googled - and found.

The whole snag in the mask, he has poor support .

 body { margin: 0; padding: 0; } div.wrapper-for-image { position: relative; } div { width: 66px; height: 77px; } div.back { position: absolute; background: url(https://i.stack.imgur.com/7lSyw.png) no-repeat; } div.front { position: absolute; -webkit-mask: url(https://i.stack.imgur.com/7lSyw.png) no-repeat; background: linear-gradient(yellow, #504f4f) no-repeat; background-position: 0px -77px; background-size: 100%; transition: background-position 1s ease 0s, background-size 1s ease 0s; } div.front:hover { background-position: 0px 0px; background-size: 200%; } 
 <div class="wrapper-for-image"> <div class="back"></div> <div class="front"></div> </div>

  • Thank! Could use if not bad browser support. And one more thing, it works only when you hover. - Nikita Knyazev
  • @NikitaKnyazev, well, yes, if not for the support ... And what’s the point of pointing? Do as you please, I did the hover purely to show how it works. You can also hang a static animation. - VostokSisters
  • one
    Thanks anyway, it was useful to learn about such a property - Nikita Knyazev

You can simply make several versions of the color of this picture, and through Jquery to make them change

  • Need without using a script - Nikita Knyazev
  • Write to SVG. So it will be easier and without a script. - Eugen Eray
  • And how to do it using svg? Is there an example? - Nikita Knyazev

Hue-rotate example

Can i use

 .b{ display: inline-block; vertical-align: middle; border: 1px solid #ccc; position: relative; } .b:before{ content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 0; background: url(http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png) no-repeat 0 0; -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); animation: animPicture 3s linear infinite; } @keyframes animPicture{ 0{ height: 0; } 99%{ -webkit-filter: hue-rotate(0); filter: hue-rotate(0); } 100%{ height: 100%; } } 
 <div class="b"> <img src="http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png" alt="" /> </div>

Also as an option to make 2 pictures and animate them.