gsap实现相册图片滚动缩放动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap实现相册图片滚动缩放动画效果代码,鼠标向下滚动网页试试。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
/>
<style>
/* @import 'normalize.css' layer(normalize); */
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.min.css') layer(normalize);
@layer normalize, base, demo, grid, setup, scroll, novelty;
@layer novelty {
@property --flip {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@-webkit-keyframes flip {
to {
--flip: 1;
}
}
@keyframes flip {
to {
--flip: 1;
}
}
[data-enhanced='true'] {
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
footer > span {
-webkit-animation: flip both steps(1, end);
animation: flip both steps(1, end);
animation-timeline: scroll(root);
}
footer .arm {
opacity: var(--flip);
}
footer .table {
display: inline-block;
transform-origin: 0 50%;
rotate: calc((-180 + (var(--flip) * 180)) * 1deg);
translate: calc(16% + (var(--flip) * -16%)) calc(var(--flip) * -45%);
transform: translateY(calc(var(--flip) * 90%));
transition-property: translate, rotate, transform;
transition-duration: calc(var(--flip) * 0.2s);
transition-duration: 0.2s, 0.24s, 0.5s;
}
.spring {
outline: 1px dashed red;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.spring span {
rotate: calc(-180deg + (var(--flip) * 180deg));
display: inline-block;
transform-origin: 50% 150%;
transition: rotate 0.24s;
}
}
}
}
}
@layer scroll {
:root {
--power-1-out: linear(
0 0%,
0.0027 3.64%,
0.0106 7.29%,
0.0425 14.58%,
0.0957 21.87%,
0.1701 29.16%,
0.2477 35.19%,
0.3401 41.23%,
0.5982 55.18%,
0.7044 61.56%,
0.7987 68.28%,
0.875 75%,
0.9297 81.25%,
0.9687 87.5%,
0.9922 93.75%,
1 100%
);
--power-2-out: linear(
0 0%,
0.0036 9.62%,
0.0185 16.66%,
0.0489 23.03%,
0.0962 28.86%,
0.1705 34.93%,
0.269 40.66%,
0.3867 45.89%,
0.5833 52.95%,
0.683 57.05%,
0.7829 62.14%,
0.8621 67.46%,
0.8991 70.68%,
0.9299 74.03%,
0.9545 77.52%,
0.9735 81.21%,
0.9865 85%,
0.9949 89.15%,
1 100%
);
--power-3-out: linear(
0 0%,
0.0029 13.8%,
0.0184 21.9%,
0.0339 25.51%,
0.0551 28.81%,
0.0827 31.88%,
0.1168 34.76%,
0.1962 39.57%,
0.3005 44.02%,
0.4084 47.53%,
0.6242 53.45%,
0.7493 57.93%,
0.8495 62.97%,
0.8888 65.67%,
0.9213 68.51%,
0.9629 73.9%,
0.9876 80.16%,
0.998 87.5%,
1 100%
);
--power-4-out: linear(
0 0%,
0.0012 14.95%,
0.0089 22.36%,
0.0297 28.43%,
0.0668 33.43%,
0.0979 36.08%,
0.1363 38.55%,
0.2373 43.07%,
0.3675 47.01%,
0.5984 52.15%,
0.7121 55.23%,
0.8192 59.21%,
0.898 63.62%,
0.9297 66.23%,
0.9546 69.06%,
0.9733 72.17%,
0.9864 75.67%,
0.9982 83.73%,
1 100%
);
--sine: linear(
0 0%,
0.2861 18.47%,
0.4829 32.08%,
0.6437 44.52%,
0.7712 56.07%,
0.8722 67.47%,
0.9115 73.02%,
0.9434 78.49%,
0.9682 83.91%,
0.9859 89.3%,
0.9965 94.66%,
1 100%
);
}
@-webkit-keyframes fade {
0%,
55% {
opacity: 0;
}
}
@keyframes fade {
0%,
55% {
opacity: 0;
}
}
@-webkit-keyframes reveal {
0%,
30% {
scale: 0;
}
}
@keyframes reveal {
0%,
30% {
scale: 0;
}
}
@-webkit-keyframes scale-x {
0%,
10% {
width: calc(100vw - (2 * var(--gutter)));
}
}
@keyframes scale-x {
0%,
10% {
width: calc(100vw - (2 * var(--gutter)));
}
}
@-webkit-keyframes scale-y {
0%,
10% {
height: calc(100vh - (2 * var(--gutter)));
}
}
@keyframes scale-y {
0%,
10% {
height: calc(100vh - (2 * var(--gutter)));
}
}
@media (prefers-reduced-motion: no-preference) {
[data-enhanced='true'] {
main section:first-of-type {
min-height: 240vh;
}
@supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
main section:first-of-type {
view-timeline: --runner;
}
&[data-center='true'] {
.scaler img {
-webkit-animation-name: scale-x, scale-y;
animation-name: scale-x, scale-y;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: var(--power-2-out), var(--power-1-out);
animation-timing-function: var(--power-2-out), var(--power-1-out);
animation-timeline: --runner, --runner;
animation-range: entry 100% exit -20%;
}
}
&[data-layers='true'] {
.grid .layer {
-webkit-animation-name: fade, reveal;
animation-name: fade, reveal;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-timeline: --runner, --runner;
-webkit-animation-timing-function: var(--sine), var(--power-1-out);
animation-timing-function: var(--sine), var(--power-1-out);
animation-range: entry 100% exit 0%;
}
&[data-stagger='timing'] .grid .layer {
&:nth-of-type(1) {
-webkit-animation-timing-function: var(--sine), var(--power-1-out);
animation-timing-function: var(--sine), var(--power-1-out);
}
&:nth-of-type(2) {
-webkit-animation-timing-function: var(--sine), var(--power-3-out);
animation-timing-function: var(--sine), var(--power-3-out);
}
&:nth-of-type(3) {
-webkit-animation-timing-function: var(--sine), var(--power-4-out);
animation-timing-function: var(--sine), var(--power-4-out);
}
}
&[data-stagger='range'] .grid .layer {
&:nth-of-type(1) {
animation-range: entry 100% exit 0%;
}
&:nth-of-type(2) {
animation-range: entry 100% exit -10%;
}
&:nth-of-type(3) {
animation-range: entry 100% exit -20%;
}
}
}
}
}
}
}
@layer setup {
/* gross calculations here to appease Safari and Firefox */
:root {
--container-width: 1600px;
--gap: clamp(10px, 7.35vw, 80px);
--gutter: 2rem;
}
@media (max-width: 600px) {
:root {
--gutter: 1rem;
}
}
.content {
min-height: 100vh;
width: 100vw;
display: flex;
place-items: center;
align-content: center;
position: sticky;
top: 0;
}
.scaler {
z-index: 2;
width: 100%;
height: 100%;
position: relative;
img {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 1rem;
width: 100%;
height: 100%;
}
}
}
@layer grid {
/* it's a 5x3 grid usin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0