jQueryを利用して、スクロールにあわせて一瞬だけ画像（写真）やテキストを表示させてみました。

画面を下にスクロールしてみてください。画像やテキストが一瞬表示され、また消えていきます。

背景などでも使えそうですね。

どんな感じか、デモ画面をご覧ください＾＾

↓以下が実際のソースサンプルです。

<script>
$(function () {
	
	var $win = $(window),
		winHeight = $win.height(),
		scroll,
		cur,
		pos;

	$win.on("scroll", function () {
		$('.js-flashText').each(function () {
			scroll = $win.scrollTop();
			cur = $(this);
			pos = cur.offset().top;
			if (scroll > pos - winHeight / 2) {
				cur.addClass('visible');
			} else if (scroll === 0) {
				cur.removeClass('visible');
			}
		});
	});
	
	$('a[href^=#]').click(function () {
		var speed = 600,
			href = $(this).attr("href"),
			target = $(href === "#" || href === "" ? 'html' : href),
			position = target.offset().top;
		$("html, body").animate({scrollTop: position}, speed, "swing");
		return false;
	});

});	
</script>

.wrapper {
	width: 100%;
	height: 100%;
	text-align: center;
}

.header h1,
.contents h1 {
	margin-bottom: 30px;
}

.contents {
	width: 100%;
	height: 100%;
	display: table;
}

.contents.top {
	background:#84E084;
}
.contents.bottom {
	background: #F2E74D;
}

.contents__inner {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: 640px;
	height: 100vh;
	margin: 0 auto;
	padding: 100px 24px 0;
}

.contents__inner p {
	margin-bottom: 50px;
}

/* --------------------------------------------------- flash */
.flash-text {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

.visible .flash-text {
	-webkit-animation: fade-in-out 2s ease 0s forwards;
	animation: fade-in-out 2s ease 0s forwards;
}
.flash-text p {
	display: table-cell;
	vertical-align: middle;
	font-size: 90px;
	text-align: center;
	color: #000;
}

@-webkit-keyframes fade-in-out {
	0% {visibility: hidden; opacity: 0;}
	50% {visibility: visible; opacity: 1;}
	100% {visibility: hidden; opacity: 0;}
}

@keyframes fade-in-out {
	0% {visibility: hidden; opacity: 0;}
	50% {visibility: visible; opacity: 1;}
	100% {visibility: hidden; opacity: 0;}
}

@media screen and (max-width: 500px) {
	.flash-text p {
		font-size: 45px;
	}
}

	<div class="wrapper">
		<div class="contents top">
			<div class="contents__inner">
				<h1>スクロールと連動して一瞬だけ画像（写真）を表示させます。</h1>
				<p>下へスクロールしてみてください。画像が表示されます。</p>
			</div>
		</div>
		<div class="contents middle js-flashText">
			<div class="flash-text"><p><img src="money.jpg" width="900" height="600"></p>
		  </div>
			<div class="contents__inner">
				<p>ここのセクション上部が、画面の半分くらいのところまでいったらテキストが表示されます。</p>
				<p>さらに下へスクロールすると別のテキストが表示されます。</p>
			</div>
		</div>
		<div class="contents bottom js-flashText">
			<div class="flash-text"><p>How much!合計いくらでしょう？</p></div>
			<div class="contents__inner">
				<p>トップへ戻って、再度下へスクロールするとまた画像が表示されます。</p>
				<p><a href="#">TOPへ</a></p>
			</div>
		</div>
	</div>

今回、参考にさせていただいたのは、
『【jQuery】スクロールと連動して一瞬だけテキストを表示する』さんです。
ありがとうございます。

デモページは、こちら