TweenMax全屏图片幻灯片翻页动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13



特效描述:全屏图片 幻灯片 翻页动画。今天我们想分享一个平面的html5电子杂志布局与“翻页”动画特效。导航时,内容被覆盖,然后显示下一页。根据页面之间的距离(在从菜单中选择页面时),我们将显示多个元素来覆盖内容,从而创建平面页面翻转外观。我们在每一页上都添加了一些视觉指示符,表示书皮。指示符将增长,这取决于我们当前处于哪个页面。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<meta name="description" content="A template with a two-sided, magazine-like layout and a flat page flip animation" />
		<meta name="keywords" content="grid, pageflip, reveal, animation, layout, book, magazine, web design, template, demo" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="loading">
		<svg class="hidden">
			<symbol id="icon-arrow" viewBox="0 0 24 24">
				<title>arrow</title>
				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
			</symbol>
			<symbol id="icon-drop" viewBox="0 0 24 24">
				<title>drop</title>
				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
			</symbol>
			<svg id="icon-nav" viewBox="0 0 152 63">
				<title>navarrow</title>
				<path d="M115.737 29L92.77 6.283c-.932-.92-1.21-2.84-.617-4.281.594-1.443 1.837-1.862 2.765-.953l28.429 28.116c.574.57.925 1.557.925 2.619 0 1.06-.351 2.046-.925 2.616l-28.43 28.114c-.336.327-.707.486-1.074.486-.659 0-1.307-.509-1.69-1.437-.593-1.442-.315-3.362.617-4.284L115.299 35H3.442C2.032 35 .89 33.656.89 32c0-1.658 1.143-3 2.552-3H115.737z"/>
			</svg>
		</svg>
		<main>
			<p class="message">请全屏查看完整布局</p>
			<div class="slideshow">
				<div class="slide slide--layout-1 slide--current">
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/1.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Black cappuccino sugar</h3>
							<p class="slide__figure-description">Plunger pot dripper crema sit coffee</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/2.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Cup white foam</h3>
							<p class="slide__figure-description">Mug that steamed to go</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/3.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Aroma mocha</h3>
							<p class="slide__figure-description">Foam trifecta</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/4.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Seasonal et dripper</h3>
							<p class="slide__figure-description">Trifecta foam, con panna caffeine</p>
						</figcaption>
					</figure>
					<span class="slide__number slide__number--left">1</span>
					<span class="slide__number slide__number--right">2</span>
				</div>
				<div class="slide slide--layout-2">
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/5.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Carajillo percolator</h3>
							<p class="slide__figure-description">White sugar plunger pot half</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/6.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Cortado organic skinny</h3>
							<p class="slide__figure-description">As aromatic, grinder turkish</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/7.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Qui coffee, americano</h3>
							<p class="slide__figure-description">Espresso percolator iced rich</p>
						</figcaption>
					</figure>
					<span class="slide__number slide__number--left">3</span>
					<span class="slide__number slide__number--right">4</span>
				</div>
				<div class="slide slide--layout-3">
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/8.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">White filter</h3>
							<p class="slide__figure-description">Breve, brewed ristretto rich arabica</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/9.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Java half and half</h3>
							<p class="slide__figure-description">Et aged so, sweet cup</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/10.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Steamed et mazagran</h3>
							<p class="slide__figure-description">As cultivar froth fair trade</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/11.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Coffee mazagran eu</h3>
							<p class="slide__figure-description">Breve seasonal frappuccino</p>
						</figcaption>
					</figure>
					<span class="slide__number slide__number--left">5</span>
					<span class="slide__number slide__number--right">6</span>
				</div>
				<div class="slide slide--layout-4">
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/12.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Kopi-luwak body</h3>
							<p class="slide__figure-description">Affogato steamed single shot</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/13.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Ut crema eu cultivar</h3>
							<p class="slide__figure-description">Black flavour qui robusta</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/14.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Sit, in americano iced acerbic</h3>
							<p class="slide__figure-description">Macchiato whipped, chicory mug</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/15.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">At redeye, white foam extra</h3>
							<p class="slide__figure-description">Variety black grounds espresso</p>
						</figcaption>
					</figure>
					<span class="slide__number slide__number--left">7</span>
					<span class="slide__number slide__number--right">8</span>
				</div>
				<div class="slide slide--layout-5">
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/16.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Aftertaste roast</h3>
							<p class="slide__figure-description">Instant extra beans decaffeinated</p>
						</figcaption>
					</figure>
					<figure class="slide__figure">
						<div class="slide__figure-inner">
							<div class="slide__figure-img" style="background-image: url(img/17.jpg)"></div>
							<div class="slide__figure-reveal"></div>
						</div>
						<figcaption>
							<h3 class="slide__figure-title">Brewed sit in instant shop</h3>
							<p class="slide__figure-description">Blue mountain, java crema</p>
						</figcaption>
					</figure>
					<span class="slide__number slide__number--left">9</span>
					<span class="slide__number slide__number--right">10</span>
				</div>
				<!-- revealer -->
				<div class="revealer">
					<div class="revealer__item revealer__item--left"></div>
					<div class="revealer__item revealer__item--right"></div>
				</div>
				<nav class="arrow-nav">
					<button class="arrow-nav__item arrow-nav__item--prev">
						<svg class="icon icon--nav"><use xlink:href="#icon-nav"></use></svg>
					</button>
					<button class="arrow-nav__item arrow-nav__item--next">
						<svg class="icon icon--nav"><use xlink:href="#icon-nav"></use></svg>
					</button>
				</nav>
				<!-- navigation -->
				<nav class="nav">
					<button class="nav__button">
						<span class="nav__button-text">首页</span>
					</button>
					<h2 class="nav__chapter">Riding on a storm</h2>
					<div class="toc">
						<a class="toc__item" href="#entry-1">
							<span class="toc__item-page">01.</span>
							<span class="toc__item-title">Riding on a storm</span>
						</a>
						<a class="toc__item" href="#entry-2">
							<span class="toc__item-page">03.</span>
							<span class="toc__item-title">Guidelines for happiness</span>
						</a>
						<a class="toc__item" href="#entry-3">
							<span class="toc__item-page">05.</span>
							<span class="toc__item-title">Freedom fighter</span>
						</a>
						<a class="toc__item" href="#entry-4">
							<span class="toc__item-page">07.</span>
							<span class="toc__item-title">Lost and found</span>
						</a>
						<a class="toc__item" href="#entry-5">
							<span class="toc__item-page">09.</span>
							<span class="toc__item-title">Fantasies of Wood</span>
						</a>
					</div>
				</nav>
				<!-- little sides -->
				<div class="slideshow__indicator"></div>
				<div class="slideshow__indicator"></div>
			</div>
		</main>
	</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 图片翻转旋转 文字翻转旋转 图片切换 旋转木马 文字切换 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 转动旋转翻转

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到