その場で展開できる「続きを読む」ボタンのサンプル2(jQuery版)

下記のボックス内にある「続きを読む」ボタンをクリックすると、その場で(ページ移動することなく)続きが追加表示されます。その際、ボタンはアニメーション効果と共に消え、後続はアニメーション効果と共に表示されます。 ここではjQueryを利用して作っています。作り方の解説は記事『その場で展開できる「続きを読む」ボタンの作り方』の本文をご覧下さい。

 二人の若い紳士が、すつかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲をかついで、白熊のやうな犬を二疋つれて、だいぶ山奥の、木の葉のかさかさしたとこを、こんなことを云ひながら、あるいてをりました。
「ぜんたい、こゝらの山は怪しからんね。鳥も獣も一疋も居やがらん。なんでも構はないから、早くタンタアーンと、やつて見たいもんだなあ。」
「鹿の黄いろな横つ腹なんぞに、二三発お見舞まうしたら、ずゐぶん痛快だらうねえ。くるくるまはつて、それからどたつと倒れるだらうねえ。」

続きを読む

 それはだいぶの山奥でした。案内してきた専門の鉄砲打ちも、ちよつとまごついて、どこかへ行つてしまつたくらゐの山奥でした。
 それに、あんまり山が物凄いので、その白熊のやうな犬が、二疋いつしよにめまひを起して、しばらく吠つて、それから泡を吐いて死んでしまひました。
「じつにぼくは、二千四百円の損害だ」と一人の紳士が、その犬の眼ぶたを、ちよつとかへしてみて言ひました。
「ぼくは二千八百円の損害だ。」と、もひとりが、くやしさうに、あたまをまげて言ひました。
 はじめの紳士は、すこし顔いろを悪くして、じつと、もひとりの紳士の、顔つきを見ながら云ひました。
「ぼくはもう戻らうとおもふ。」

「さあ、ぼくもちやうど寒くはなつたし腹は空いてきたし戻らうとおもふ。」
「そいぢや、これで切りあげやう。なあに戻りに、昨日の宿屋で、山鳥を拾円も買つて帰ればいゝ。」
「兎もでてゐたねえ。さうすれば結局おんなじこつた。では帰らうぢやないか」
 ところがどうも困つたことは、どつちへ行けば戻れるのか、いつかう見当がつかなくなつてゐました。
 風がどうと吹いてきて、草はざわざわ、木の葉はかさかさ、木はごとんごとんと鳴りました。

続きを読む

「どうも腹が空いた。さつきから横つ腹が痛くてたまらないんだ。」
「ぼくもさうだ。もうあんまりあるきたくないな。」
「あるきたくないよ。あゝ困つたなあ、何かたべたいなあ。」
「喰べたいもんだなあ」
 二人の紳士は、ざわざわ鳴るすゝきの中で、こんなことを云ひました。
 その時ふとうしろを見ますと、立派な一軒の西洋造りの家がありました。
 そして玄関には
RESTAURANT
西洋料理店
WILDCAT HOUSE
山猫軒
といふ札がでてゐました。

※「続きを読む」ボタンの直前にある数行は、(比較的新しいブラウザでは)グラデーションで少しずつ消えていくように見えています。
※ページを再読み込みすれば、再度「続きを読む」ボタンが現れます。
※サンプル中で使用している文章は、宮沢賢治作「注文の多い料理店」の冒頭です。


解説記事『その場で展開できる「続きを読む」ボタンの作り方』に戻る