div 높이가

Question

에 도달하면 jquery 슬라이드 텍스트가 오른쪽에서 왼쪽으로 이동하므로 div를 밀어서 일종의 작업을 사용하여 오른쪽에서 왼쪽으로 텍스트를 슬라이드하려고합니다. 사용자가 div 높이로 스크롤하여 슬라이드를 트리거하면 해당 슬라이드가 움직입니다.

$(document).ready(function() { 
    $(window).scroll(function() { 
     var top = $(this).scrollTop(); 
     var aTop = $('.right-slide').height(); 
     if(top >= aTop){ 
      $(this).animate({right:'+=100%', opacity:'1'},1000); 
     } 
    }); 
}); 

및

됐지 슬라이드 { 오른쪽로서 CSS : -100 %; display : 블록; 불투명도 : 0.5; 위치 : 상대적; }

및 HTML

<section id="about" class="about"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2>About Me</h2> 
       <hr class="small"> 
       <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elite. <br> 
        Morbi nulla est, molestie varius porta non, pharetra </p> 
      </div> 
     </div> 
     <div class="row spacer"> 
      <div class="col-lg-4"> 
       <h3 class="thicker left-slide">Name</h3h3> 
       <h4 class="left-slide">Jeremiah Mejia</h4> 
       <h3 class="spacer left-slide thicker">Date of Birth</h3> 
       <h4 class="left-slide">1 July 1991</h4> 
       <h3 class="spacer left-slide thicker">Birth Place</h3> 
       <h4 class="left-slide">New Zealand</h4> 
      </div> 
      <div class="col-lg-4 fade text-center"> 
       <img src="img/rsz_1dsc_0035.jpg" class="img-circle "> 
      </div> 
      <div class="col-lg-4 "> 
       <h3 class="thicker right-slide">City</h3> 
       <h4 class="right-slide">Auckland, New Zealand</h4> 
       <h3 class="spacer right-slide thicker">Email</h3> 
       <h4 class="right-slide">fwaswf.fwasd@ymail.com</h4> 
       <h3 class="spacer right-slide thicker">Contact Number</h3> 
       <h4 class="right-slide">123 145 6789</h4> 
      </div> 
     </div> 
     <div class="row spacer"> 
      <div class="col-lg-12 text-center"> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero nulla, tristique a neque a, pharetra iaculis justo. Duis velit purus, volutpat ac nulla at, dapibus convallis augue. Etiam vitae fringilla erat. Curabitur ornare tristique justo, eget vulputate elit pellentesque ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi molestie mattis turpis vitae lacinia. Mauris viverra odio non purus ornare, non aliquam tellus volutpat. Maecenas feugiat faucibus magna, eu feugiat purus mollis ac. Sed vestibulum ac velit sit amet viverra. Etiam semper laoreet est, vel maximus ligula imperdiet vel. Pellentesque posuere orci magna, eget luctus nulla vulputate ac. Nunc nec eleifend libero, eu consequat velit. 
       </p> 
       <br> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero nulla, tristique a neque a, pharetra iaculis justo. Duis velit purus, volutpat ac nulla at, dapibus convallis augue. Etiam vitae fringilla erat. Curabitur ornare tristique justo, eget vulputate elit pellentesque ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi molestie mattis turpis vitae lacinia. Mauris viverra odio non purus ornare, non aliquam tellus volutpat. Maecenas feugiat faucibus magna, eu feugiat purus mollis ac. Sed vestibulum ac velit sit amet viverra. Etiam semper laoreet est, vel maximus ligula imperdiet vel. Pellentesque posuere orci magna, eget luctus nulla vulputate ac. Nunc nec eleifend libero, eu consequat velit. 
       </p> 
      </div> 
     </div> 
    </div> 
    <!-- /.container --> 
</section 

로 질문은, 왜 내 코드가 작동하지 않습니다입니까? 또한 나는 부트 스트랩 프레임 워크를 사용하여 추가해야한다.

은 어떤 도움이 크게 난이 사람을 도움이 될 것입니다 경우 몰라요,

Answer 1

확인 감사합니다,하지만 난 마침내 해결책을 찾았습니다. 내가 생각 트릭은 단지 빈 CSS 클래스를 사용하는 것입니다

됐지 슬라이드 { }

과에가는 뭐죠의 내용의 스타일을하는 데 사용되는 장소 홀더 클래스의 종류 그 "오른쪽 슬라이드"클래스 안에 있으십시오. 나를 위해, 나는 사용했다

.place-holder { 디스플레이 : 인라인 블록; margin-left : 40 %; 불투명도 : 0.01; }

그 후, 당신은 당신의 헤더 태그에 빈 "됐지 슬라이드"클래스를 지정하고 해당 헤더 태그 내에서 "장소 보유자"클래스를 사용하는 "범위"클래스를 사용합니다. 그것은이

 &lth3 class=&quotright-slide">&ltspan class=&quotplace-holder"&gtContact Number</span></h3>

같은과 자바 스크립트를 보일 것이다 그래서, 애니메이션 헤더 각각에 대해이

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var divs_width = $('.right-slide').width(); 
     var spans_width = $('.place-holder').width(); 
     var aTop = $('.right-slide').height(); 
     var right_margin = divs_width - spans_width; 
     if($(this).scrollTop()>=aTop){ 
      $(".place-holder").animate({"marginLeft": "0%", 'opacity': '1'}, "slow"); 
     } 
    }); 
}); 

내가했던 것처럼 종류의 갔다 "marginLeft" 태그는 오른쪽에서 왼쪽으로 슬라이드하도록 선택했습니다. 나는 아직도 웹 개발, JQuery 및 물건에 대해 새로운 것을 알았지 만, 이것이 나를위한 해결책이었고 다른 도움을 줄 수 있기를 바란다.