feat: 增强页面滚动动效
This commit is contained in:
parent
51dae94dde
commit
864b197607
275
oneinai.html
275
oneinai.html
@ -20,6 +20,7 @@
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
@ -70,6 +71,27 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: clamp(88px, 12vh, 132px);
|
||||
right: max(14px, calc((100vw - 1360px) / 2));
|
||||
z-index: 20;
|
||||
width: 2px;
|
||||
height: min(28vh, 220px);
|
||||
overflow: hidden;
|
||||
background: rgba(62, 164, 236, 0.14);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scroll-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, var(--cyan), var(--red), var(--violet));
|
||||
transform: scaleY(1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
|
||||
@ -464,12 +486,27 @@
|
||||
}
|
||||
|
||||
.workflow-list {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid var(--ink);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workflow-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -715,12 +752,100 @@
|
||||
|
||||
@keyframes scroll-reveal {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(24px);
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 72px, 0) scale(0.965);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes title-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
clip-path: inset(0 0 100% 0);
|
||||
transform: translate3d(0, 58px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
clip-path: inset(0 0 0 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal-from-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(68px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal-from-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-64px, 42px, 0) rotate(-1.5deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal-from-right-card {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(64px, 42px, 0) rotate(1.5deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes line-draw {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-progress {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes number-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 64px, 0) scale(0.88);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panel-unfold {
|
||||
from {
|
||||
opacity: 0;
|
||||
clip-path: inset(24% 0 34% 0 round 24px);
|
||||
transform: translate3d(0, 84px, 0) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
clip-path: inset(0 0 0 0 round 24px);
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -729,13 +854,118 @@
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@supports (animation-timeline: view()) and (animation-range: entry 8% cover 34%) {
|
||||
.reveal-on-scroll {
|
||||
animation: scroll-reveal linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 8% cover 34%;
|
||||
will-change: opacity, transform;
|
||||
@supports (animation-timeline: view()) {
|
||||
.scroll-progress::after {
|
||||
animation: page-progress linear both;
|
||||
animation-timeline: scroll(root);
|
||||
}
|
||||
|
||||
.reveal-on-scroll {
|
||||
animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 0% cover 38%;
|
||||
}
|
||||
|
||||
.section-heading.reveal-on-scroll {
|
||||
animation-range: entry 0% cover 32%;
|
||||
}
|
||||
|
||||
.section-heading .section-title {
|
||||
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 4% cover 34%;
|
||||
}
|
||||
|
||||
.section-heading .section-description {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 12% cover 40%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(1) {
|
||||
animation-name: reveal-from-left;
|
||||
animation-range: entry 0% cover 34%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(2) {
|
||||
animation-range: entry 8% cover 42%;
|
||||
}
|
||||
|
||||
.capability-row:nth-child(3) {
|
||||
animation-name: reveal-from-right-card;
|
||||
animation-range: entry 16% cover 50%;
|
||||
}
|
||||
|
||||
.workflow-list::before {
|
||||
animation: line-draw linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 8% cover 58%;
|
||||
}
|
||||
|
||||
.workflow-step::before {
|
||||
animation: line-draw linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 12% cover 38%;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(1) {
|
||||
animation-range: entry 0% cover 30%;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(2) {
|
||||
animation-range: entry 10% cover 40%;
|
||||
}
|
||||
|
||||
.workflow-step:nth-child(3) {
|
||||
animation-range: entry 20% cover 50%;
|
||||
}
|
||||
|
||||
.pricing-layout {
|
||||
animation-name: panel-unfold;
|
||||
animation-range: entry 0% cover 44%;
|
||||
}
|
||||
|
||||
.price-main {
|
||||
animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 10% cover 38%;
|
||||
}
|
||||
|
||||
.price-fact {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
|
||||
.price-fact:nth-child(1) {
|
||||
animation-range: entry 8% cover 30%;
|
||||
}
|
||||
|
||||
.price-fact:nth-child(2) {
|
||||
animation-range: entry 16% cover 38%;
|
||||
}
|
||||
|
||||
.price-fact:nth-child(3) {
|
||||
animation-range: entry 24% cover 46%;
|
||||
}
|
||||
|
||||
.docs-panel {
|
||||
animation-name: panel-unfold;
|
||||
animation-range: entry 0% cover 42%;
|
||||
}
|
||||
|
||||
.docs-panel .section-title {
|
||||
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 8% cover 38%;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 18% cover 46%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
@ -802,6 +1032,12 @@
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.scroll-progress {
|
||||
top: 88px;
|
||||
right: 5px;
|
||||
height: 144px;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
@ -951,10 +1187,31 @@
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.scroll-progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reveal-on-scroll,
|
||||
.section-heading .section-title,
|
||||
.section-heading .section-description,
|
||||
.workflow-list::before,
|
||||
.workflow-step::before,
|
||||
.price-main,
|
||||
.price-fact,
|
||||
.docs-panel .section-title,
|
||||
.doc-link {
|
||||
opacity: 1 !important;
|
||||
clip-path: none !important;
|
||||
transform: none !important;
|
||||
animation: none !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='oneinai-root'>
|
||||
<span class='scroll-progress' aria-hidden='true'></span>
|
||||
<main class='page' id='top'>
|
||||
<section class='hero'>
|
||||
<div class='hero-copy'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user