react+gsap实现小熊滑板静止视觉差异效果代码

代码语言:html

所属分类:视觉差异

代码描述:react+gsap实现小熊滑板静止视觉差异效果代码

代码标签: 滑板 静止 视觉 差异 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">
 

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
 
<style>
*,
*:after,
*:before {
 
box-sizing: border-box;
 
transform-style: preserve-3d;
}
body
{
 
background: #233143;
 
min-height: 100vh;
 
display: grid;
 
place-items: center;
 
overflow: hidden;
}
img
{
 
height: 100%;
 
-o-object-fit: cover;
     
object-fit: cover;
 
width: 100%;
}
.parallax-container {
 
height: 50vmin;
 
width: 50vmin;
 
perspective: 50vmin;
 
transform: translate3d(0, 0, 50vmin);
}
.parallax {
 
transform: rotateX(calc((var(--rx, 0) * var(--range-y, 0)) * 1deg)) rotateY(calc((var(--ry, 0) * var(--range-x, 0)) * 1deg)) rotate(calc((var(--r, 0) * var(--range-x, 0)) * 1deg));
}
.parallax-item {
 
left: calc(var(--x, 50) * 1%);
 
top: calc(var(--y, 50) * 1%);
 
height: calc(var(--height, auto) * 1%);
 
width: calc(var(--width, auto) * 1%);
 
transform: translate(-50%, -50%) translate3d(calc((var(--mx, 0) * var(--range-x, 0)) * 1%), calc((var(--my, 0) * var(--range-y, 0)) * 1%), calc(var(--mz, 0) * 1vmin)) rotateX(calc((var(--rx, 0) * var(--range-y, 0)) * 1deg)) rotateY(calc((var(--ry, 0) * var(--range-x, 0)) * 1deg)) rotate(calc((var(--r, 0) * var(--range-x, 0)) * 1deg));
}
</style>



</head>

<body>
 
<div id="app"></div>


 
     
<script type="module">
import React from 'https://cdn.skypack.dev/react';
import T from 'https://cdn.skypack.dev/prop-types';
import gsap from 'https://cdn.skypack.dev/gsap';
import { render } from 'https://cdn.skypack.dev/react-dom';

/**
 * All movements and rotations are based on a decimal scale.
 * 0 - 1 for movement will be 0% - 100% translation
 * 0 - 1 for rotation will be 0deg to 360deg rotation
 *
 * Position is based on relative position to the container in percentag.........完整代码请登录后点击上方下载按钮下载查看

网友评论0