プログラミング素人が100時間かけて自分のサイトを作る話
完成サイト(https://orionn0111.github.io/)
１００時間かければいいができるとhtml,scc,javaScriptを使い自分のポートフォリオサイトを作るお話
特に私はcssアニメーションにとても感動し、web上でサクサク動くcssアニメーションが動く物をつくりたいとおもい作成
ページ遷移時アニメーション
index.jsにて
$(function () {
// ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
$('a:not([href^="#"]):not([target])').on('click', function (e) {
e.preventDefault(); // ナビゲートをキャンセル
url = $(this).attr('href'); // 遷移先のURLを取得
if (url !== '') {
//ここにページ遷移時に実行するcssアニメーションを書く
obj.classList.add('roomout');
dF.classList.add('doorLeftOut');
dR.classList.add('doorRightOut');
moon.classList.add('moonout');
orionn.classList.add('orionnout');
kusaA.classList.add('kusaOut1');
kusaB.classList.add('kusaOut1');
book.classList.add('bookOut')
setTimeout(function () {
window.location = url; // 1.0秒後に取得したURLに遷移
}, 1000);
}
return false;
});
});
このindex.jsでページ遷移時アニメーションを可能にした
軽くするため
svg画像を用いることで拡大しても綺麗で軽い画像に…
svg画像は座標や色情報などで構成されているため
profile.htmlの中身は画像ではなくsvgとhtml,cssを基本的を使い作りました
検証してないですが多分こっちの方が軽いとおもう
新聞風ページ
３枚のページで新聞みたいに切り替えができるようにしました
制御はjsで行っておりアニメーションはもちろんcssを使って書きました
レスポンシブデザイン
スマホ対応なのですがスマホを横に傾けてみるページのようになっています
範囲設定がガバガバなのですぐパットのような中途半端な画面サイズや大きな画面に対してcssが崩れます
対応しようとしたのですが自分より大きな画面に擬似的に表示させる方法が分からなかったので諦めました