jQuery

【jQuery】スクロールするときにテキストをフェードアウトさせるFancyFade

March 4, 2017

FancyFadeはスクロールするときにテキストをフェードアウトさせるためのエフェクト

HTML

<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
...
	<div class="page" id="page1">
		<div class="page-bg" id="page1-bg"></div>
		<div class="fade-container" id="page1-fade-container">
			<div class="centering-box" id="page1-centering-box">
				<p>
					<span class="page-title" id="page1-title">The first computer system that understands taste.</span>
					<br><br><br>
					<span class="page-body" id="page1-body">While researchers have experimented with increasingly complex mathematical models and “big data” techniques, the underlying frameworks of recommendation technology haven’t changed much since the late 1990s. <br><br>

					Engie takes a new approach to recommendations. Instead of focusing on traditional probability calculations based on user ratings, Engie weaves a holistic prediction algorithm together with systems that more deeply understand culture and taste. It's uncannily accurate, insanely fast, massively scalable, and works on all kinds of content.
					<br><br>
					Our goal is extraordinary: to change the way people discover the world’s content. So our engine is, too.
					<br><br>
					<a href="http://tamber.com">tamber.com</a></span>
				</p>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="fancyfade.js"></script>

Download