用CSS3制作一个令人印象深刻的产品展示
在您的网站上任何页面产品页面上展示产品。它用一些截图来描述它的功能。你对你的产品建立了游客的兴趣,但越来越难做原来在抓住他们的注意力。幸运的是JavaScript库可以帮助你做出一个飞溅效果。
impress.js是一个小的、独立的库,它可以很容易地设计出先进的CSS3演示抢眼效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- The Slides Will Go Here -->
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/impress.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
HTML
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br />
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes ..</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and..</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
CSS
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
color:#444648;
position:absolute;
z-index:10;
}
#impress p{
font: normal 18px/1.3 'Open Sans', sans-serif;
color:#27333f;
position:absolute;
z-index:10;
}
#impress img{
position:absolute;
z-index:1;
}
Js
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
在线演示
【用CSS3制作一个令人印象深刻的产品展示】相关文章
2. 令人印象深刻的 jQuery 模态框插件 – iLightBox
3. 令人印象深刻的 jQuery 模态框插件 – iLightBox
5. 16 个印象深刻的 HTML5/CSS3/JavaScript 体验
10. 利用CSS3制作动画效果
本文来源:https://www.51html5.com/a955.html
﹝用CSS3制作一个令人印象深刻的产品展示﹞相关内容
- 用css3制作纸张效果
- 利用CSS3制作动画效果
- CSS3制作的分页导航
- CSS3制作购物车下拉列表
- CSS3制作Login栏
- CSS3制作分步注册表单
- CSS3制作价格标牌
- CSS3制作下拉菜单
- CSS3制作下拉工具条
- css3制作日历风格登陆表单