• ベストアンサー

画像の一部分をスクロールして表示する方法

画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト:http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示のサイトではjavascriptのライブラリを利用して実現しているようです。 jqueryを利用した、スライドショー用のCrossSlideというもの。 オリジナルサイトはこちら(↓) http://www.gruppo4.com/~tobia/cross-slide.shtml 設置方法とか解説(日本語)はこのあたりに… http://km33.net/2008/09/crossslide.html http://blog.e-donatello.com/archives/2008/09/19183906.php http://coliss.com/articles/build-websites/operation/javascript/1505.html ちょっと違うけど、スライドショー用のライブラリの紹介サイト http://design-develop.net/web-design/10-best-jquery-sliders.html 他にも、ぐぐればいっぱい見つかると思います。 >もしJavaScript以外の方法でいいやり方があれば、そちらも教えていた >だけるとありがたいです。 う~ん。 flashとかでしょうか?

vivienne31
質問者

お礼

素晴らしい回答ありがとうございます!調べても見つからなかったそのもののサイトでした! CrossSlideというのですね…恥ずかしながら初めて知りました。 ご親切に解説サイトも載せていただき、英語のわからない私に御配慮いただき感謝です。 FLASHはこれまた未勉強なのと、イメージ的に重そうかな、と思ったのでJavaScriptでの導入を考えました。 fujillinさんのおかげで何とか頑張れそうです。本当にありがとうございました!

関連するQ&A

  • スクロールを画像にしたくて

    こんにちわ。初心者の私に教えてください。 スクロールバーを画像にしたくて、 http://sk3d.jp/index_1.html ↑このサイトを参考にして、成功しました。 次の段階として、この表示された小窓部分に 外部のHTMLを表示させたい場合、 また、リンクのターゲットにしたい場合は どのようにしたら良いのでしょうか? 何卒よろしくお願いいたします!!

  • ページがスクロールするのについてくる背景画像

    わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはOKなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか? cssかjavaでできるでしょうか? 教えてください。 よろしくお願いします。

  • スクロールしても、画像を一定のところに表示したい

    現在、勉強しながらホームページを作っています。 HTMLは何とか理解できたと思っている程度です。 現在作成中のページで「できればいいな」と思っているのですが、ページの内容が多くなると、当然、たてにスクロールしなければならなくなりますよね。 そのとき、例えば、左上の隅に表示されていた画像は、スクロールとともに上に消えていってしまいます。 これを、スクロールしても画面の左上に表示し続けるということができないでしょうか? 素人考えで「JAVAScriptならなんとかなるかな?」と思ってここに問い合わせを書きました。 よろしくお願いします。

  • 画像クリックでスクロールバーの色を変える方法

    カテゴリー的にここかなと思うので質問させていただきます。 よく画像の素材サイトで 「サンプル画像をクリックすると、背景がその画像に変わる」 というものを見かけますが、 あれと同じ事をCSSのスクロールバーのカラー指定に対してやってみたいのです。 つまり、スクロールバーのサンプル画像をクリックすると、そのページ自体のスクロールバーが変わっていくというもの。 スクロールバーの色がIEでしか変わらない事は存じております。 私はHTMLとCSSの理解は深い方ですが、JavaScriptはほとんどわかりません。 よろしくお願いします。

  • ページの先頭へスクロールして戻るには

    こんにちは。 HTMLでボディタグ直後に<a name=pagetop"></a>などとしておき、ページの下部において「ページの先頭へ」とか「ページトップ」とか「PAGETOP」とかというリンクを設け、そのリンクをクリックすればページの一番上に戻らせるというHTMLのみでできる方法がありますが、そうでなくて、これをスクロールさせながら戻らせるようにしたいんです。 例えば以下のホームページが実例としてあります。 「ページトップ」という文字をクリックすると上記のようになります。 http://www.yamaha.co.jp/siteusage/index.html もちろん、このサイトのやり方と同じでなくても構いません。よりスマートなソース・やり方で出来ればそれが一番と思います。 JavaScriptは初心者でお恥ずかしいですが、これはぜひとも出来るようになりたいです。頑張ります。 どなたかどうぞ教えてください! 宜しくお願いいたします。

  • スクロールしてページトップへ

    「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるような(参考:http://www.endoritsuco.com/disc.html、http://www.mienai.com/about_orthodontics/index.html等)javacsriptを探しています。 javascriptは初心者なので、どこかでスクリプトを配布してたりすると嬉しいのですが。 書籍でも構いませんので情報をいただければと思います。

  • 複数の画像を横にスクロールさせる方法について

    複数の画像を横にスクロールさせる方法について こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。 また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。 よろしくお願いいたします。

  • JavaScriptを使って縦に画像がスクロールするページを作りたいの

    JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか? 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします!!

  • JavaScript・cssを使って、画像を自動スクロールさせたいので

    JavaScript・cssを使って、画像を自動スクロールさせたいのですが、http://spaceforaname.com/filmstrip.htmlのように表示させる方法を詳しく、分かりやすく教えて頂きたいです。よろしくお願いいたします。

  • z-indexを用いた常にウィンドウ上部に表示されるメニュー

    こんばんは。 今CSSでんなメニューの見せ方をしたいのですが、 どうも上手くいかなくて困っています。 どなたか教えていただけませんでしょうか。 【参考サイト】 http://www.ellegarden.jp/ja/index.asp このフッターの部分をトップメニューとして、 常にウィンドウの上部に表示されるようにしたいと思っています。 上部に位置することは出来るんですが、 ウィンドウをスクロールしたときに、 他のコンテンツといっしょに移動してしまいます。 スクロールをしても位置が変わらない方法が分かりません。 ※できればフッターの部分にbackground-imageでpng透過を使いたいと思っているので、 overflow: autoの使わずにz-indexを使った方法ですと助かります。 またjavascriptが必要であれば、それを使った方法でも構いません。 パンク寸前なので上手く説明できてるか自分で定かではないですが、 宜しくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう