简要说明
这是一款基于HTML5 WebGL的图像扭曲变形动画特效。该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果。
视频加载中...
该特效提供了一个控制面板来控制图像扭曲的动画,你可以自行调节效果。
碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
实现方法
HTML结构碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
Our Item Title
Our Item Description
...
引入base.css#cdawrap .carbon-text {
--cda-text-color: #aba1a6;
padding: 0.25rem 0 0.75rem;
display: block;
line-height: 1.4;
font-weight: 700;
font-weight: var(--cda-text-weight);
text-decoration: none;
text-transform: none;
letter-spacing: 0px;
border: 0;
}
body #cdawrap {
--cda-left: 2rem;
--cda-right: auto;
--cda-top: auto;
--cda-bottom: 6rem;
z-index: 1;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 15px;
}
body {
margin: 0;
--color-text: #615d5d;
--color-bg: #121217;
--color-link: #aba1a6;
--color-link-hover: #fff;
--color-info: #f58a4e;
color: var(--color-text);
background-color: var(--color-bg);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
font-weight: 600;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
.dg .title {
transition: background-color 300ms ease-out;
}
.shine {
transition: background-color 100ms ease-out !important;
background-color: #fff !important;
}
#app {
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#app:hover {
cursor: pointer;
}
.dg.ac {
z-index: 99999 !important;
}
/* Page Loader */
.js .loading::before {
content: "";
position: fixed;
z-index: 100000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
content: "";
position: fixed;
z-index: 100000;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
pointer-events: none;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}
.frame {
padding: 3rem 5vw;
text-align: center;
position: relative;
z-index: 1000;
}
.frame__title {
font-size: 1rem;
margin: 0 0 1rem;
}
.frame__tagline {
color: var(--color-info);
}
.frame__links {
display: inline;
}
.frame a {
text-transform: lowercase;
}
.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
margin-right: 1rem;
}
.frame__demos {
margin: 1rem 0;
}
.frame__demo--current,
.frame__demo--current:hover {
color: var(--color-text);
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
height: calc(100vh - 13rem);
position: relative;
justify-content: flex-start;
align-items: center;
}
.content__img {
width: 500px;
max-width: 100%;
display: block;
cursor: pointer;
}
.content__img--large {
pointer-events: none;
position: fixed;
opacity: 0;
}
@media screen and (min-width: 53em) {
.frame {
position: fixed;
text-align: left;
z-index: 10000;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 3rem;
pointer-events: none;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas: "title ..."
"... ..."
"links demos";
}
.frame__title-wrap {
grid-area: title;
display: flex;
}
.frame__title {
margin: 0;
}
.frame__tagline {
position: relative;
margin: 0 0 0 1rem;
padding: 0 0 0 1rem;
opacity: 0.5;
}
.frame__demos {
margin: 0;
grid-area: demos;
justify-self: end;
}
.frame__links {
grid-area: links;
padding: 0;
justify-self: start;
}
.frame a {
pointer-events: auto;
}
.content {
height: 100vh;
justify-content: center;
}
}
引入javascript
const itemsWrapper = document.getElementById("items-wrap");
const configurator = createDemoConfigurator({
activation: { type: "side", props: { top: true, bottom: true} },
timing: {
type: "sections",
props: {
sections: 4,
}
},
transformation: {type: "simplex"},
duration: 1.8,
easings: {
toFullscreen: Cubic.easeInOut,
toGrid: Cubic.easeInOut
}
})
imagesLoaded(document.querySelectorAll("img"), instance => {
//https://www.techrepublic.com/article/preloading-and-the-javascript-image-object/
document.body.classList.remove("loading");
let images = [];
for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
let image = {
element: instance.elements[i],
image: instance.images[i].isLoaded ? instance.images[i].img : null
};
if (i % 2 === 0) {
imageSet = {};
imageSet.small = image;
}
if (i % 2 === 1) {
imageSet.large = image;
images.push(imageSet);
}
}
configurator.effect.createTextures(images);
});
作者 | 思齐 | 蚂蚁开源社区大神,资深开发工程师
点击了解更多-演示/下载demo源码!
内容由用户发布,不代表本站观点。如发现有害或侵权内容。请点击这里