사진 전환이있는 페이드 아웃

Question

내가 원하는 사진처럼 페이드 인 할 때 450px 아래로 스크롤하지만 다시 스크롤하면 화면이 사라집니다. 나는 그 변화와 함께 뭔가를 추측한다. 여기 당신이 무슨 뜻인지 볼 수 있도록 코드와 GIF입니다 : 당신이 효과를 페이드 "반전"이 필요한 경우

https://gyazo.com/b27b6ba31e29a16f8cd0b862ffbfc1a0

INDEX

<div class="logo_aftereffects"></div> 
<div class="logo_premierepro"></div> 

     <script> 
       $(window).scroll(function() { 
       if($(window).scrollTop() >= 200) { 
        $('div#myTopnav').addClass('scrolled'); 
        $('a').addClass('scrolled2'); 
       if($(window).scrollTop() >= 430) { 
        $('div.sidebar').addClass('scrolled3'); 
        $('div.logo_premierepro').addClass('scrolled4'); 
        $('div.logo_aftereffects').addClass('scrolled5'); 
        } else { 
        $('div.sidebar').removeClass('scrolled3'); 
        $('div.logo_premierepro').removeClass('scrolled4'); 
        $('div.logo_aftereffects').removeClass('scrolled5'); 
        } 
        } else { 
        $('div#myTopnav ').removeClass('scrolled'); 
        $('a').removeClass('scrolled2'); 

        } 
       }); 
       function myFunction() { 
        $("#myTopnav").toggleClass('responsive'); 
        $("div.sidebar").toggleClass('responsive'); 

       } 
     </script> 

CSS

.logo_aftereffects { 
     background: url('/images/aftereffects_icon.png'); 
     width: 64px; 
     min-height: 64px; 
     background-size: cover; 
     margin-top: 50px; 
     float: left; 
     opacity: 0; 

    } 

    .logo_premierepro { 
     background: url('/images/premierepro_icon.png'); 
     width: 68px; 
     min-height: 68px; 
     background-size: cover; 
     margin-top: 49px; 
     float: right; 
     opacity: 0; 
    } 

    .scrolled { 
     min-height: 10px; 
     color: inherit; 
     background: black; 
     transition: 0.35s all ease-in-out; 
     opacity: 0.7; 
    } 

    .scrolled2 { 
     color: white; 
     opacity: 1; 
    } 

    .scrolled3 { 
     transition: .85s all ease-in-out; 
     background: #d2a679; 
     opacity: 0.8; 
    } 

    .scrolled4 { 
     opacity: 1; 
     transition: 1s all ease-out; 
     float: right; 
     margin-right: 38%; 
    } 

    .scrolled5 { 
     opacity: 1; 
     transition: 1s all ease-out; 
     float: left; 
     margin-left: 38%; 
    } 

Answer 1

는, 원래 요소에 transition 속성을 명시 적으로 제공해야합니다 (.logo_aftereffects & .logo_premierepro).

.logo_aftereffects { 
     background: url('..'); 
     width: 64px; 
     min-height: 64px; 
     background-size: cover; 
     margin-top: 50px; 
     float: left; 
     opacity: 0; 
     transition: 1s all ease-out; //added 
    } 

    .logo_premierepro { 
     background: url('..'); 
     width: 68px; 
     min-height: 68px; 
     background-size: cover; 
     margin-top: 49px; 
     float: right; 
     opacity: 0; 
     transition: 1s all ease-out; //added 
    }