コーポレートサイトをリニューアルしました
コーポレートサイトをリニューアルしました。
ページ構成からガラリと変え、コーポレートサイトとブログを統合しました。
これでTOPにブログの更新状況がサムネイル付きで表示されます。
スマホ対応も行いましたが、マウスオーバーでのアニメーションを随所に差し込みましたので、是非PCであちこち触っていただけると幸いです。
まだまだ少ないですが、ちょっとしたギミックは各所にいれていきたいです。
また、今回から記事の最下部に執筆者のプロフィールが出るようにしました。
技術的な情報をどんどん発信していきたいですね。
今後ともグローディア株式会社を何卒よろしくお願いいたします。
以下、今回のコードです。
コード
TOPの事業紹介の丸がニュッとなるアニメーションのコードを以下に記載します。
これです
コード、といってもHTMLとCSSだけですが…。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<a class="col-xs-12 col-sm-4 col-sm-offset-2" href="/business01"> <div class="frame"> <div class="circle-top"> <div class="circle-content"> <div class="circle-contents-inner"> <div class="circle-simbol"> <img class="work-animation-image" src="/images/work01.png"> <div class="circle-footer system-adjust"> システム<br>インテグレーション </div> </div> </div> </div> </div> </div> </a> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.row a { text-decoration: none; color: #666; } .frame { position: relative; padding: 5px 20px; } .circle-top { position: relative; margin: auto; width: 100%; } /* DOMを正方形にしてます */ .circle-top:before { content:" "; display: block; padding-top: 100%; } /* 形を丸にしてます */ .circle-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #FFF; border: solid 1px #0b6699; border-radius: 100%; } .circle-contents-inner { position: relative; width: 95%; height: 95%; margin: 2.5%; border: solid 1px #0b6699; border-radius: 100%; overflow: hidden; } /* 中の文字と、シルエット */ .circle-simbol { display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transition: .1s; -moz-transition: .1s; -o-transition: .1s; z-index: 4; } .circle-simbol:hover { width: 120%; left: -10%; top: -10%; } /* マウスオーバーで文字を大きく */ .circle-simbol:hover > .circle-footer { height: 80%; bottom: -20%; font-size: 30px; } /* 文字の乗っている領域をalphaのかかったグレーに */ .circle-footer { position: absolute; background-color: rgba(0,0,0,0.4); width: 100%; height: 30%; left: 0px; bottom: 0px; text-align: center; color: #FFF; font-size: 24px; font-weight: bold; -webkit-transition: .1s; -moz-transition: .1s; -o-transition: .1s; pointer-events: none; z-index: 5; } |
以上、よろしくお願い致します。
WEBアプリケーション、スマートフォンアプリケーションエンジニア。
フロントエンドに関心大。
趣味でゲーム作ったり、つくらなかったり。
グローディアのサービス一覧はこちら