제이쿼리 이미지 스크롤 페이드 인 채택완료
안녕하세요.
http://freevu.net/" target="_blank">http://freevu.net/
상기 홈피에 이미지 및 텍스트가 스크롤에 반응하여 페이드인 되어집니다.
위 같은 효과를 아래의 텍스트 및 이미지에 똑같이 연출하려고 하면,
스크립트에는 무엇을 넣어야 하며 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개
웹쪽은 그리 전문가가 아닙니다만. 구글링하니 똑같은 기능을하는 이런 녀석이 있내요, 이걸 활용하면 되지 않을깧바니다.
https://scrollrevealjs.org/" target="_blank">https://scrollrevealjs.org/
답변에 대한 댓글 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>