рони,
Спасибо большое Вам, что уделяете моим вопросам внимание, не перестану Вас благодарить за Ваше участие и помощь!
По поводу паралакса, спасибо также, что помогли оформить код.
У меня тут проблема образовалась именно с блоком header, проблема под названием - дизайнер))
Его требование, чтобы картинка позиционировалась по центру на любых разрешениях экрана,
поэтому я не могу поставить блоку header background-attachment: fixed, иначе он ее тянет на разрешениях по разному,
При этом условии нужно сделать паралакс фона, но также чтобы он смотрелся на разных разрешениях одинаково.
При таком вычислении как в данном коде это тоже не получается. Думаю у меня вообще не получится реализовать его задание)
Самое интересное предложила еще один вариант, когда идет transform текста в блоке и этот тоже не устраивает, даже не знаю что ему сказать))
Вариант паралакса с лого текстом
<!DOCTYPE HTML>
<html>
<head>
<title>Template</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
.header{
position: relative;
height: 620px;
background-image: url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.section-promo-block1{
height: 1000px;
background: #333;
}
.logo{
padding: 200px 0 0;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function(){
var windowScrollTop = $(this).scrollTop(),
header= $('.header'),
logo = $('.logo');
if(windowScrollTop>header.position().top){
logo.css({"transform": "translate(0px, "+ windowScrollTop/2 +"px)"});
}else{
logo.css({"transform": "none"});
}
if(windowScrollTop>header.next().position().top){
logo.css({"transform": "none"});
}
});
});
</script>
</head>
<body>
<header class="header paralax">
<div class="logo">Это логотип странички</div>
</header>
<div class="section-promo-block1"></div>
<footer></footer>
</body>
</html>
