<style>
.fade {
filter: blur(15px);
transition: filter 0.3s linear 0s;
}
</style><html>
<img class="fade" src="https:....."alt="....">
<img class="fade" src="https:....."alt="....">
<img class="fade" src="https:....."alt="....">
...
...
</html>
<script>
$(window).scroll(function () {
$('.fade').each(function (i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
$(this).css("filter", "none")
}
});
});
</script>
css 속성중 filter 속성을 이용하면 간단하다.
제이쿼리를 이용해 간단히 구현했지만 추후 옵저버를 이용해 리펙토링 코드도 남겨놓겠다.
