Форум

imedia · #1 (**permalink**) 10.06.2014, 00:51

Здравствуйте, скажите почему анимация не плавная в данном случае?
Почему это может быть?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>

<style>
#content{
width:100%;
height:300px;
overflow-y:auto;

}
.template_banner{
position:fixed;
width:100%;
height:170px;
background:#ee9;
z-index:2;
}
#content_text{
position:relative;
z-index:1;
margin-top:180px;
}
</style>
</head>
<body>
<div id="content">
<div class="template_banner">

</div>
<div id="content_text">
h1>Изготовление Веб сайтов</h1>
		<p>Уважаемый будующий клиент компании Интер Медиа!

Мы сделаем для Вас лучший веб сайт среди множества ваших конкурентов см.ПОРТФОЛИО
Для того чтобы получить эксклюзивный, непохожий на другие веб сайты, интернет проект.
Необходимо понять основные этапы производства интернет сайта и предъявить нам 
определенные требования к изготовлению Вашего шедевра который будет покорять интернет пространство.
В этой статье мы раскажем вам подробно о процессе создания веб сайтов, прочитав 
ее вы будете иметь возможность выбирать то что вам необходимо без излишеств, 
тем самым вы сможете сформировать свой бюджет на создание сайта.</p>

<h3>Процесс изготовления веб сайтов</h3>

    <ul>
	<li>разработка структуры сайта
    <li>формирование цены интернет проекта
    <li>web design
    <li>создание постраничного макета сайта
    <li>создание уникального контента
    <li>написание статей
    <li>подбор фотографий и видео
    <li>написание програмного кода веб сайта
    <li>программирование веб приложения
    <li>программирование административной части
    <li>продвижение интернет сайта
    <li>обслуживание интернет сайта
    <li>Хостинг
    <li>Мониторинг и ежедневное обслуживание веб рессурса
    <li>удержание веб сайта в поисковых системах 
</ul>

<h3>Создание структуры интернет приложения</h3>

<p>На этом этапе создания интернет сайта происходит общение с заказчиком.
 Мы узнаем цель изготовления интернет рессурса и его вид. 
 Первый - это сайт визитка. 
 Как правило, сайт такого вида представляет пользователям графически уникально 
 продукт или Вашу компанию, контактную информацию и имеет легкую 
 административную страницу для редактирования текста и фотографий. 
 Изготовление интернет портала это более трудоемкий процесс. 
 Портал вмещает в себя новостной и другие блоки, различные формы 
 для общения с посетителем и сбора от него информации. 
 Интернет портал уже может содержать форум и его административная 
 страница более сложная и предоставляет возможность редактировать 
 почти все на веб сайте.<p>
</div>
</div>
<script>
$(window).scroll(function(){
var scrolled = $(window).scrollTop();
if(scrolled=>10){
$('.template_banner').animate({"height":"70px"},600,'easeOutQuart',function() {
}).stop(true,true)
}
if(scrolled<=9){
$('.template_banner').animate({"height":"170px"},600,'easeOutQuart',function() {
}).stop(true,true)
}
 });
</script>
</body>
</html>

imedia · #2 (**permalink**) 10.06.2014, 00:59

Здесь вообще не работает, задумка в том чтобы при скроллинге плавно уменьшить блок class="template_banner"

sergeo_89 · #3 (**permalink**) 10.06.2014, 11:07

Ошибка была в том, что вы обращались к window, когда надо было к #content... маленько отредактировал ваш код)
http://learn.javascript.ru/play/tZqw1b

imedia · #4 (**permalink**) 13.06.2014, 01:17

Спасибо Вам огромное за то что отозвались, но немного не так я хочу сделать, если возможно с Вашей стороны посмотрите страницу
http://pasalskiy.com.ua/articles/pages/webdesign
при скроллинге хочу чтобы плавно изменила свою высоту полоса с небесами

$(window).scroll(function(){
var scrolled = $(window).scrollTop();
if(scrolled=>10){
$('.template_banner').animate({"height":"70px"},1600,'easeOutQuart',function() {
$('#logo_articles').css("display","none")
}).stop(true,true)
}
if(scrolled<=9){
$('.template_banner').animate({"height":"170px"},1600,'easeOutQuart',function() {
$('#logo_articles').css("display","block")
}).stop(true,true)
}
 });

sergeo_89 · #5 (**permalink**) 14.06.2014, 13:55

ну Я ведь вам говорю, что бы обратиться к полосе с небесами необходимо вместо window, прописать #content

$('#content').scroll(function(){
var scrolled = $('#content').scrollTop();
if(scrolled=>10){
$('.template_banner').animate({"height":"70px"},1600,'easeOutQuart',function() {
$('#logo_articles').css("display","none")
}).stop(true,true)
}
if(scrolled<=9){
$('.template_banner').animate({"height":"170px"},1600,'easeOutQuart',function() {
$('#logo_articles').css("display","block")
}).stop(true,true)
}
 });

ну и к главному background укажите fixed

Форум

Справочник

Discord чат

Курсы javascript