Дергается липкий слой при wow анимации

[Lemoner]

Увидеть дрыгание липкого слоя можно на salmon.kz Дрыгается в хроме и опере при скролле и срабатывании анимации элементов. Точно знаю, что проблему решит плавный скролл типа ultimate scroll но принципиально интересно почему такая фигня?

[anonimus]

[Lemoner]

так и стоит на "0".

[anonimus]

используйте не липкий слой, а прикрепляющийся

[Gudwinn]

Прикрепляющийся слой не всегда несёт возложенную на него миссию. правильней в слое по умолчанию делать запись в исходнике, в особом стиле : position: fixed; и всё норм. Но опять же, нужно отпозиционнировать слой там. где нужно фиксированное отображение

[anonimus]

можно и так, я даже спорить не буду
хотя мог бы доказать иное

[Sveta2608]

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

[anonimus]

[Sveta2608]

anonimus, так и стоит))) все равно дергается)))

[anonimus]

сбросьте архив, посмотрю и сообщите его ID, что бы не искать

Отправлено спустя 38 минут 27 секунд:
Светлана, посмотрел. Результаты отправил в скайп

[Gudwinn]

Лично мне помогает с работой с липкими слоями вот этот скрипт, который надо разместить в Head

<script>
(function($){$(document).ready(function(){var framerate=150;var animtime=600;var stepsize=150;var pulseAlgorithm=true;var pulseScale=5;var pulseNormalize=1;var disableKeyboard=false;var arrowscroll=50;var exclude="";var frame=false;var direction={x:0,y:0};var initdone=false;var fixedback=true;var activeElement;var root;var key={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36};function initTest(){if(document.URL.indexOf("google.com/reader/view")>-1){disableKeyboard=true;}
if(exclude){var domains=exclude.split(/[,\n] ?/);for(var i=domains.length;i--;){if(document.URL.indexOf(domains[i])>-1){removeEvent("mousewheel",wheel);disableKeyboard=true;break;}}}}
function init(){if(!document.body)return;var body=document.body;var html=document.documentElement;var windowHeight=window.innerHeight;var scrollHeight=body.scrollHeight;root=(document.compatMode.indexOf('CSS')>=0)?html:body;activeElement=body;initTest();initdone=true;if(top!=self){frame=true;}else if(scrollHeight>windowHeight&&(body.offsetHeight<=windowHeight||html.offsetHeight<=windowHeight)){root.style.height="auto";if(root.offsetHeight<=windowHeight){var underlay=document.createElement("div");underlay.style.clear="both";body.appendChild(underlay);}}
if(document.URL.indexOf("mail.google.com")>-1){var s=document.createElement("style");s.innerHTML=".iu { visibility: hidden }";(document.getElementsByTagName("head")[0]||html).appendChild(s);}
if(!fixedback){body.style.backgroundAttachment="scroll";}
if(disableKeyboard){removeEvent("keydown",keydown);}}
var que=[];var pending=false;function scrollArray(elem,left,top,delay){delay||(delay=1000);directionCheck(left,top);que.push({x:left,y:top,lastX:(left<0)?0.99:-0.99,lastY:(top<0)?0.99:-0.99,start:+new Date});if(pending){return;}
var step=function(){var now=+new Date;var scrollX=0;var scrollY=0;for(var i=0;i<que.length;i++){var item=que[i];var elapsed=now-item.start;var finished=(elapsed>=animtime);var position=(finished)?1:elapsed / animtime;if(pulseAlgorithm){position=pulse(position);}
var x=(item.x*position-item.lastX)>>0;var y=(item.y*position-item.lastY)>>0;scrollX+=x;scrollY+=y;item.lastX+=x;item.lastY+=y;if(finished){que.splice(i,1);i--;}}
if(left){var lastLeft=elem.scrollLeft;elem.scrollLeft+=scrollX;if(scrollX&&elem.scrollLeft===lastLeft){left=0;}}
if(top){var lastTop=elem.scrollTop;elem.scrollTop+=scrollY;if(scrollY&&elem.scrollTop===lastTop){top=0;}}
if(!left&&!top){que=[];}
if(que.length){setTimeout(step,delay / framerate+1);}else{pending=false;}}
setTimeout(step,0);pending=true;}
function wheel(event){if(!initdone){init();}
var target=event.target;var overflowing=overflowingAncestor(target);if(!overflowing||event.defaultPrevented||isNodeName(activeElement,"embed")||(isNodeName(target,"embed")&&/\.pdf/i.test(target.src))){return true;}
var deltaX=event.wheelDeltaX||0;var deltaY=event.wheelDeltaY||0;if(!deltaX&&!deltaY){deltaY=event.wheelDelta||0;}
if(Math.abs(deltaX)>1.2){deltaX*=stepsize / 120;}
if(Math.abs(deltaY)>1.2){deltaY*=stepsize / 120;}
scrollArray(overflowing,-deltaX,-deltaY);event.preventDefault();}
function keydown(event){var target=event.target;var modifier=event.ctrlKey||event.altKey||event.metaKey;if(/input|textarea|embed/i.test(target.nodeName)||target.isContentEditable||event.defaultPrevented||modifier){return true;}
if(isNodeName(target,"button")&&event.keyCode===key.spacebar){return true;}
var shift,x=0,y=0;var elem=overflowingAncestor(activeElement);var clientHeight=elem.clientHeight;if(elem==document.body){clientHeight=window.innerHeight;}
switch(event.keyCode){case key.up:y=-arrowscroll;break;case key.down:y=arrowscroll;break;case key.spacebar:shift=event.shiftKey?1:-1;y=-shift*clientHeight*0.9;break;case key.pageup:y=-clientHeight*0.9;break;case key.pagedown:y=clientHeight*0.9;break;case key.home:y=-elem.scrollTop;break;case key.end:var damt=elem.scrollHeight-elem.scrollTop-clientHeight;y=(damt>0)?damt+10:0;break;case key.left:x=-arrowscroll;break;case key.right:x=arrowscroll;break;default:return true;}
scrollArray(elem,x,y);event.preventDefault();}
function mousedown(event){activeElement=event.target;}
var cache={};setInterval(function(){cache={};},10*1000);var uniqueID=(function(){var i=0;return function(el){return el.uniqueID||(el.uniqueID=i++);};})();function setCache(elems,overflowing){for(var i=elems.length;i--;)
cache[uniqueID(elems[i])]=overflowing;return overflowing;}
function overflowingAncestor(el){var elems=[];var rootScrollHeight=root.scrollHeight;do{var cached=cache[uniqueID(el)];if(cached){return setCache(elems,cached);}
elems.push(el);if(rootScrollHeight===el.scrollHeight){if(!frame||root.clientHeight+10<rootScrollHeight){return setCache(elems,document.body);}}else if(el.clientHeight+10<el.scrollHeight){overflow=getComputedStyle(el,"").getPropertyValue("overflow");if(overflow==="scroll"||overflow==="auto"){return setCache(elems,el);}}}while(el=el.parentNode);}
function addEvent(type,fn,bubble){window.addEventListener(type,fn,(bubble||false));}
function removeEvent(type,fn,bubble){window.removeEventListener(type,fn,(bubble||false));}
function isNodeName(el,tag){return el.nodeName.toLowerCase()===tag.toLowerCase();}
function directionCheck(x,y){x=(x>0)?1:-1;y=(y>0)?1:-1;if(direction.x!==x||direction.y!==y){direction.x=x;direction.y=y;que=[];}}
function pulse_(x){var val,start,expx;x=x*pulseScale;if(x<1){val=x-(1-Math.exp(-x));}else{start=Math.exp(-1);x-=1;expx=1-Math.exp(-x);val=start+(expx*(1-start));}
return val*pulseNormalize;}
function pulse(x){if(x>=1)return 1;if(x<=0)return 0;if(pulseNormalize==1){pulseNormalize /=pulse_(1);}
return pulse_(x);}
if(/chrome/.test(navigator.userAgent.toLowerCase())){addEvent("mousedown",mousedown);addEvent("mousewheel",wheel);addEvent("keydown",keydown);addEvent("load",init);}});})(jQuery);
</script>

Кстати иногда спасает когда исключаешь слой из слоя -родителя.

[Alex]

Gudwinn, сам то можешь прочитать код? Столько цветов на выбор, а ты взял именно этот

[Gudwinn]

Источник цитаты Столько цветов на выбор

Да чё то поначалу не учёл что фон серый, а на беленьком ничё так, свеженько бы смотрелось)))

[Sveta2608]

ничего себе код пусть дергается лучше, я в этом коде не разберусь)))

[Gudwinn]

так можно при желании подлючить одной строкой в файл js (по принципу CSS ных стилей) запихать,и все дела, у нас тут полно мастеров на такие дела, могут подсказать, если что не ясно))).

[dmitryp]

Вот тут: viewtopic.php?f=7&t=3815 седьмой пост, хорошее решение, короткий код) правда в планшетной версии с ним косяки были.
Кстати при скроле сайта на технике apple (в разный браузерах) липкий слой постоянно плавал от своей позиции примерно на 100px, пришлось использовать position: fixed

[Gudwinn]

Дело не в величине кода. а в функциональности. и удобстве в работе, У Игоря нормальное решение,и если есть желание, можно и айдишники слоёв вписывать, коварство кроется в другом, когда нибудь, где нибудь, уже ближе к концу завершения проекта Вы можете нечаяно удалить такой слой который вписали в скрипт. и потом голова будет трещать, где же этот слой? и почему всё поехало и поплыло, принцип ясен я думаю (тем более если слоёв за несколько сотен допустим). В моём же случае, тупо вставил код и всё, липкие слоя не шолохнуться. и будут работать ка положено. Я допускаю. что Вас очень волнует, что же будет чувствовать человек который копается в ваших исходниках, тогда можно вынести скрипт во внешний файл.И уж конкретно более забавно звучит когда размышляют о величине кода))) Значит картинки пихать на сайт по 10 мб весом, это нормально, а скрипт который и 50 кб не весит наверное, зато помогает, это блин так много, ого го просто))))

[Sveta2608]

Gudwinn, подключила Ваш код, у меня почему то он не работает)

[igorweb]

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

Да, если слоев очень много на странице, то немножко не удобно их все вписывать в код. Но, думаю, так не часто случается и к тому же код ведь можно ставить только в исходнике определенной страницы, а не один на весь сайт. И его можно применить не только к слоям, а вообще к любому объекту (изображения, слои, картинки, галерея и т.п.).

Источник цитаты правда в планшетной версии с ним косяки были

Не знаю, у меня нормально работает и на мобильных, и на планшетах. Видимо, где-то ошибка у Вас была.

[Gudwinn]

Источник цитаты у меня почему то он не работает

Сначала как обычно выставляются данные липкого слоя, задержка 0, в head ваставляется код, и тормоза с дёрганьем прекращаюся, скиньте wbs, посмотрю что там у Вас