fadeIn by Scroll

by Iman Fakhar

HTML

<div>
  <section class="section active" style="background-color:sandybrown;background-image:url('http://userscontent2.emaze.com/images/9c34587b-ac55-461d-ba7c-ea2eb026ab43/df2f0b76-f3af-48e3-bfa1-14daebab8e66image24.jpeg')">
<br>
  </section>
  <section class="section" style="background-color:lawngreen">
 <div class="div">
  <div>
<h2>عنوان متن نمونه</h2>
<p>این متن نمونه یک متن آزمایشی است که بدوندر نظر گرفتن مفهوم کلی و یا پیامی خاص 
صرفا برای جایگیری در محدوده متنی طرح‌های اجرایی و پر نمودن فضاها از آن استفاده 
می‌شود تا طرح نمایی نزدیک به اقع بیابد در این متن انواع تگهای HTML می‌تواند اجرا 
شود مانند تگ <a href="#">پیوند</a> یا تگ <strong>برجسته‌ نمودن</strong> تگ <em>
اریب نمودن</em> تگ <u>زیرخط‌‌ دار</u> نمودن حروف یا یک 
لیست ساده مانند: </p>
<ul>
	<li>گزینه اول در لیست </li>
	<li>گزینه دوم در لیست </li>
	<li>گزینه سوم در لیست</li>
</ul>
<p>یک لیست شماره دار مانند:</p>
<ol>
	<li>گزینه اول در لیست </li>
	<li>گزینه دوم در لیست </li>
	<li>گزینه سوم در لیست</li>
</ol>
<p>یا یک لیست درختی مانند:</p>
<ul>
	<li>گزینه اول در لیست 
	<ul>
		<li>گزینه اول فرزند اول </li>
		<li>گزینه دوم فرزند اول 
			<ul>
				<li>گزینه اول فرزند دوم </li>
				<li>گزینه دوم فرزند دوم 
					<ul>
						<li>گزینه اول فرزند سوم </li>
						<li>گزینه دوم فرزند سوم </li>
						<li>گزینه سوم فرزند سوم</li>
					</ul>
				</li>
				<li>گزینه سوم فرزند دوم</li>
			</ul>
		</li>
		<li>گزینه سوم فرزند اول</li>
	</ul>
	</li>
</ul>
<p>یا یک لیست با کلاس مشخص</p>
<ul class="list-group">
	<li class="list-group-item">گزینه اول در لیست </li>
	<li class="list-group-item">گزینه دوم در لیست </li>
	<li class="list-group-item">گزینه سوم در لیست</li>
</ul>
<p>این متن ممکن است برای پر نمودن فضای مورد نظر یک یا چند بار تکرار شود</p>
   </div>
   </div>
  </section>
  <section class="section" style="background-color:deepskyblue">
<div class="div">
<div>
<h2>عنوان متن نمونه</h2>
<p>این متن نمونه یک متن آزمایشی است که بدوندر نظر گرفتن مفهوم کلی و یا پیامی خاص 
صرفا برای جایگیری در محدوده متنی طرح‌های اجرایی و پر...

CSS

html {
	direction:rtl
}
body {
  margin: 0;
  padding: 0;
  color:#FFF;
}

.section {
  background-attachment: fixed;
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section>div {

  background-attachment: fixed;
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size:3vw;
}
.section>div>div {
	padding:50px;

}
.section h1 {
  text-align: center;
  font-size: 10vw;
  color: #FFF;
}

JavaScript

jQuery(document).ready(function() {
  jQuery(".section,.section>.div").each(function(i) {
    var h = jQuery(window).height();
    var h = h + "px";
    jQuery(this).css({
      'minHeight': h,
    });
    
  });
  jQuery(".section>.div").fadeTo(100, .001);

  function sectionAutoScroll() {
    setTimeout(function() {
      jQuery(".section.active").each(function() {
        if (!jQuery(this).is(":last-child")) {
          var pos = jQuery(this).next(".section").position();
          jQuery(this).removeClass("active").next(".section").addClass("active");
          jQuery("html,body").animate({
            'scrollTop': pos.top
          }, 3000);
        }
      })

    }, 9000);
  }
  sectionAutoScroll();
  jQuery(window).scroll(function() {
  var s = jQuery(this).scrollTop();
  jQuery(".section").each(function() {
  	var pos = jQuery(this).position();
  	var h = jQuery(this).height();
  	var min = parseFloat(pos.top)-100;
  	var max = parseFloat(min)+parseFloat(h)+300;
    jQuery(this).removeClass("active");
  	if(s>=min && s<max) {
  	jQuery(this).find(".div").stop().fadeTo(800, 1);
  	}
  });
  });
});