ブラウザで表現できる動きやデザイン

質問

ブラウザで表現できる動きやデザインを、生かすためには
どのような言語や技術が選択肢としてあげられますか？
(ブラウザの構造、仕組みを知りたいのではなく、ブラウザはどんな言語を解読してどんな表現ができるのかを知りたいです。）

世の中の、インターネットサイトには、目をひくような動きのある楽しいサイトがあります。
サイトの作り方の入門本を読むと、HTML、CSS、JavaScriptの言語を駆使して
作られていますが、世の中のサイトは、この3点だけで、作られているのでしょうか？

以下に例を示してみます。

<表現１ 写真切り替え時のなめらかな動き>
以下は音響メーカーのサイト。中央に製品紹介の大きな写真があります。この写真のサイドに矢印があり、クリックすると、次の製品の絵が表示されます。この写真の切り替わり時に、少しずつ写真を変えるような動きがあります。
http://www3.jvckenwood.com/

<表現２ 常に前方に文字を表示>
以下は、ファッションブランドを扱う会社のサイト。ページをスクロールしても常に前方に「chanel news」と表示されています。
http://chanel-news.chanel.com/ja_JP/home.page.3.html#2013_10_making-of-the-press-kit-spring-summer-2014-ready-to-wear

<表現３ 前のページを「背景」にして、新しいページを表示する>
以下は、音楽フェスのサイト。ミュージシャンを選択すると、小さなプロフィールページを表示します。
プロフィールページは、ブラウザの真ん中に位置し、プロフィールページで隠せない背景は半透明な膜がかかっているかのようです。http://rsr.wess.co.jp/2013/artists/lineup/index.html

これらのサイトは、入門書に乗っているような地味なサイトとはかけ離れています。
アイデアで実現しているのでしょうか？それとも、JS,HTML,CSS以外の方法があるのでしょうか？
特定のブラウザだけで通用する技術ではなく、一般的な技術をご教授ください。

以上、宜しくお願いします。

回答No.1

chocotarosu · ベストアンサー

ウェブサイトは仰るとおりHTML、CSS、javascriptの3点でデザイン、動きを表現しています。

表現１
これは写真の切り替えに、javascriptとcssを利用しています。
「jquery　スライドショー」で検索してみてください。
javascriptを使用した様々なスライドショーがたくさん見つかります。

表現２
これはHTML＋CSSで作られています。
ヘッダーをブラウザの上から17p下の位置に常に固定し、最前面に表示するように
CSSで指定しています。

表現３
これは表現１と同じく、javascriptとcssを利用しています。
ソースを確認するとfancyboxというスクリプトを使っているみたいですね。
これと似たもので有名なものに、LightBox2というものがあります。

他にもCSSだけで作るアコーディオンメニューや、
CSSとjavascriptで作るアコーディオンメニューなど面白いものもありますし、
アイデア次第でいろいろなものを作れるので、気になったサイトのソースを覗いて
調べてみると良いと思います。

IEやChoromeだったら、F12を押せば開発者ツールが表示されて、
気になったところの要素を簡単に調べることができますよ。

お礼

ご回答ありがとうございます。
やはり、HTML、CSS、javascriptで作っているのですか。
アイデアで実現しているのはすごいですね。
自分は入門者ですが、この分野の奥の深さを感じました。

「jquery」というキーワードも初めて知りました。
色々と勉強になりました。ありがとうございました