<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于threejs的炫酷缩略图到全屏放大动画特效|DEMO6_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" href="https://use.typekit.net/ujk6ksk.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var a,b=document.createElement("style");return b.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(b),a=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),b.parentNode.removeChild(b),a};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading demo-6">
<main>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">Grid to Fullscreen Animations</h1>
<div class="frame__links">
<a href="http://www.htmleaf.com/">jQuery之家</a>
<a href="http://www.htmleaf.com/html5/html5-canvas/201905295668.html">返回下载页</a>
<a href="https://github.com/Anemolo/GridToFullscreenAnimations" target="_blank">GitHub</a>
</div>
</div>
<div class="frame__demos">
<span class="frame__demos-title">examples:</span>
<a href="index.html" class="frame__demo">01</a>
<a href="index2.html" class="frame__demo">02</a>
<a href="index3.html" class="frame__demo">03</a>
<a href="index4.html" class="frame__demo">04</a>
<a href="index5.html" class="frame__demo">05</a>
<a href="index6.html" class="frame__demo frame__demo--current">06</a>
</div>
</div>
<!-- /frame -->
<div class="deco">
<div class="deco__text">Connect 2020</div>
<div class="deco__text">Connect 2020</div>
<div class="deco__text">Connect 2020</div>
<div class="deco__text">Connect 2020</div>
<div class="deco__text">Connect 2020</div>
</div>
<div id="app"></div>
<div class="grid" id="itemsWrapper">
<figure class="grid__item">
<img class="grid__item-img" src="img/16.jpg" alt="Some image" />
<img class="grid__item-img grid__item-img--large" src="img/16_large.jpg" />
<figcaption class="grid__item-caption">
<h2 class="grid__item-title">Salty sea</h2>
<p class="grid__item-text">
If you are lucky enough to have lived in Paris as a young man,
then wherever you go for the rest of your life it stays with you,
for Paris is a moveable feast.
</p>
</figcaption>
</figure>
<figure class="grid__item">
<img class="grid__item-img" src="img/17.jpg" alt="Some image" />
<img class="grid__item-img grid__item-img--large" src="img/17_large.jpg" />
<figcaption class="grid__item-caption">
<h2 class="grid__item-title">Warm waves</h2>
<p class="grid__item-text">
We crossed spacious streets, with building resembling palaces, in
La Rambla promenade; the shops were well illuminated and there was
movement and life.
</p>
</figcaption>
</figure>
<figure class="grid__item">
<img class="grid__item-img" src="img/18.jpg" alt="Some image" />
<img class="grid__item-img grid__item-img--large" src="img/18_large.jpg" />
<figcaption class="grid__item-caption">
<h2 class="grid__item-title">Inner life</h2>
<p class="grid__item-text">
And that is… how they are. So terribly physically all over one
another. They pour themselves one over the other like so much
melted butter over parsnips.
</p>
</figcaption>
</figure>
</div>
<div class="fullview">
<div class="fullview__item">
<h2 class="fullview__item-title">Salty sea</h2>
</div>
<div class="fullview__item">
<h2 class="fullview__item-title">Warm waves</h2>
</div>
<div class="fullview__item">
<h2 class="fullview__item-title">Inner life</h2>
</div>
<button class="fullview__close" aria-label="Close preview"><svg aria-hidden="true" width="24" height="22px" viewBox="0 0 24 22"><path d="M11 9.586L20.192.393l1.415 1.415L12.414 11l9.193 9.192-1.415 1.415L11 12.414l-9.192 9.193-1.415-1.415L9.586 11 .393 1.808 1.808.393 11 9.586z" /></svg></button>
</div>
</main>
<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/GridToFullscreenEffect.js"></script>
<script src="js/basicDemo.js"></script>
<script>
let currentIndex;
const itemsWrapper = document.getElementById("itemsWrapper");
const thumbs = [...itemsWrapper.querySelectorAll("img.grid__item-img:not(.grid__item-img--large)")];
const fullviewItems = [...document.querySelectorAll(".fullview__item")];
const backToGridCtrl = document.querySelector(".fullview__close");
const transitionEffectDuration = 1.6;
const transitionEffect = createDemoEffect({
timing: {
type: "sections",
sections: 1,
duration: transitionEffectDuration
},
activation: {
type: "mouse"
},
transformation: {
type: "wavy",
props: {
seed: "8000",
frequency: 0.1,
amplitude: 1
}
},
onToFullscreenStart: ({ index }) => {
currentIndex = index;
thumbs[currentIndex].style.opacity = 0;
transitionEffect.uniforms.uSeed.value = index * 10;
toggleFullview();
},
onToGridFinish: ({ index, lastIndex }) => {
thumbs[lastIndex].style.opacity = 1;
fullviewItems[currentIndex].classList.remove("fullview__item--current");
},
seed: 800,
easings: {
toFullscreen: Cubic.easeOut,
toGrid: Power3.easeInOut
}
});
transitionEffect.init();
const toggleFullview = () => {
if (transitionEffect.isFullscreen) {
TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 1, {
ease: Power3.easeInOut,
opacity: 0,
scale: 0.2
});
TweenLite.to(backToGridCtrl, 1, {
ease: Power3.easeInOut,
opacity: 0,
scale: 0.2
});
transitionEffect.toGrid();
} else {
fullviewItems[currentIndex].classList.add("fullview__item--current");
TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 0.6, {
ease: Power3.easeOut,
startAt: { scale: 0.2 },
scale: 1,
opacity:
基于threejs的炫酷缩略图到全屏放大动画特效
需积分: 44 100 浏览量
2019-12-12
20:34:16
上传
评论 2
收藏 3.57MB ZIP 举报
201905295421.zip （52个子文件） 
css 
base.css 7KB
index4.html 9KB jQuery之家.url 268B index6.html 9KB readme.html 865B index3.html 9KB index2.html 7KB img 
5.jpg 45KB 3.jpg 31KB 13_large.jpg 259KB 7_large.jpg 222KB 8.jpg 50KB 4.jpg 35KB 12.jpg 13KB 18_large.jpg 93KB 9.jpg 25KB 2.jpg 65KB 10.jpg 22KB 15_large.jpg 141KB 16_large.jpg 156KB 18.jpg 20KB 5_large.jpg 150KB 1_large.jpg 185KB 1.jpg 34KB 14_large.jpg 184KB 17_large.jpg 158KB 11.jpg 15KB 14.jpg 47KB 6.jpg 47KB 3_large.jpg 145KB 9_large.jpg 95KB 15.jpg 21KB 11_large.jpg 64KB 4_large.jpg 199KB 6_large.jpg 236KB 8_large.jpg 202KB 12_large.jpg 55KB 17.jpg 39KB 10_large.jpg 143KB 16.jpg 32KB 2_large.jpg 151KB 7.jpg 45KB 13.jpg 43KB js GridToFullscreenEffect.js 27KB CSSPlugin.min.js 43KB EasePack.min.js 6KB basicDemo.js 673B TweenLite.min.js 27KB imagesloaded.pkgd.min.js 5KB three.min.js 559KB index.html 8KB index5.html 9KB资源评论
