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