今年度の芸工祭(名古屋市立大学芸術工学部の大学祭)のWEBページを公開しました。
告知サイト
今年は私達が中心となって芸工祭を作り上げる年です。
WEB部署では芸工祭告知用サイト(http://geikousai-ncu.com)と適部署チャート(http://geikousai-ncu.com/chart)を制作・公開しました。
今回の告知用サイトは、
・概要の説明
・下級生への部署配属のサポート
ができるようなサイトにしよう、と制作を始めました。
コンテンツが少ないので見やすさ？というよりも、インパクトを大事にして、今年の芸工祭をイメージ付けられるように、SVGのアニメーションや背景に動画を流す、など割と今流行りのものを取り入れたデザインにしました。
制作中のあれこれ
–fullpage.js
そして、とっても使ってみたかったfullpage.jsを導入しました。(パララックスはそんなに今風ではないかもしれませんが…..)
現在のページから、スクロールを「上」にしたか「下」にしたかどうかでアニメーション等を加えることができます。
多用はしてないですが、もっと動きのある楽しいサイトを作るときにはすごく使えるなーという印象です！やってみたい（＾v＾）
fullpage.jsは、今回のような中身の少ないサイトにはピッタリだったかもしれません。1ページに綺麗に収まってると見やすいような気がします。
–Youtubeの埋め込み
それから今回とっても悩みに悩んだYoutubeの埋め込みについて。
部署の紹介を今年は動画にすることにしたのですが、それをiframeで埋め込むと本当に重い。しかも1つ埋め込むごとに6つのエラーが発生する。(解消できないらしい..?)これを18個くらい埋め込んでいたので、とてつもなく重く、TOPのアニメーションが全然表示されない……
という悩みを持っていた方はたくさんいるようで、色んなサイトさんを参考にさせてもらいました。
Youtubeをそのまま埋め込むのではなく、サムネイルを表示しクリックした時点でiframeに埋め込むという処理をしました。
おかげでアニメーションがさくさく動きます…ありがとうございます…
参考にさせて頂いた記事はこちらです。
YouTubeの動画をサイトに埋め込むと重い！という人のための解決方法
–z-index
そして効いたり効かなかったりするz-index。(ちゃんとやればちゃんと効きます)
CSS再入門さんで詳しく説明してあり、とっても参考にさせてもらいました。
スタック文脈（stacking contexts）、スタックレベル（stack level）という概念について全く気にしたことがなかったので非常に参考になりました…
おかげさまでz-indexの不具合を解消できました！！
–様々なお詫び
IEで動画とsvgが、Androidでもsvgが表示されません..
と、いうかsvgは対応したつもりができてないので原因解明をしないといけません；；ちなみにModernizrを使ってsvg→pngに変換しているつもりです。まだ理解できてないので要勉強です…..
youtubeの再生を止めずにモーダルウィンドウを閉じると、再生が止まらない…
これも色々試してみてるのですがどうもうまくいかない！もう少ししたら直ってるはずです！
(6/29)色々試してみたら直りました！！
①サムネイルをクリックするとiframeが追加される
②モーダルウィンドウを閉じるときにiframeがremoveされる
というのをもっと簡潔に書いてみたらできた…
難しく考えすぎてたみたいでした。よかったよかった。！
GEIKOSAI2015
とにかくお伝えしたいことは、
2015年10月31日(土)-11月1日(日) 名古屋市立大学 北千種キャンパス
にて芸工祭です！ぜひぜひお越し下さい。
今回制作したWEBページは仮なのでもっと進化すると思います。そちらもお楽しみに〜〜！
適部署チャートもぜひやってみてください（＾v＾）WEB部署のメンバーがつくってくれました！Androidでは見れない模様…..
ちなみに私はWEB部署でした。笑
