简要说明这是一款基于html5 webgl的图像扭曲变形动画特效。该特效中，通过three.js来制作从一幅缩略图，扭曲变形为全屏大图的动画特效，共有6种炫酷的动画效果。
视频加载中...<script src=/tt_player/tt.player.jsv=20160723></script>
该特效提供了一个控制面板来控制图像扭曲的动画，你可以自行调节效果。
碉堡了，基于html5 webgl的图像扭曲变形动画开源特效
实现方法html结构
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
<script src=js/imagesloaded.pkgd.min.js></script>
<script src=js/three.min.js></script>
<script src=js/tweenlite.min.js></script>
<script src=js/cssplugin.min.js></script>
<script src=js/easepack.min.js></script>
<script src=js/dat-gui.min.js></script>
<script src=js/configurator.js></script>
<script src=js/gridtofullscreeneffect.js></script>
<script src=js/basicdemo.js></script>
<script>
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 => {
///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);
});
</script>
作者 | 思齐 | 蚂蚁开源社区大神，资深开发工程师
点击了解更多-演示/下载demo源码!

---