I have three card in horizontal, i just want animate them like this https://www.bluelabellabs.com/work/delve/ (the Result Section)
My JS Code:
`window.addEventListener('scroll', () => {
const cardOne = document.getElementById("box_one")
const cardTwo = document.getElementById("box_two")
const cardThree = document.getElementById("box_three")
const scrollYValue = window.scrollY;
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
const cardOne = document.getElementById("box_one")
const cardTwo = document.getElementById("box_two")
const cardThree = document.getElementById("box_three")
const scrollYValue = window.scrollY;
$(window).scroll(function() {
var position = $(window).scrollTop();
var scroll = $(window).scrollTop();
// console.log(scroll, position);
if (scroll >= position) {
console.log("Up");
cardOne.style.transform = "translate3d(0px, " + -scrollYValue / 200 + "em, 0px)",
cardTwo.style.transform = "translate3d(0px, " + -scrollYValue / 600 + "em, 0px)",
cardThree.style.transform = `translateY(${scrollYValue / 30}px)`
} else if (scroll <= position) {
console.log("back");
cardOne.style.transform = "translate3d(0px, " + scrollYValue + "px, 0px)",
cardTwo.style.transform = `translateY(${-scrollYValue / 90}px)`
cardThree.style.transform = `translateY(${-scrollYValue / 30}px)`
}
position = scroll;
});
}
});
})`
Related
I have a question. I have a script :
$(document).ready(function () {
$(document).on('scroll', function () {
const windowHeight = $(window).height()
const scrollValue = $(this).scrollTop();
const $art1 = $('.art1');
const art1FromTop = $art1.offset().top
const art1Height = $art1.outerHeight()
const $art2 = $('.art2');
const art2FromTop = $art2.offset().top
const art2Height = $art2.outerHeight()
const $art3 = $('.art3');
const art3FromTop = $art3.offset().top
const art3Height = $art3.outerHeight()
const $art4 = $('.art4');
const art4FromTop = $art4.offset().top
const art4Height = $art4.outerHeight()
const $art5 = $('.art5');
const art5FromTop = $art5.offset().top
const art5Height = $art5.outerHeight()
const $art6 = $('.art6');
const art6FromTop = $art6.offset().top
const art6Height = $art6.outerHeight()
const $art7 = $('.art7');
const art7FromTop = $art7.offset().top
const art7Height = $art7.outerHeight()
if (scrollValue > art1FromTop + art1Height / 2 - windowHeight) {
$art1.addClass('active');
}
if (scrollValue > art2FromTop + art2Height / 2 - windowHeight) {
$art2.addClass('active');
}
if (scrollValue > art3FromTop + art3Height / 2 - windowHeight) {
$art3.addClass('active');
}
if (scrollValue > art4FromTop + art4Height / 2 - windowHeight) {
$art4.addClass('active');
}
if (scrollValue > art5FromTop + art5Height / 2 - windowHeight) {
$art5.addClass('active');
}
if (scrollValue > art6FromTop + art6Height / 2 - windowHeight) {
$art6.addClass('active');
}
if (scrollValue > art7FromTop + art7Height / 2 - windowHeight) {
$art7.addClass('active');
}
})
})
I would like to change it into shorter one using each(). I have in mind that I have to use $('.art') for example to select all divs with this class, then I need to add them numbers iterating from 1. This I think I can accomplish alone. But how can I calculate scrolling position for each div? How can I take the position of each div? Do I have to select it the way I am now, or I can use 'this' for it?
As you are performing the same operation use Multiple Selector and then use .filter() to get the matched element based on function used as a test for each element in the set. this is the current DOM element.
$(document).on('scroll', function () {
const windowHeight = $(window).height()
const scrollValue = $(this).scrollTop();
var arts = $('.art1, .art2, ..., .art7'); //better $('.art')
arts.filter(function(){
const $art = $(this);
const artFromTop = $art.offset().top
const artHeight = $art.outerHeight()
return scrollValue > artFromTop + artHeight / 2 - windowHeight;
}).addClass('active');
});
I'm trying to create snap to top divs that cover the entire page and I have it working, it's just that after they snap to the top they don't unsnap and stay fixed to the top. I'm using the answer given by mu is too short from this previous question scroll then snap to top but I can't get it to unsnap.
Here's a jsbin of the code.
var h = 0;
var notif;
var notif2;
var init;
var docked = false;
function getSize() {
h = window.innerHeight;
notif = document.getElementById("notif");
notif2 = document.getElementById("notif2");
var fl = document.getElementById("floater");
init = notif.scrollTop;
notif.style.top = "" + h + "px";
var h2 = h / 2;
fl.style.marginTop = "" + h2 + "px";
notif.style.height = "" + h + "px";
var twoh = 3 * h2;
notif2.style.top = "" + h + "px";
notif2.style.height = "" + h + "px";
}
window.onscroll = function() {
if (!docked && (notif.offsetTop - document.body.scrollTop < 0)) {
console.log("in loop");
notif.style.top = 0;
notif.style.position = 'fixed';
notif2.style.marginTop = "" + h + "px";
docked = true;
} else if (docked && document.body.scrollTop <= init) {
notif.style.position = 'block';
while (notif.style.top <= h) {
var ab = Math.abs(notif.offsetTop)
var ab2 = Math.abs(document.body.scrollTop);
notif.style.top = init + 'px';
}
if (notif.style.top == h || notif.style.top == h - 1) {
docked = false;
}
}
};
<body onload="getSize()">
<div class="contain">
<div id="floater">
<h1 class="white">Hello, World</h1>
Link 1 Link 2
</div>
</div>
<div class="announcements" id="notif">
Please cover the previous text on the page. If this works i will be really excited.
</div>
<div class="announcements2" id="notif2">
Cover the white page.
</div>
</body>
Save the values used before you set these, and reset them when you "un-dock". Simply setting "docked" to show that you're un-docked is not enough.
This code is an example of how to do that from your staring point.
Here's how I saved it and got something like the behaviour you mention
var h = 0;
var notif;
var notif2;
var init;
var docked = false;
// holding space for reset values
var holdNotifyStyleTop;
var holdNotifyOffsetTop;
var holdNotif2StyleMarginTop;
function getSize() {
h = window.innerHeight;
notif = document.getElementById("notif");
notif2 = document.getElementById("notif2");
var fl = document.getElementById("floater");
init = notif.offsetTop;
notif.style.top = ""+h+"px";
var h2 = h/2;
fl.style.marginTop = ""+h2+"px";
notif.style.height = ""+h+"px";
var twoh = 3*h2;
notif2.style.top=""+h+"px";
notif2.style.height = ""+h+"px";
}
window.onscroll = function () {
if (!docked && (notif.offsetTop - document.body.scrollTop < 0)) {
console.log("--- DOCKING ---");
// save current values
holdNotifyStyleTop = notif.style.top;
holdNotifyOffsetTop = notif.offsetTop;
holdNotif2StyleMarginTop = notif2.style.marginTop;
notif.style.top = 0;
notif.style.position = 'fixed';
notif2.style.marginTop=""+h+"px";
docked = true;
} else if (docked && document.body.scrollTop <= init) {
console.log("--- Un-DOCKING ---");
notif.style.top = holdNotifyStyleTop;
notif.style.position = 'relative';
notif2.style.marginTop=holdNotif2StyleMarginTop;
notif.offsetTop = holdNotifyOffsetTop;
docked = false;
}
};
I have image I am scrolling within a div.
It make sure the image is visible I am using
var isVisible = (
threshold.top >= -39 &&
threshold.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
What I am trying to do now is make sure that once the element is visible it is able to completely finish scrolling before going out of the view port.
I am thinking I can do this by effecting the speed value based on the the distance of the element from the top on the window. But I am having a very hard time doing this.
I am using .getBoundingClientRect() to get the distance the element is from the top of the viewport:
var threshold = document.getElementById('page-feature').getBoundingClientRect();
var thresholdY = threshold.top;
Below is my code so far:
function scrollImageInViewport() {
var threshold = document.getElementById('page-feature').getBoundingClientRect();
var thresholdY = threshold.top;
var isVisible = (
threshold.top >= -39 &&
threshold.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
if (isVisible && window.innerWidth > 550) {
scrollDir(thresholdY);
}
}
function scrollUp(thresholdY) {
if (thresholdCounter < maxScrollNegative) {
return;
} else {
pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0); -ms-transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0); transform:translate3d(0,' + (--thresholdCounter *speed) + 'px,0);');
}
};
function scrollDown(thresholdY) {
if (thresholdCounter > maxScrollPositive) {
return;
} else {
pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0); -ms-transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0); transform:translate3d(0,' + (++thresholdCounter *speed) + 'px,0);');
}
};
function scrollToTop(){
initScroll();
pageScroll.setAttribute('style', 'transform:translate3d(0,0,0);');
thresholdCounter = 0;
};
function scrollDir(thresholdY) {
var scroll = window.scrollY;
if(scroll > position) {
distanceFromTop(thresholdY);
scrollUp(thresholdY);
} else if (scroll < position ){
scrollDown(thresholdY);
}
position = scroll;
};
function distanceFromTop(thresholdY) {
if (thresholdY > 0) {
`enter code here`//set speed as distance from top /px of not shown content
speed = (scrollImageHeight - scrollVisibleHeight) / thresholdY;
}
};
function initScroll(){
position = window.scrollY;
pageScroll = document.getElementById('page-scroll');
scrollImageHeight = pageScroll.offsetHeight; //total height of scroll image
pagePanel = document.getElementById("pagePanel");
pageStyle = window.getComputedStyle(pagePanel,"");
size = pageStyle.getPropertyValue("height");
scrollVisibleHeight = parseInt(size, 10);//visible height of scroll image
scrollImageEnd = scrollImageHeight - scrollVisibleHeight;
maxScrollNegative = -scrollImageEnd / speed;
}
var speed;
var thresholdCounter = 0;
var maxScrollPositive = 0;
var position,
pageScroll,
scrollImageHeight,
pagePanel,
pageStyle,
size,
scrollVisibleHeight,
scrollImageEnd,
maxScrollNegative;
window.addEventListener('resize', scrollToTop);
document.addEventListener('scroll', scrollImageInViewport);
window.addEventListener('load', initScroll);
This is what I ended up with:
var featurePage = document.getElementById('page-feature')
var pageScroll = document.getElementById('page-scroll');
var startP, // where animation needs to begin
endP, // where animation needs to end
diff; // visible element size
function getElementOffset(){ //init
var de = document.documentElement;
var box = featurePage.getBoundingClientRect();
var top = box.top + window.pageYOffset - de.clientTop;
var bottom = box.bottom + window.pageYOffset - de.clientTop;
var winHight = window.innerHeight;
diff = bottom - top;
var elPadding = (winHight - diff);
startP = top - elPadding;
endP = bottom - elPadding;
scrollImage()
}
function scrollImage(){
var scrollImageHeight = pageScroll.offsetHeight;
var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
var s1 = scrollPos - startP;
var realPos = -s1/diff;
var lengthLeft = scrollImageHeight - (diff)
if ( realPos < 0.09 && realPos > -1){
pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + (realPos * lengthLeft) + 'px,0); -ms-transform:translate3d(0,' + (realPos *lengthLeft) + 'px,0); transform:translate3d(0,' + (realPos *lengthLeft) + 'px,0);');
}
}
window.addEventListener('resize', getElementOffset);
document.addEventListener('scroll', getElementOffset);
In our site www.mydubaitrip.com I have a script that resizes the background image base on the browser width. My problem is whenever I try to press Ctrl+F5 or if I navigate to hotel page and back to home page, the background image doesn't resize correctly and my layout looks messed up. But if I try to press F5 again it will now adjust accordingly. I cannot figure out what is the problem.
Here's the script that I used.
var minWidth = 1024;
var minHeight = 844;
var winRatio = new Array();
var imgReady = new Array();
var orientation = 90;
var debounceId;
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {
var minWidth = 980;
}
var readyToRotate = false;
var readyToResize = true;
var miniContentWrapperHeight = 444;
// BACKGROUND TRANSITION
var theTimer;
var currBanner = -1;
var totalBanner = 0;
var timeWaiting = parseInt(500);
var timeTextTransIn = parseInt(1000);
var timeTextTransOut = parseInt(1000);
var timeTransCross = parseInt(2000);
var timeTransInit = parseInt(0);
var timeTransInterval = parseInt(7000);
var transitioning = false;
$("#homePageMainPanel").css({ "backgroundColor": "black" });
var hybridMode = true;
if (($.browser.mozilla && $.browser.version == "5.0") ||
$.browser.msie && $.browser.version == "9.0") {
//hybridMode = false;
}
//$("html").css({ "overflow": "hidden" });
function updateOrientation() {
// scroll and hide address bar for iPhone landscape
setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);
if (window.orientation != undefined)
orientation = Math.abs(window.orientation);
resizeBackground();
}
$(window).load(function() {
resizeBackground();
if (!($.browser.msie && $.browser.version == "6.0")) {
var lang = $('meta[name="language"]').attr("content");
if ((lang == "ar") || (lang == "ir")) {
$(".carouselShadow").css('background', 'url(/media/images/fg_ar_text_bg.png) no-repeat');
}
else {
$(".carouselShadow").css('background', 'url(/media/images/fg_text_bg.png) no-repeat');
}
}
});
$(document).ready(function() {
if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
$("#carousel").append("<img src=\"" + BackgroundInfo[0].Src + "\" alt=\"" + BackgroundInfo[0].Alt + "\" />");
}
if ($(window).height() > $(document).height() - $("#bottomLayer").height()) {
$("#bottomLayer").css({ 'position': 'absolute', "top": parseInt($(window).height() - $("#bottomLayer").height()) });
$("#carousel img").height($(window).height() - $("#bottomLayer").height());
//alert($("#bottomLayer").offset().bottom);
$(".bookPanel").css({ 'position': 'relative', "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
$(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });
setTimeout(function() {
$("#bottomLayer").css({ "position": "relative", "top": parseInt($(window).height() - $("#bottomLayer").height()) });
}, 500);
setTimeout(function() {
$(".bookPanel").css({ "position": "relative", "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
}, 500);
setTimeout(function() {
$(".carouselShadow").css({ "position": "relative", "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });
}, 500);
}
//in case the navigation height is longer than prefixed minheight, adjust minheight=navigation height
var homepageHeight = $("#homePageMainPanel").height() + $("#bottomLayer").height();
if (homepageHeight > minHeight)
minHeight = homepageHeight;
//this is only for mobile safari on ipad/iphone
window.onorientationchange = function() {
window.scrollTo(0, 1); // to prevent jumpy and blinky page transitions
updateOrientation();
}
$(window)
.resize(function() {
if (readyToResize) {
clearTimeout(debounceId);
debounceId = setTimeout(resizeEvent, 500);
}
})
.load(function() {
// scroll and hide address bar for iPhone landscape
setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);
});
initRotateBanner();
});
var winWidth = $(window).width();
var winHeight = $(window).height();
var winNewWidth = -1;
var winNewHeight = -1;
function resizeEvent() {
// JL: Hack to prevent IE 7,8 to have infinite loop when window.resize event
winNewWidth = $(window).width();
winNewHeight = $(window).height();
if (winWidth != winNewWidth || winHeight != winNewHeight) {
clearTimeout(debounceId);
resizeBackground();
}
winWidth = winNewWidth;
winHeight = winNewHeight;
}
function initRotateBanner() {
$('#carousel img').eq(0).one('load', function() {
if (readyToRotate = true) {
if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
$.each(BackgroundInfo, function(i, v) {
if (i > 0) {
$("#carousel").append("<img src=\"" + BackgroundInfo[i].Src + "\" alt=\"" + BackgroundInfo[i].Alt + "\" />");
}
});
initBackgroundImageReady();
}
imgReady[0] = true;
window.setTimeout("rotateBanner('init')", timeTransInit);
}
//$('#background').children("img").show();
//$('#background').children("img").css({ 'opacity': '1' });
resizeBackground();
}).each(function() {
// $(this).load();
});
/// assign each background text accordingly
var index = 0;
$('.carouselContentContainer').each(function() {
$(this).attr('id', 'text_box_' + index);
index++;
});
}
function initBackgroundImageReady() {
$('#carousel').children("img").each(function() {
//assign each background id accordingly
$(this).attr('id', 'img_box_' + totalBanner);
// flag correspondingly when bg images is loaded
imgReady[totalBanner] = false;
$(this).one('load', function(event) {
var id = $(this).attr('id');
var idArr = new Array();
idArr = id.split('_');
var index = idArr[idArr.length - 1];
//console.log(index + "loaded");
imgReady[index] = true;
resizeBackground();
});
//$(this).load();
totalBanner++;
});
}
function resizeBackground() {
readyToResize = false;
$('html').css({ 'overflow': 'hidden' });
$("#carousel").children("img").each(function() {
var oriWidth = $(this).width('');
var oriHeight = $(this).height('');
var bgWidth = $(window).width();
if (bgWidth < minWidth)
bgWidth = minWidth;
var bgHeight = bgWidth / oriWidth * oriHeight;
if (oriHeight < bgWrapperHeight)
bgWrapperHeight = oriHeight;
$(this).css({ 'position': 'absolute', 'width': bgWidth, 'height': bgHeight });
});
//start with window height & width
var bgWrapperHeight = $(window).height();
var bgWrapperWidth = $(window).width();
// if vertical scrollbar exists, accommodate the scrollbar width (16px)
if ($.browser.webkit == true) {
////$("#log").prepend(document.body.scrollHeight + " : " + document.body.clientHeight + "<br />");
if (document.body.scrollHeight < document.body.clientHeight)
bgWrapperWidth = $(window).width() - 16; // accomdate the scroll bar width (16px)
else
bgWrapperWidth = $(window).width();
}
else {
////$("#log").prepend($(document).height() + " : " + $(window).height() + "<br />");
if ($(window).height() < $(document).height())
bgWrapperWidth = $(window).width() - 17; //
else
bgWrapperWidth = $(window).width();
}
// for screen size > min height (hp-navigation) but < min background image size, adjust to fit without scroller
if (bgWrapperHeight + $('#bottomLayer').height() > $(window).height()) {
bgWrapperHeight = $(window).height() - $('#bottomLayer').height();
}
//wrapper height should not go lower than navigation height
if (bgWrapperHeight < $('#bookPanel').height())
bgWrapperHeight = $('#bookPanel').height();
//wrapper width should not go lower than min width
if (bgWrapperWidth < minWidth)
bgWrapperWidth = minWidth;
// set #hp-content-wrapper height
$('#homePageMainPanel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
$('#carousel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
$('#bottomLayer').css({ 'width': bgWrapperWidth });
$('html').css({ 'overflow': 'auto' });
//TODO: better way to center align bg image!
//var nn = 0;
// vertically middle align background
$("#carousel").children("img").each(function() {
// IF document height (minus footer height) is more than background image,
// Expand Background Image Vertically!
if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
var newHeight = $(document).height() - $('#bottomLayer').height();
var newWidth = Math.round((newHeight / $(this).height()) * $(this).width());
var offsetX = ((bgWrapperWidth - newWidth) / 2);
$(this).css({ 'position': 'absolute', 'left': offsetX, 'width': newWidth, 'height': newHeight });
// $("#log").prepend($(document).height() + " : " + $('#footer').height() + "<br />");
// Reset back the image top position to 0;
$(this).css({ 'position': 'absolute', 'top': 0 });
}
else { //TODO: figure out what contributes to offset??
var newWidth = $(document).width();
var newHeight = Math.round((newWidth / $(this).width()) * $(this).height());
var offsetX = ((bgWrapperWidth - newWidth) / 2);
// Reset back the image left position to 0;
$(this).css({ 'position': 'absolute', 'left': 0, 'width': newWidth, 'height': newHeight });
// $(this).css({ 'position': 'absolute', 'left': 0, 'width': '100%', 'height': '' });
if (bgWrapperHeight > $('#bottomLayer').position().top) {
var offsetY = ((bgWrapperHeight - $(this).height()) / 2);
$(this).css({ 'top': offsetY });
}
else {
var offsetY = (($('#bottomLayer').position().top - $(this).height()) / 2);
$(this).css({ 'top': offsetY });
}
}
});
//$(".bookPanel").css({ 'position': 'absolute', "top": parseInt($("#carousel").height()) });
$('#bottomLayer').css({ 'position': 'absolute', 'top': $("#carousel").height() });
$(".bookPanel").css({ "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
$(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()) });
//when having vertical scroll bar
//known issue: does not work for IE screen onresize, only works onload
if ($(window).height() != $(document).height()) {
//$("#roomreservations").html($(window).width() + ":" + $(document).width() + ":" + minWidth);
if ($(document).width() == minWidth && ($(window).width() != $(document).width())) {
//show horizontal scrollbar (by default)
}
else {
//otherwise hide horizontal scrollbar
$('html').css({ 'overflow-x': 'hidden' });
}
}
setTimeout('checkWidth(' + bgWrapperWidth + ')', 500);
readyToResize = true;
}
function checkWidth(bgWrapperWidth) {
$('#homePageMainPanel').width('100%');
$('#bottomLayer').width('100%');
$('#carousel').width($(document).width());
$("#carousel").children("img").each(function() {
if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
// Resize the image height to $("#background") height, as the image should fill from the top till the footer
$(this).css({ 'width': (($("#carousel").height() / $(this).height()) * $(this).width()), 'height': $("#carousel").height() });
}
});
}
function positionFooter() {
return null;
var footerPosition = $('#carousel').height() - $('#bottomLayer').height() + 1;
if ($('#carousel').height() < minHeight) {
footerPosition = minHeight - $('#carousel').height() + 1;
}
$('#carousel').css({ 'position': 'absolute', 'top': footerPosition });
$('html').css({ 'overflow': 'auto' });
$("#homePageMainPanel").css({ 'height': $('#carousel').height() });
}
var waitingTimeout;
function rotateBanner(param) {
var nextBanner = 0;
nextBanner = parseInt(currBanner) + 1;
if (nextBanner >= totalBanner) { nextBanner = 0; }
// wait until next bg image is fully loaded
if (imgReady[nextBanner] != true) {
waitingTimeout = window.setTimeout("rotateBanner('waiting')", timeWaiting);
return false;
}
clearTimeout(waitingTimeout);
transitionStart();
// cross fade
if (currBanner > -1) {
if (hybridMode) {
window.setTimeout("changeClass('quality','speed')", 500);
window.setTimeout("changeClass('speed','quality')", 1500);
}
fadeBgImg('#text_box_' + String(currBanner), 0, 500);
window.setTimeout("fadeBgImg('#img_box_" + String(currBanner) + "',0," + 1000 + ")", 500);
window.setTimeout("fadeBgImg('#img_box_" + String(nextBanner) + "',1," + 1000 + ")", 500);
window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1500);
window.setTimeout("transitionComplete()", 2500);
}
else {
if (hybridMode) {
changeClass('quality', 'speed');
window.setTimeout("changeClass('speed','quality')", 1000);
}
fadeBgImg("#img_box_" + String(nextBanner), 1, 1000);
window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1000);
window.setTimeout("showShadow()", 1000);
window.setTimeout("transitionComplete()", 2000);
}
currBanner = nextBanner;
}
function nextPaging(nextBanner) {
$('#carousel #paging ul li').each(function() {
if ($(this).attr('id') == 'paging_item_' + nextBanner) {
$(this).addClass("active");
}
else {
$(this).removeClass("active");
}
});
}
function changeClass(from, to) {
$("#carousel").removeClass(from).addClass(to);
}
function fadeBgImg(id, inout, duration, triggerTimer) {
$(id).stop(true, true);
if (inout == 1) {
$(id).fadeIn(duration);
}
else {
$(id).fadeOut(duration);
}
//$(id).animate({ 'opacity': inout }, duration);
if (triggerTimer == true) {
window.clearTimeout(theTimer);
if (totalBanner > 1) {
theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
}
}
}
function transitionStart() {
transitioning = true;
}
function transitionComplete() {
transitioning = false;
}
function Timer(callback, delay) {
var timerId, start, remaining = delay;
this.pause = function() {
window.clearTimeout(timerId);
remaining -= new Date() - start;
};
this.resume = function() {
start = new Date();
timerId = window.setTimeout(callback, remaining);
};
this.resume();
}
var waitingTimeout2;
function onBlur() {
//theTimer.pause();
clearTimeout(waitingTimeout2);
if (transitioning) {
waitingTimeout2 = window.setTimeout("onBlur()", timeWaiting);
return false;
}
window.clearTimeout(theTimer);
};
function onFocus() {
//theTimer.resume();
if (totalBanner > 1) {
window.clearTimeout(theTimer);
theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
}
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
readyToRotate = true;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
readyToRotate = true;
}
function showShadow() {
// Do not fade in shadow png IE8 and below
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(".carouselShadow").delay(1000).show();
}
else {
$(".carouselShadow").delay(1000).fadeIn();
}
}
While it is great that you've built this yourself, someone has already solved all your problems with Backstretch.
I have an element with animated top margin. I need to detect if it isn't too close from the border, and if it is, scroll parent div to lower position, to prevent animated element from hiding. Here is an example:
http://jsfiddle.net/zYYBR/5/
This green box shouldn't be below the red line after clicking the "down" button.
Do you mean this?
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down').click(function() {
var goStep = step;
var elHeight = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
if((elHeight + step) > limit)
{
goStep = limit - elHeight;
}
new_margin = goStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({marginTop: new_margin}, 1000);
});
http://jsfiddle.net/zYYBR/8/
EDIT: Or maybe something like that (of course you can improve the calculation, because currently it's very buggy with scroll):
var new_margin;
var step = 75;
$('#down').click(function () {
scroll(1000);
});
var scrollTimer = null;
$("#container").bind("scroll", function () {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () { scroll(1); }, 10);
});
function scroll(speed) {
var scrollStep, animationStep = step;
var currentBoxBottom = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
var nextCurrentBoxBottom = currentBoxBottom + step;
var limit = $("#max")[0].offsetTop + $("#container")[0].scrollTop;
if (nextCurrentBoxBottom > limit) {
if (limit >= $("#container")[0].scrollTop) {
scrollStep = $("#container")[0].scrollTop + nextCurrentBoxBottom - limit;
}
else {
scrollStep = $("#container")[0].scrollTop - nextCurrentBoxBottom - limit;
animationStep = nextCurrentBoxBottom - limit;
}
$("#container")[0].scrollTop = scrollStep;
}
new_margin = animationStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({ marginTop: new_margin }, speed);
}
http://jsfiddle.net/zYYBR/13/
Do you mean something like this?
I have the same visual result as Alex Dn did, but I added a little extra direction to what I think you're talking about. If it's what you're looking for I'll make updates:
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down2').click(function() {
var anim = $("#animated");
var hrOff = $("#max").offset();
var thOff = anim.offset();
new_margin = Math.min(hrOff.top - thOff.top - anim.height(), 75);
console.log(new_margin, hrOff.top, thOff.top);
var st = 0;
if (new_margin < 75) {
st = 75 - new_margin;
//have container scroll by this much?
}
anim.animate({
marginTop: "+=" + new_margin
}, 1000);
});
http://jsfiddle.net/zYYBR/10/