jquery css3图片文字介绍鼠标滚动页面特效代码下载


jquery css3图片文字介绍鼠标滚动页面特效代码下载
jquery css3图片文字介绍鼠标滚动页面特效代码下载以及图片文字介绍、鼠标滚动页面等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.scrollintro.css">
<link rel="stylesheet" href="css/animate.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.49511.js"></script>
<script type="text/javascript" src="js/jquery.scrollintro.min.js"></script>

3. HTML代码

<div class="wrapper">
	<div class="navigation">
		<ul>
			<li><a href="#content1"><span class="navSelect"></span></a></li>
			<li><a href="#content2"><span></span></a></li>
			<li><a href="#content3"><span></span></a></li>
			<li><a href="#content4"><span></span></a></li>
		</ul>
	</div>
	<div class="scroll-content" id="content1">
		<h3 class="animate-block">Click the image to next content</h3>
		<div class="content100-block animate-block">
			<img src="imgs/triworks_abstract31.jpg" class="animate-block full-image" id="click2next" />
			<p class="animate-block full-text">Lorem ipsum link to portfolio amet, 
			consectetur adipisicing elit. Sunt, iure, tempore saepe ab sed a doloribus 
			ipsam veritatis explicabo officia fugit eligendi dicta autem aperiam 
			facilis illum libero accusantium in.</p>
			<p class="animate-block full-text">Veritatis explicabo illum libero 
			accusantium in.</p>
		</div>
	</div>
	<div class="scroll-content" id="content2" data-easein="bounceInUp">
		<h3 class="animate-block">Say something important here</h3>
		<div class="animate-block content240-block">
			<img src="imgs/icons/finder.png" class="image240-block" />
			<p class="animate-block caption">
			<a href="https://www.51qianduan.com/">51前端</a> This 
			some little information here, you can put it under the image.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/foler.png" class="image240-block" />
			<p class="animate-block caption">Et quas consequatur architecto itaque 
			accusantium dolor quod obcaecati veritatis dolorem velit enim minima!</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/fonts.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nostrum, voluptas, alias, molestiae quos.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/game.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nobis, assumenda tenetur iusto ipsa illum incidun.</p>
		</div>
	</div>
	<div class="scroll-content" id="content3" data-easein="rollIn">
		<h3 class="animate-block">Say something important here</h3>
		<div class="animate-block content240-block">
			<img src="imgs/icons/homegroup.png" class="image240-block" />
			<p class="animate-block caption">
			<a href="https://www.51qianduan.com/">51前端</a> This 
			some little information here, you can put it under the image.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/control.png" class="image240-block" />
			<p class="animate-block caption">Et quas consequatur architecto itaque 
			accusantium dolor quod obcaecati veritatis dolorem velit enim minima!</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/gadgets.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nostrum, voluptas, alias, molestiae quos.</p>
		</div>
		<div class="animate-block content240-block">
			<img src="imgs/icons/connect.png" class="image240-block" />
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. Nobis, assumenda tenetur iusto ipsa illum incidun.</p>
		</div>
	</div>
	<div class="scroll-content" id="content4">
		<h3 class="animate-block">Support circle thumbnail tooo</h3>
		<div class="content240-block animate-block">
			<img src="imgs/icons/signal.png" class="circle-image" />
			<h4 class="subtitle">Wifi</h4>
			<p class="animate-block caption">Lorem Pariatur iusto ex quo iusto sapiente 
			facere officiis. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/music.png" class="circle-image" />
			<h4 class="subtitle">Music</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/phone.png" class="circle-image" />
			<h4 class="subtitle">Phone</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. iusto sapiente facere officiis. </p>
		</div>
		<div class="content240-block animate-block">
			<img src="imgs/icons/clock.png" class="circle-image" />
			<h4 class="subtitle">Clock</h4>
			<p class="animate-block caption">Lorem ipsum dolor sit amet, consectetur 
			adipisicing elit. iusto sapiente facere officiis. </p>
		</div>
	</div>
</div>

相关推荐

发表评论

相关文章