#理想のサイト
SuperCrowds incさんのロゴがフワッと出るローディングから円が広がってbodyが出現する画面遷移のような感じを実装したい。
が、アニメーションのやり方もローディングから画面遷移の実装方法もてんでわからない
#とりあえず参考になりそうなサイトを集める
https://kata-tip.com/css-clip-path-animation/
この記事も良さそうだなと思ったけど、Swiftで作られてるみたいでSwiftを勉強しないとダメそう。
英語でも調べてみる。
画面遷移はpage transition animation、縁が広がるはexpand circle。
何かしらの色で塗り潰された円を広げるのではなく、小さい円から窓のようにbodyの中身が出現するようにしたい場合は、clip-pathというcssを使うと、それっぽいものが実装できそう。
#clip-pathという物を利用するとセクションを斜めにしたりが簡単にできるらしい
セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。
(colisさんのサイトから引用)
詳しくは公式リファレンス参照。
####clip-pathの基本構文
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
basic-shapeに指定できるプロパティとしては、
inset() … 内側へのオフセット（通常は長方形となる）
circle() … 円
ellipse() … 楕円
polygon() … 多角形
などがある。(詳しくは こちらを参照。
####clip-pathのブラウザサポートについて
clip-pathプロパティはIEやEdgeでサポートされていません。Firefoxは部分的、url()構文のみサポートしています。しかし、Firefoxのバージョン47以降は、layout.css.clip-path-shapes.enableフラグが有効な場合のみこのプロパティをサポートしています。
Chrome、Safari、Operaで適切に表示するには、冒頭に-webkit-が必要になります。残念ながら、外部SVGはサポートしていません。ブラウザーサポートについての詳細はCan I Useを参照してください。
####CSS clip-path makerなるサイトがあり、ブラウザで切り取り後のイメージを確認できる
#集めた参考サイトの中で特にヒントになりそうなのは
この英語圏の記事と、この猫ちゃんが穴から出てくるやつが特にそれっぽい。
この英語圏の記事では、jsでひたすらclip-pathプロパティを付与することで実現してるっぽいんだけど、プロパティのキーになってる"circle(" + circpx + "px at center)"}が理解できない。なんでこうなるんだ。
$( document ).ready(function() {
console.log("here");
var circpx = $(window).width() / 1.5;
$(".circone").css({'clip-path': "circle(" + circpx + "px at center)"});
$(".circtwo").css({'clip-path': "circle(" + circpx + "px at center)"});
$(".circthree").css({'clip-path': "circle(" + circpx + "px at center)"});
$(".circfour").css({'clip-path': "circle(" + circpx + "px at center)"});
$(".numthree.opac").css({'font-size': '4vw', 'width': '5vw', 'height': '5vw', 'left': '47.5vw', 'top': '0' });
$(".numtwo.opac").css({'font-size': '4vw', 'width': '5vw', 'height': '5vw', 'left': '47.5vw', 'top': '0' });
$(".numone.opac").css({'font-size': '4vw', 'width': '5vw', 'height': '5vw', 'left': '47.5vw', 'top': '0' });
});
と思ったけどここだな。このclip-path: circle(0px at center)だ。
.circly {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
margin: 0;
clip-path: circle(0px at center);
transition: 0.75s all;
}
jsでcircpxにウィンドウ幅/1.5を代入して、次々代入していってる感じか。
clip-path(●px at center)っていうキーを指定しておくと、センターから丸を出現させられるのね。
猫ちゃんの方ではclip-path: circle(0 at 50% 50%);になってるけど、特に意味は変わらないからどっちでも良さげ。
animation x @keyframesで、0%は0pxから100%の時に100%になるようにすればいいのかな？
@keyframs がわからなかったからこちらも勉強する必要があったので別途(こちらの記事)にまとめてみてます。
猫ちゃんの方のcssでは以下のような感じなんだけど、animationで一括指定のやつ、3sと0sどっちがanimation-durationなんだろうか・・・
.block.active {
animation: clipPath 3s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards;
}
@keyframes clipPath {
0% {
clip-path: circle(0 at 50% 50%);
}
100% {
clip-path: circle(100% at 50% 50%);
}
window.onload = function() {
document.getElementById("block").classList.add("active")
};
//onloadはページが読み込まれたら実行する。
//htmlのblockというidを取得して、activeクラスを追加する。
ふむふむ。
画面遷移にこれを応用すればできるようになりそう。
画面遷移はこの動くWebデザインアイデア帳を参考に実装していく。
画面遷移の考え方は、
jQuery でローディング画面をフェードアウトし、body タグにクラスを付与。
クラスが付与されたらCSS で画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。
らしい。
#####背景色が伸びる画面遷移（左から右)
$(window).on('load',function(){
$("#splash-logo").delay(1200).fadeOut('slow');//ロゴを1.2秒でフェードアウトする記述
//=====ここからローディングエリア（splashエリア）を1.5秒でフェードアウトした後に動かしたいJSをまとめる
$("#splash").delay(1500).fadeOut('slow',function(){//ローディングエリア（splashエリア）を1.5秒でフェードアウトする記述
$('body').addClass('appear');//フェードアウト後bodyにappearクラス付与
});
//=====ここまでローディングエリア（splashエリア）を1.5秒でフェードアウトした後に動かしたいJSをまとめる
//=====ここから背景が伸びた後に動かしたいJSをまとめたい場合は
$('.splashbg').on('animationend', function() {
//この中に動かしたいJSを記載
});
//=====ここまで背景が伸びた後に動かしたいJSをまとめる
});
・背景色が円形に（中央へ）縮小する画面遷移
・背景色が下から上に伸びる画面遷移
どんな画面遷移をしたいにせよjQueryの記述はほぼ変わらないっぽい。
①$(window).on('load')で自動発火させて、ロゴのローディングをfadeOutさせる。
②そこに入れ子になるようにローディングのフェードアウトをさせてからのbodyにappearクラスを追加。
#画面遷移の考え方
そもそもmainのコンテンツの上に、position: fixedでローディング画面を重ねる。
そしてjsでページを読み込んだら、ローディング画面のHTMLにloadedクラスを追加して、opacity: 0; と visibility: hidden;を追加してローディング画面を消すことによってmainコンテンツを出現させる
↓わかりやすかった参考サイト