Форум

imhateb · #1 (**permalink**) 16.03.2014, 05:04

Доброго времени суток.
Помогите пожалуйста справиться с задачей, уже второй день не сплю.

Я хотел бы использовать на сайте этот плагин - http://prinzhorn.github.io/skrollr/, добавляющий эффекты при прокрутке страницы. Эффекты добавляются путём приписывания блоку специальных атрибутов типа:

data-0="width:0%;background:hsl(200, 100%, 50%);" 
data-950="width:100%;background:hsl(920, 100%, 50%);"

где 0 и 950 - количество "прокручиваемых" пикселей (window.pageYOffset).

Так вот, как бы мне генерировать эти атрибуты при загрузки страницы (или при изменении размеров окна)?
Я хотел бы, чтобы второй атрибут data был равен data-*высота окна*.

Пробовал просто присваивать атрибуты через .attr()

$('.left').attr('data-0', 'width:0%;background:hsl(200, 100%, 50%)');
$('.left').attr('data-'+950, 'width:100%;background:hsl(920, 100%, 50%)');

Планировал потом вместо "950" вставить переменную. Но почему-то плагин работать отказался.

Он работает только если в div'е сразу прописывать эти атрибуты...

<div class="left" data-0="width:0%;background:hsl(200, 100%, 50%);" data-950="width:100%;background:hsl(920, 100%, 50%);"></div>

Как быть? Помогите, товарищи.

рони · #2 (**permalink**) 16.03.2014, 11:16

imhateb,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link href="http://prinzhorn.github.io/skrollr/examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
	<link href="http://prinzhorn.github.io/skrollr/examples/main.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .left {
      height: 100px;
      width:0%;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
	<!--[if lt IE 9]>
	<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.ie.min.js"></script>
	<![endif]-->
    <script>
     $(function(){
 var h = $(window).height(), obj = {'data-0':'width:0%;background:hsl(200, 100%, 50%)'};
 obj['data-'+h] = 'width:100%;background:hsl(920, 100%, 50%)'
 $('.left').attr(obj);
  var s = skrollr.init({

	});
      })
    </script>

</head>

<body>
    <div class="left" ></div>
</body>

</html>

imhateb · #3 (**permalink**) 16.03.2014, 15:07

Блин, спасибо большое! От души! Всё работает.
Если интересно, потом пришлю результат своих трудов.
По-любому пришлю )))
Спасибо!

imhateb · #4 (**permalink**) 16.03.2014, 18:05

Я дико извиняюсь, но не могли бы Вы мне ещё подсказать, как заставить работать этот момент при изменении размеров окна.
Почему-то код

$(window).resize(function() {
 var h = $(window).height(), obj = {'data-0':'width:0%;background:hsl(200, 100%, 50%)'};
 obj['data-'+h] = 'width:100%;background:hsl(920, 100%, 50%)'
 $('.left').attr(obj);
  var s = skrollr.init({

	});
      })

не хочет работать.

Вернее он работает, но параметр data-+h остаётся прежним.

рони · #5 (**permalink**) 16.03.2014, 18:45

imhateb,
http://learn.javascript.ru/play/14yHKb

Форум

Справочник

Discord чат

Курсы javascript