30.12.2014, 16:35
|
|
Профессор
|
|
Регистрация: 04.02.2014
Сообщений: 167
|
|
поможете пожалуйста помочь с этим делом, а то у меня что-то не вышло.
итог, ничего не работает
$('.paralax').each(arr,function(scrol){
if(scrol>this.position().top){
this.css({'background-position': '0px '+(scrol*0.7)+'px'});
}else{
this.css({'background-position': '0px 0px'});
}
})
Последний раз редактировалось xTODx, 30.12.2014 в 16:46.
|
|
30.12.2014, 19:09
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Паралакс paralax
xTODx, макет внизу это то что нужно было сделать вам, чтоб было понятно что и где не получается.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
div{
background: 0px 0px ;
height: 100%;
width: calc(100%-12px);
border: rgb(102, 0, 255) 1px solid ;
background-size: cover;
}
div:nth-of-type(1) {
background-image: url(http://www.unitrade-bg.com/userfiles/image/alps/lake-mountain-the-alps_1600x1200_92573.jpg);
}
div:nth-of-type(2) {
background-image: url(http://cdn.dipity.com/uploads/events/0ff5b92dffa076352a2370a741f5e54f_1M.png);
}
div:nth-of-type(3) {
background-image: url(http://usiter.com/uploads/20101010/gory_priroda_9570.jpg);
}
div:nth-of-type(4) {
background-image: url(http://www.krasfun.ru/images/2014/2/f7561_original.jpg);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
var scrolling = $(window).scrollTop();
$(".paralax").each(function() {
if (scrolling > $(this).offset().top) {
var y = scrolling - $(this).offset().top;
$(this).css({
"backgroundPositionY": y + "px"
})
} else $(this).css({
"backgroundPositionY": "0px"
})
})
})
});
</script>
</head>
<body>
<div class="paralax"></div>
<div class="paralax"></div>
<div class="paralax"></div>
<div class="paralax"></div>
</body>
</html>
Последний раз редактировалось рони, 30.12.2014 в 19:29.
|
|
31.12.2014, 10:55
|
|
Профессор
|
|
Регистрация: 04.02.2014
Сообщений: 167
|
|
|
Понял, простите пожалуйста! исправлюсь! обещаю!
спасибо за всё!
|
|
19.11.2015, 01:12
|
|
Интересующийся
|
|
Регистрация: 23.03.2015
Сообщений: 27
|
|
Всем привет! Можно спросить, подскажите, а как можно посчитать, если нужно background-position смещать из точки 50% 50%,
что тогда (scrol*0.7-$('.paralax').position().top)/100, я так пробую но смещение получается какое-то маленькое, не очень заметное, и в разных блоках разные значения этого смещения, помогите разобраться пожалуйста)
Вот мой вариант кода
function paralaxBg(){
$(window).scroll(function(){
var windowScrollTop = $(this).scrollTop(),
scrollSection = $('.paralax');
scrollSection.each(function(){
if(windowScrollTop>$(this).position().top){
var scrollValue = 50 - (windowScrollTop*7-$(this).position().top)/100;
$(this).css({'background-position': '50% '+scrollValue+'%'});
}else{
$(this).css({'background-position': '50% 50%'});
}
if(windowScrollTop>$(this).next().position().top){
$(this).css({'background-position': '50% 50%'});
}
});
});
}
Спасибо заранее за ответы) |
|
19.11.2015, 01:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
helgajijka,
макет бы полностью
|
|
19.11.2015, 09:34
|
|
Интересующийся
|
|
Регистрация: 23.03.2015
Сообщений: 27
|
|
рони,
У меня тут в принципе много всего, но по сути макет в структуре как и у Вас, просто идут блоки-секции, некоторые из них, начиная с header имеют фоновый картинки, проблема именно с блоком header, есть условие, что его фоновая картинки должна быть изначально в положении 50% 50%, и отсюда считать смещение.
Я уже сделала такой вариант, паралакс столько для header в скрипте, а для остальных блоков просто с помощью background-attachment: fixed, но все равно как-то в header получается еле заметный паралакс)) Пробовала менять значения, но пока не удалось подобрать нужное))
Если отбросить лишнее в моем макете, что не касается данного вопроса, то получается как-то так.
Правда, простите, не знаю как сделать, как у Вас, чтобы рабочий пример размещать, чтобы его можно было запустить, плюс фоток в блоках нет, чтобы тоже просмотреть)
<!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("../images/header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.section-form{
background: url("../images/section-form-bg.jpg") 50% 50% no-repeat;
background-size: cover;
background-attachment: fixed;
}
</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(),
scrollSection = $('.paralax');
if(windowScrollTop>scrollSection .position().top){
var scrollValue = 50 - (windowScrollTop*7-scrollSection .position().top)/100;
scrollSection .css({'background-position': '50% '+scrollValue+'%'});
}else{
scrollSection .css({'background-position': '50% 50%'});
}
if(windowScrollTop>scrollSection .next().position().top){
scrollSection .css({'background-position': '50% 50%'});
}
});
});
</script>
</head>
<body>
<header class="header paralax"></div>
<div class="section-promo-block1"></div>
<div class="section-promo-block2"></div>
<div class="section-form"></div>
<div class="section-promo-block3"></div>
<footer></footer>
</body>
</html>
Спасибо за помощь!
Последний раз редактировалось helgajijka, 19.11.2015 в 09:43.
|
|
19.11.2015, 09:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
helgajijka,
[HTML run height=700][/HTML]
и что в паралаксе неустраивает?
<!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-form{
background: url("../images/section-form-bg.jpg") 50% 50% no-repeat;
background-size: cover;
background-attachment: fixed;
}
div{
background-position: 50% 50%;
height: 100%;
width: calc(100%-12px);
border: rgb(102, 0, 255) 1px solid ;
background-size: cover;
}
div:nth-of-type(1) {
background-image: url(http://www.unitrade-bg.com/userfiles/image/alps/lake-mountain-the-alps_1600x1200_92573.jpg);
}
div:nth-of-type(2) {
background-image: url(http://cdn.dipity.com/uploads/events/0ff5b92dffa076352a2370a741f5e54f_1M.png);
}
div:nth-of-type(3) {
background-image: url(http://usiter.com/uploads/20101010/gory_priroda_9570.jpg);
}
div:nth-of-type(4) {
background-image: url(http://www.krasfun.ru/images/2014/2/f7561_original.jpg);
}
</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');
if(windowScrollTop>header.position().top){
var scrollValue = 50 - (windowScrollTop*7-header.position().top)/100;
header.css({'background-position': '50% '+scrollValue+'%'});
}else{
header.css({'background-position': '50% 50%'});
}
if(windowScrollTop>header.next().position().top){
header.css({'background-position': '50% 50%'});
}
});
});
</script>
</head>
<body>
<header class="header paralax"></header>
<div class="section-promo-block1"></div>
<div class="section-promo-block2"></div>
<div class="section-form paralax"></div>
<div class="section-promo-block3"></div>
<footer></footer>
</body>
</html>
|
|
19.11.2015, 21:47
|
|
Интересующийся
|
|
Регистрация: 23.03.2015
Сообщений: 27
|
|
рони,
Спасибо большое Вам, что уделяете моим вопросам внимание, не перестану Вас благодарить за Ваше участие и помощь!
По поводу паралакса, спасибо также, что помогли оформить код.
У меня тут проблема образовалась именно с блоком 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>
Последний раз редактировалось helgajijka, 19.11.2015 в 21:53.
|
|
19.11.2015, 22:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
helgajijka,
непонял ничего ...
возможно вам нужно это
.header{
position: relative;
height: 620px;
background-image: url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
|
|
19.11.2015, 22:37
|
|
Интересующийся
|
|
Регистрация: 23.03.2015
Сообщений: 27
|
|
|
простите что я так все замудрено пыталась объяснить) но мне изложить сложно эти все требования. Фон должен растягиваться на всю ширину, нужен именно cover, но не сдвигаться при разной ширине экрана. Ну да ладно, будем искать какой-то компромисс, а то я и сама уже запуталась и Вас запутала.
Еще раз спасибо за помощь!
|
|
|
|
