kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码
代码语言:html
所属分类:三维
代码描述:kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码,点击可拖动圆圈内的图片显示文本。
代码标签: kokomi three gsap webgl 三维 图片 圆 墙 图文 展示 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua.css">
<style>
body {
margin: 0;
overflow: hidden;
}
#sketch {
width: 100vw;
height: 100vh;
background: black;
}
body {
user-select: none;
}
.loading span {
animation: blur 1.5s calc(var(--i) / 5 * 1s) alternate infinite;
}
@keyframes blur {
to {
filter: blur(2px);
}
}
#sketch {
position: fixed;
z-index: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: black;
}
.gallery {
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
overflow: hidden;
pointer-events: none;
}
.gallery .gallery-item {
position: absolute;
top: 50%;
left: 50%;
width: 22rem;
height: 10rem;
transform: translate(-50%, -50%);
opacity: 0;
}
.hello-text {
overflow: hidden;
}
.hello-text .char {
display: inline-block;
}
.pulse {
--pulse-width: 2.25rem;
--pulse-color: white;
--pulse-border-width: 1px;
position: relative;
width: var(--pulse-width);
height: var(--pulse-width);
}
.pulse::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
box-shadow: 0 0 0 var(--pulse-border-width) var(--pulse-color);
border-radius: 50%;
opacity: 0;
transform: scale(0);
animation: pulse 1s infinite;
}
@keyframes pulse {
50% {
opacity: 1;
}
to {
transform: scale(1.2);
}
}
.enlarge-click-area {
position: relative;
}
.enlarge-click-area::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
}
canvas.-candrag {
cursor: grab;
}
canvas.-dragging {
cursor: grabbing;
}
.slide-in-line {
overflow: hidden;
}
.btn {
--hue: 190;
--ease-in-duration: 0.25s;
--ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-out-duration: 0.65s;
--ease-out-delay: var(--ease-in-duration);
--ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
padding: 1rem 3rem;
font-size: 1rem;
line-height: 1.5;
color: white;
text-decoration: none;
background-color: hsl(var(--hue), 100%, 41%);
border: 1px solid hsl(var(--hue), 100%, 41%);
outline: transparent;
overflow: hidden;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: 0.25s;
transition-property: transform, opacity;
}
.btn:hover {
background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
--hue: 60;
}
.btn-ghost {
color: hsl(var(--hue), 100%, 41%);
background-color: transparent;
border-color: hsl(var(--hue), 100%, 41%);
}
.btn-ghost:hover {
color: white;
}
.btn-border-stroke {
border-color: hsla(var(--hue), 100%, 41%, 0.35);
}
.btn-border-stroke .btn-borders {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.btn-border-stroke .btn-borders .border-top {
position: absolute;
top: 0;
width: 100%;
height: 1px;
background: hsl(var(--hue), 100%, 41%);
transform: scaleX(0);
transform-origin: left;
}
.btn-border-stroke .btn-borders .border-right {
position: absolute;
right: 0;
width: 1px;
height: 100%;
background: hsl(var(--hue), 100%, 41%);
transform: scaleY(0);
transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: hsl(var(--hue), 100%, 41%);
transform: scaleX(0);
transform-origin: left;
}
.btn-border-stroke .btn-borders .border-left {
position: absolute;
left: 0;
width: 1px;
height: 100%;
background: hsl(var(--hue), 100%, 41%);
transform: scaleY(0);
transform-origin: bottom;
}
.btn-border-stroke .btn-borders .border-left {
transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke .btn-borders .border-bottom {
transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke .btn-borders .border-right {
transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke .btn-borders .border-top {
transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover {
color: hsl(var(--hue), 100%, 41%);
background: transparent;
}
.btn-border-stroke:hover .border-top,
.btn-border-stroke:hover .border-bottom {
transform: scaleX(1);
}
.btn-border-stroke:hover .border-left,
.btn-border-stroke:hover .border-right {
transform: scaleY(1);
}
.btn-border-stroke:hover .border-left {
transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover .border-bottom {
transition: var(--ease-in-duration) var(--ease-in-exponential);
}
.btn-border-stroke:hover .border-right {
transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-border-stroke:hover .border-top {
transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}
.btn-text-float-up::after {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(35%);
transition: 0.25s ease-out;
transition-property: transform, opacity;
}
.btn-text-float-up .btn-text {
display: block;
transition: 0.75s 0.1s var(--ease-out-exponential);
transition-property: transform, opacity;
}
.btn-text-float-up:hover .btn-text {
opacity: 0;
transform: translateY(-25%);
transition: 0.25s ease-out;
transition-property: transform, opacity;
}
.btn-text-float-up:hover::after {
opacity: 1;
transform: translateY(0);
transition: 0.75s 0.1s var(--ease-out-exponential);
transition-property: transform, opacity;
}
</style>
</head>
<body >
<div id="sketch"></div>
<div>
<div class="fixed z-5 top-0 left-0 loader-screen w-screen h-screen transition-all duration-300 bg-black">
<div class="absolute hv-center">
<div class="loading text-white text-3xl tracking-widest">
<span style="--i: 0">L</span>
<span style="--i: 1">O</span>
<span style="--i: 2">A</span>
<span style="--i: 3">D</span>
<span style="--i: 4">I</span>
<span style="--i: 5">N</span>
<span style="--i: 6">G</span>
</div>
</div>
</div>
<div class="fixed z-4 top-12 left-18">
<img src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png" class="h-12 block" alt="" />
</div>
<div class="gallery">
<img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/643225b447933.png" crossorigin="anonymous"
alt="" />
<img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/6486d7dc46647.png" crossorigin="anonymous"
alt="" />
<img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png" crossorigin="anonymous"
alt="" />
<img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/63114687db61b.png" crossorigin="anonymous"
alt="" />
<img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/63114663ad481.png" crossorigin="anonymous"
alt="" />
</div>
<div id="scene-1">
<div class="absolute top-20 h-center">
<div class="text-5xl text-white hello-text whitespace-no-wrap" data-splitting>Hello, we are Kessoku Band.
</div>
</div>
<div class="absolute top-100 h-center">
<div class="click-hint cursor-pointer enlarge-click-area opacity-0">
<div class="pulse" style="--pulse-width: 6rem;--pulse-border-width: 2px;">
<div class="absolute hv-center">
<div class="pulsate-fwd">
<div class="w-16 h-16 bg-white rounded-full opacity-75"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scene-2" class="opacity-0 pointer-events-none">
<div class="absolute left-54" style="top: 24vh;">
<div class="flex flex-col space-y-6">
<div class="slide-in-line">
<div class="slide-in-line-child name-text text-5xl text-white"></div>
</div>
<div class="slide-in-line">
<div class="slide-in-line-child job-text text-3xl text-white"></div>
</div>
<div class="fade-in-lines">
<div class="fade-in-lines-child intro-text text-lg text-white w-64"></div>
</div>
<div class="see-more-link-container">
<a class="see-more-link" target="_blank" href="#">
<button data-text="See More"
class="see-more-link-btn dash-btn btn btn-primary btn-ghost btn-border-stroke btn-text-float-up">
<div class="btn-borders">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<.........完整代码请登录后点击上方下载按钮下载查看
网友评论0