WEBページスクロール時に左右からメッセージをピョコっと出す

Question

Webページを下にスクロールすると設定した箇所で右からピョコ次は左からピョコと吹き出しのようなメッセージBOXを出したいのですが、これはどのようにすると実装出来ますでしょうか？

技術的にこのようにすれば良いという回答やわかりやすいアドバイスを受け付けております。

また、サンプルサイトなどあれば教えて頂けると嬉しく思います。

Answer 1

・最初は要素は画面外に表示しておく
・一定量スクロールしたら、
・要素にcssアニメーションで左右から出てくるようにする

という流れになるかと。下記、ざっくりですが。

$(window).on('scroll', function(e){   <<< スクロールしたら
	var scrollTop = $(window).scrollTop();   <<< スクロール量
	if (scrollTop > threshold) {   <<< スクロール量が一定値（例えばwindow.innerHeight/2）より超えたら
		$('#box01').addClass('anim');   <<< 要素にクラスをaddする
	}
});

#box01 {
	position: relative;
	top: 800px;
	right: -400px;   <<< 最初は画面外にしておく
	height: 100px;
	background: #00f;
	color: #fff;
}
#box01.anim {
	right: 0;   <<< 画面内にする
	transition: .5s all;   <<< アニメーションさせる
}

Answer 2

jQueryで言うと、

• イベントのきっかけ：スクロール
• イベント時にやること：スクロール位置（scrollTop）と動かす対象の位置（offset().top）の算出。

および、それらの位置関係を元にした、対象を動かす条件との比較。
offset().topだけでは、コンテンツの天辺の位置しか分からないので、コンテンツの底の位置が欲しい場合は、offset().top + コンテンツの高さ$('.contents').height()で算出できます。

• 条件を満たした時に実行すること：コンテンツをanimate等で動かしたり、動きに必要なクラスの付け外しを行う。

おおよそこんな感じです。

Answer 3

スクロール量が表示ブラウザサイズの3／4を越えたら、右からピョコ、4/5を越えたら左からピョコ、
ピョコっと出た奴は、自分の表示が完了してから2秒後にフェードアウトしつつ画面外にニョロっと消える。

こんな感じ？

スクロールイベントをトリガーにして、座標計算して範囲チェックして、ピョコっと出てくる物体をアニメーションさせればオッケーです。
こういうのを紹介してるhpは知りません。

何ができなくて、何ができるのか自分流のコードを質問欄に追加してくれると、もう少し気が利いたアドバイスができるかもしれません。jquery を使うのか、cssだけで何とかしたいのか、ハイブリッドでもオッケーなのか、情報が必要です。