135 строки
4.3 KiB
SCSS
135 строки
4.3 KiB
SCSS
|
|
// Homepage hero -----------------------------
|
|
|
|
.hero {
|
|
margin: 0 auto;
|
|
backface-visibility: hidden;
|
|
max-width: 900px;
|
|
@include breakpoint(xl) { max-width: 100%; }
|
|
animation: hero-animation 1s forwards;
|
|
}
|
|
@keyframes hero-animation {
|
|
0% { opacity: 0; transform: scale(.96); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
// Hero icons
|
|
.hero-icons {
|
|
transform-origin: 50% 50%;
|
|
animation: hero-icons-animation 2s 2.5s cubic-bezier(.50, .10, .50, .90) both;
|
|
}
|
|
@keyframes hero-icons-animation {
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
|
|
// Electron Icon
|
|
|
|
$hero-icon-delay: 1s;
|
|
$hero-icon-delay-diff: .2s;
|
|
$hero-icon-duration: 1.2s;
|
|
$hero-icon-all-delay: 15 * $hero-icon-delay-diff + $hero-icon-delay;
|
|
|
|
|
|
.hero-icon {
|
|
fill: $jumbo-color-strong;
|
|
opacity: .1;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
// Initial position
|
|
.hero-icon.dot { transform: translate(35px, -37px); opacity: 1; }
|
|
.hero-icon.short-1 { transform: translate(119px, 37px) rotate(-134deg); }
|
|
.hero-icon.short-2 { transform: translate(-20px, 61px) rotate(106deg); }
|
|
.hero-icon.short-3 { transform: translate(65px, -18px) rotate(-17deg); }
|
|
.hero-icon.long-1 { transform: translate(-101px, -45px) rotate(-107deg); }
|
|
.hero-icon.long-2 { transform: translate(-35px, 8px) rotate(133deg); opacity: 1; }
|
|
.hero-icon.long-3 { transform: translate(-64px, 20px) rotate(13deg); }
|
|
.hero-icon.loop-1 { transform: translate(-51px, -128px); }
|
|
.hero-icon.loop-2 { transform: translate(166px, -88px); }
|
|
.hero-icon.loop-3 { transform: translate(79px, 21px); opacity: 1; }
|
|
|
|
@for $i from 1 through 10 {
|
|
.hero-icon-#{$i} {
|
|
$_duration: $hero-icon-duration;
|
|
$_delay: $hero-icon-delay + ($hero-icon-delay-diff * $i);
|
|
$_delay-o: $hero-icon-all-delay - ($hero-icon-delay-diff / $i);
|
|
animation: hero-icon-animation-t $_duration $_delay cubic-bezier(.50, 0, .20, 1) both,
|
|
hero-icon-animation-o .4s $_delay-o both;
|
|
}
|
|
}
|
|
|
|
@keyframes hero-icon-animation-t {
|
|
100% { transform: translate(0, 0) rotate(0deg); }
|
|
}
|
|
@keyframes hero-icon-animation-o {
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
|
|
|
|
// Apps ----------------
|
|
|
|
.hero-app {
|
|
fill: $jumbo-color-subtle;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
// Ripple effect
|
|
$hero-app-delay: $hero-icon-all-delay;
|
|
$hero-app-delay-diff: 0.04s;
|
|
$hero-app-duration: .8s;
|
|
$hero-app-opacity: 0.1;
|
|
|
|
@keyframes hero-app-animate-left {
|
|
0% { transform: translateX(30px) scale(1); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
|
10% { transform: translateX(20px) scale(1.5); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
|
100% { transform: translateX( 0px) scale(1); opacity: 1; }
|
|
}
|
|
@keyframes hero-app-animate-right {
|
|
0% { transform: translateX(-30px) scale(1); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
|
10% { transform: translateX(-20px) scale(1.5); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
|
100% { transform: translateX( 0px) scale(1); opacity: 1; }
|
|
}
|
|
|
|
// Colorize and animate
|
|
@for $i from 1 through 15 {
|
|
.hero-app-#{$i} {
|
|
fill: mix( $jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4% );
|
|
|
|
$_delay: $hero-app-delay + ($hero-app-delay-diff * $i);
|
|
@if $i % 2 == 0 {
|
|
animation: hero-app-animate-left $hero-app-duration $_delay both;
|
|
} @else {
|
|
animation: hero-app-animate-right $hero-app-duration $_delay both;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Hack for Firefox --------------------------
|
|
// Adjust initial position
|
|
// It might be related to: https://bugzilla.mozilla.org/show_bug.cgi?id=923193
|
|
|
|
@-moz-document url-prefix() {
|
|
.hero-icon.short-1 { transform: translate(26px, -78px) rotate(-134deg); }
|
|
.hero-icon.short-2 { transform: translate(40px, -42px) rotate(106deg); }
|
|
.hero-icon.short-3 { transform: translate(40px, -32px) rotate(-17deg); }
|
|
.hero-icon.long-1 { transform: translate(-124px, 4px) rotate(-107deg); }
|
|
.hero-icon.long-2 { transform: translate(-92px, 22px) rotate(133deg); }
|
|
.hero-icon.long-3 { transform: translate(-56px, 8px) rotate(13deg); }
|
|
}
|
|
|
|
|
|
// Hack for Edge --------------------------
|
|
// FIXME: The transforms doesn't seem to work in Edge
|
|
// So currently the animation is disabled to not make it look broken
|
|
|
|
@supports (-ms-accelerator:true) {
|
|
.hero-icon {
|
|
opacity: 1 !important;
|
|
animation: none !important;
|
|
transform: none !important;
|
|
}
|
|
}
|