Beberapa overlay sederhana maupun kreatif style dan efek. Dari slide overlay ke viewport menggunakan SVG bentuk morphing, kita menjelajahi beberapa efek untuk overlay fullscreen setelah kemarin di terapkan ke
Fullscreen Layout with Page Transitions.
Hari ini saya ingin berbagi beberapa inspirasi Overlay fullscreen efek style dengan Anda. Seperti dengan komponen UI, ada tren baru serta fancy efek untuk overlay. Hal khusus tentang Overlay ini adalah bahwa element tersebut tidak memiliki ukuran yang tetap seperti Modal Windows Effect tetapi Overlay kali ini dengan effect Fullscreen, jadi ketika menciptakan efek kita harus memperhitungkannya dan tidak berlebihan. Tapi itu tidak berarti bahwa kita tidak bisa menggunakan beberapa efek segar dan menarik, seperti, misalnya SVG bentuk morphing.
Idenya adalah untuk membuat Fade in overlay dan untuk merotasi apa yang ada di dalamnya sedikit menggunakan effect 3D:
.overlay-hugeinc {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-hugeinc.open {
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
perspective: 1200px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
transform: translateY(-25%) rotateX(35deg);
transition: transform 0.5s, opacity 0.5s;
}
.overlay-hugeinc.open nav ul {
opacity: 1;
transform: rotateX(0deg);
}
.overlay-hugeinc.close nav ul {
transform: translateY(25%) rotateX(-35deg);
}Kami menggunakan trik Visibility untuk membuat Overlay menghilang sepenuhnya: kita menggunakan Transition Delay untuk properti visibility yang memungkinkan opacity akan dialihkan terlebih dahulu.
Untuk beberapa contoh SVG kita gunakan adalah
Snap.svg to morph a path into another one. Untuk "Little Box" Misalnya kita menggunakan SVG dengan beberapa JS untuk mengontrol, tetapi Anda tentu saja dapat juga menggunakan CSS untuk kontrol atau tidak menggunakan SVG sama sekali.
Sekian artikel kali ini, Saya harap Anda menikmati efek ini dan Anda dapat menemukan inspirasi dari effect ini.