هیدر متحرک با حرکت اسکرول On-Scroll Animated Header

سلام
عید فاطمی تان مبارک
این اولین نوشته ما در سال جدید است .

در این نوشته قصد دارم اسکریپت هدر متحرک با اسکرول ، یعنی هدری که با اسکروب خوردن صفحه تغییر موقعیت میدهد را برایتون معرفی و روش استفاده از آن را آموزش دهم .

در این آموزش ها نیازی به دانش جی کوئری و جاوا اسکریپت نیست و شما فقط با کپی پیس کردن میتوانید از پلاگین استفاده کنید. در جا هایی که تنظیمات دلخواهی در کد های جاوا اسکریپت باشد در آموزش حتما قید میشود.( البته که شما اگر دانش کد نویسی جاوا اسکریپت داشته باشید خیلی بهتر می توانید از پلاگین استفاده کنید)

پیش نمایش آموزش
اول از همه تابع های کتابخانه ای جیکوئری و فایل های استایل را فراخوانی میکنیم :

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

<script src="js/modernizr.custom.js"></script>

و حال کد های html مربوط به هدر :

<div class="cbp-af-header">
	<div class="cbp-af-inner">
		<h1>Fixed</h1>
		<nav>
			<a href="#">Broccoli</a>
			<a href="#">Almonds</a>
			<a href="#">Pears</a>
			<a href="#">Oranges</a>
		</nav>
	</div>
</div>

و کد های استایل هیدر :

.cbp-af-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #f6f6f6;
	z-index: 10000;
	height: 230px;
	overflow: hidden;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}
.cbp-af-header .cbp-af-inner {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em;
}
.cbp-af-header h1,
.cbp-af-header nav {
	display: inline-block;
	position: relative;
}
/* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
	line-height: 230px;
}
.cbp-af-header h1 {
	text-transform: uppercase;
	color: #333;
	letter-spacing: 4px;
	font-size: 4em;
	margin: 0;
	float: left;
}
.cbp-af-header nav {
	float: right;
}
.cbp-af-header nav a {
	color: #aaa;
	font-weight: 700;
	margin: 0 0 0 20px;
	font-size: 1.4em;
}
.cbp-af-header nav a:hover {
	color: #333;
}
/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.cbp-af-header.cbp-af-header-shrink {
	height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
	line-height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
	font-size: 2em;
}
/* Example Media Queries */
@media screen and (max-width: 55em) {
	
	.cbp-af-header .cbp-af-inner {
		width: 100%;
	}
.cbp-af-header h1,
	.cbp-af-header nav {
		display: block;
		margin: 0 auto;
		text-align: center;
		float: none;
	}
.cbp-af-header h1,
	.cbp-af-header nav a {
		line-height: 115px;
	}
.cbp-af-header nav a {
		margin: 0 10px;
	}
.cbp-af-header.cbp-af-header-shrink h1,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 45px;
	}
.cbp-af-header.cbp-af-header-shrink h1 {
		font-size: 2em;
	}
.cbp-af-header.cbp-af-header-shrink nav a {
		font-size: 1em;
	}
}
@media screen and (max-width: 32.25em) {
	.cbp-af-header nav a {
		font-size: 1em;
	}
}
@media screen and (max-width: 24em) {
	.cbp-af-header nav a,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 1;
	}
}

در پایان قبل از بسته شدن بادی  تابع های زیر را فراخوانی کنید :

<script src="js/classie.js"></script>
		<script src="js/cbpAnimatedHeader.min.js"></script>

دانلود فایل سورس آموزش

عیدی خوبی داشته باشید .
یا علی