【Samurai】jQueryとCSS3アニメーションで作るもっとクリックしたくなる「ページトップ」ボタン
Ninjaな「ページトップ」ボタンが思いのほか、好評で様々な反応をいただきました。「いつ使うんだよ」とツッコミを入れられるかと思いきや「いつか使う」なんてコメントまで付いたりしてビックリしております。そんな中、次なるネタのリクエストをいただいので、挑戦してみました。
Samuraiページトップボタン
こんなリクエストをいただきました。
@squeezejp 面白かったので今度は侍ネタで…w
— TOSHIYUKI (@patch4518) September 10, 2013
では、早速こちらをご覧ください。一緒に表示されるYoutubeを再生してから、ボタンにマウスオーバー&クリックしてみてください。
サンプルページ »
・
・
・
・
・
・
・
・
・
・
分かりにくいかもしれませんが、ちょんまげが伸びています(汗)侍というよりも殿様になってしまいますが・・・
作り方は、前回の『【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン』をもとに画像だけ差し替えてあります。
また、今回もこちらのシルエット素材を使用させていただきました。
・サムライのシルエット | 商用フリーで使える影絵素材サイト シルエットデザイン
おわりに
いかがでしたでしょうか。次なるリクエストどしどしお待ちしており・・・ません!!
スクリプトは、自由に使っていただいて大丈夫なので、どなたかチャレンジしませんか!?(汗)
Web関連ニュース&ブログ更新情報をチェックする
TwitterやFacebookではブログの更新情報とあわせて、Webやデザイン関連のニュースをお届けしています。
Twitterでフォローする
RSSリーダーで購読する
Facebookページを「いいね!」する
新着記事
![【図解あり】吾輩は猫である【SEO対策】](https://squeeze.jp/wp/wp-content/uploads/2017/07/NEKONEKOIMG_7878_TP_V-e1499176068544-150x150.jpg)
![71万円の札束で厚さも完全再現!iPhone6 Plusの大きさは、ほぼ1万円札と同じということで試してみた。](https://squeeze.jp/wp/wp-content/uploads/2014/09/eyecatch-iphone6-plus-size-150x150.jpg)
![グリコのおまけ『AR(拡張現実)ドラえもん』が凄過ぎて、もはや別キャラクターw【台紙DLリンクあり】](https://squeeze.jp/wp/wp-content/uploads/2014/07/eyecatch-ar-doraemon-150x150.jpg)
人気の記事
![](https://squeeze.jp/wp/wp-content/uploads/2013/09/eyecatch-image-trick-tweet-150x150.jpg)
![](https://squeeze.jp/wp/wp-content/uploads/2013/02/eyecatch-heading-design-css-only_256x256-150x150.png)
![](https://squeeze.jp/wp/wp-content/uploads/2013/01/eyecatch-heading-design-border-css_256x256-150x150.png)
おすすめ書籍