css 滚动文字动画特效代码下载



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

7 27 10



特效描述:滚动文字动画。页面滚动文字动画

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/demo1.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/demo1.js"></script>

3. HTML代码

</a><!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 scrolling letters animation where some text changes depending on the page's scroll position" />
		<meta name="keywords" content="scroll, letters, animation, javascript, web design, web development" />
		<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="demo-1 loading">
		<main>
			<div class="content">
				<header class="jq22-header">
					<h1 class="jq22-header__title">Scrolling Letters Animation</h1>
					<nav class="demos">
						<a class="demo demo--current" href="index.html"><span>#1</span></a>
						<a class="demo" href="index2.html"><span>#2</span></a>
						<a class="demo" href="index3.html"><span>#3</span></a>
						<a class="demo" href="index4.html"><span>#4</span></a>
						<a class="demo" href="index5.html"><span>#5</span></a>
					</nav>
					<a href="https://51qianduan.com/jq22/ScrollingLettersAnimation" title="Find this project on GitHub" class="github"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
				</header>
			</div>
			<div class="content">
				<div class="content__section">
					<div class="content__main">
						<span>Quincy Steward</span>
						<span>Portfolio/</span>
					</div>
					<h2 class="content__text">Works</h2>
				</div>
				<div class="content__section">
					<a class="content__link"><img class="content__img" src="img/set1/1.jpg" alt="img"/></a>
					<h2 class="content__text">Blancmange</h2>
				</div>
				<div class="content__section">
					<a class="content__link"><img class="content__img" src="img/set1/2.jpg" alt="img"/></a>
					<h2 class="content__text">Cytoskeleton</h2>
				</div>
				<div class="content__section">
					<a class="content__link"><img class="content__img" src="img/set1/3.jpg" alt="img"/></a>
					<h2 class="content__text">Luminescence</h2>
				</div>
				<div class="content__section">
					<a class="content__link"><img class="content__img" src="img/set1/4.jpg" alt="img"/></a>
					<h2 class="content__text">Aboveboard</h2>
				</div>
				<div class="content__section">
					<a class="content__link"><img class="content__img" src="img/set1/5.jpg" alt="img"/></a>
					<h2 class="content__text">Rambunctious</h2>
				</div>
				<div class="content__section">
					<a class="content__link content__link--nobottom"><img class="content__img" src="img/set1/6.jpg" alt="img"/></a>
					<h2 class="content__text">Abolitionist</h2>
				</div>
				<div class="content__section">
					<h2 class="content__text">Contact</h2>
					<div class="content__contact">
						<a href="#">Twitter</a>
						<a href="#">Slack</a>
						<a href="#">hello'at'quincy.com</a>
					</div>
				</div>
			</div>
		</main>
	</body>
</html>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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