제이쿼리 이미지 스크롤 페이드 인
본문
안녕하세요.
상기 홈피에 이미지 및 텍스트가 스크롤에 반응하여 페이드인 되어집니다.
위 같은 효과를 아래의 텍스트 및 이미지에 똑같이 연출하려고 하면,
스크립트에는 무엇을 넣어야 하며 id값을 어떻게 줘야 하는지요?
<section id="features" class="section features2">
<div class="container">
<div class="row">
<div class="col-md-6" style="float:right;">
<div class="features2-content">
<h2 class="section-title">Completely flexible, create the landing page <span>you want</span></h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<ul>
<li><i class="fa fa-check"></i> Sed ut perspiciatis unde omnis </li>
<li><i class="fa fa-check"></i> iste natus error sit voluptatem accusantium </li>
<li><i class="fa fa-check"></i> doloremque laudantium, totam rem aperiam.</li>
</ul>
</div>
</div>
<div class="col-md-6"> <img class="img-responsive" src="images/feature-screen2.png"> </div>
</div>
</div>
</section>
답변 2
그런데 이미지와 텍스트에 효과를 각각 주려고 아래와 같이 스크립트를 두번 넣으니깐
맨 마지막만 적용되는데, 둘다 주는 방법은 잇을까요???
<div id="banner" class="container">
<div class="col-md-5 col-sm-12">
<div class="fooContainer">
<div class="fooReveal"> <img class="banner-img img-responsive" src="images/app-screen.png"> </div>
</div>
<script>
// use rotation in reveal configuration
sr.reveal('.fooReveal', { container: '.fooContainer', rotate: {x: 65} });
</script>
</div>
<div class="col-md-7 col-sm-12">
<div class="banner-text" >
<div class="myReveal">
<h1>Beautiful and Elegant App Landing Page for <span>Startup</span> business</h1>
<p>Amazing, clean and modern landing page template for showcase your mobile application to the world. Best Start Up For Your New App. </p>
<!-- <div class="banner-btn"><a href="#"><img src="images/apple-store-btn.png"></a> <a href="#"><img src="images/google-store-btn.png"></a> </div> -->
</div>
</div>
<!-- banner text section-->
<script>
// use rotation in reveal configuration
window.sr = ScrollReveal();
sr.reveal('.myReveal', { origin: 'bottom', duration: 2000, delay: 1000 });
</script>
이제 봤습니다. 그건 모르겠습니다.
감솨~~~ 2시간 찾아도 못찾은걸,,,,,,ㅜㅠ
