I recently saw this website - https://www.wokine.com/ - where on scroll() the background-position changes from linear gradient with two colors to slide one color off the screen. I learned how they created the split colors with linear-gradient, but I can't figure out how they are doing the animation with the red color 'pushing' the white color horizontally off the screen.
Here is one of the more recent things I've tried. Ultimately, I want to do it on scroll but I was trying it on click for now. I kept the hover style in there for testing.
$(document).ready(function() {
$("button").click(function() {
$(".box").css('background-position': 'left');
});
});.box {
width: 100px;
height: 100px;
display: inline-block;
background-size: 200% 200%;
transition: background-position 1s;
background-image: linear-gradient(to right, blue 50%, green 0);
background-position: right;
}
.box:hover {
background-position: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box"></div>
<br>
<button>Toggle background position</button>Following the link you shared, I'm using Scroll event and that's your ultimate goal from what I understand.
So we can use $(document).ready() or $(window).on('load',.. to initiate with the first animation using the class .intro.
Then depending on scroll direction we toggle between two classes .slideleft and .slideright. If that's a confusing choice of class names you can call them Up and Down.
$(document).ready(function() {
$('.box').addClass('intro');
});
(function() {
var lastScroll = 0;
$(window).on('scroll', function() {
if ($(".box").is(".intro")) {
$('.box').removeClass('intro');
}
var activeScroll = $(this).scrollTop();
//We check the scroll direction
cond = Boolean(activeScroll > lastScroll);
//each background sliding effect follow it's scroll direction
$(".box").toggleClass('slideleft', cond); //DownScroll
$(".box").toggleClass('slideright', !cond); //UpScroll
lastScroll = activeScroll;
});
}());.box {
width: 100%;
height: 200px;
display: inline-block;
background-size: 200% 200%;
transition: background-position 1s;
background-image: linear-gradient(to right, #ff5851 50%, #F8F8F8 50%);
background-position: left;
}
.intro {
background-position: 50%;
}
.slideleft {
background-position: left center;
}
.slideright {
background-position: center center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="lorem">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다