We Keep Coding

trigger animation at the end of debounced requestanimationframe

I followed Paul Lewis's guide to debounce and requestAnimationFrame. I'm translating an image across the screen on scroll when it comes into view.
var bicycles = $('.tandem-bike', context),
lastScrollY = 0,
ticking = false;
function update() {
var windowHeight = window.innerHeight,
windowWidth = $(window).width(),
bikeTop = [];
bicycles.each( function (i, el) {
bikeTop[i] = $(this).offset();
});
bicycles.each(function(i, el) {
var position = bikeTop[i];
var fromTop = position.top - windowHeight;
var imgHeight = $(this).height();
// When this image scrolls into view.
if (lastScrollY > fromTop && lastScrollY < position.top + imgHeight && i == 1 ) { // 375 ~= height of image
var translate = Math.floor((lastScrollY - fromTop) / ((windowHeight + imgHeight + 300) / windowWidth));
console.log('add tp tranlate ', translate);
$(this).css('transform', 'translateX(' + (translate - 275) + 'px)');
}
});
ticking = false;
}
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function requestTick() {
if(!ticking) {
requestAnimationFrame(update);
ticking = true;
}
}
window.addEventListener('scroll', onScroll, false);
This works great and the bicycle-built-for-two slides effortlessly across the screen. However, I want the image to "bounce" when the user stops scrolling. I figure an easy way would be to add a class when the animation ends, and pull it off when the animation starts. The obvious place to do that is within the if block in requestTick().
if(!ticking) {
$('.tandem-bike').removeClass('bounce');
requestAnimationFrame(update);
$('.tandem-bike').addClass('bounce');
ticking = true;
}
or
if(!ticking) {
requestAnimationFrame(update);
$('.tandem-bike').addClass('bounce');
ticking = true;
} else {
$('.tandem-bike').removeClass('bounce');
}
}
Neither works, and I don't love then because I'm whole-sale adding classes to all the animated images on the page. (I would live with that if it worked)

Continuous Scroll Loop between two divs

I am trying to alter this JSFiddle so that the container is infinitely scrollable both up and down (in a loop). How do I set window.scrollY to handle scrolling up and down on the Y axis?
Here the javascript I am working with:
window.addEventListener('load', function() {
var box = document.getElementById('box'),
box2 = document.getElementById('box2'),
container = document.getElementById('container'),
outer_container = document.getElementById('outer-container'),
current_box = box,
docHeight = document.documentElement.offsetHeight;
window.addEventListener('scroll', function() {
// normalize scroll position as percentage
var scrolled = window.scrollY / (docHeight - window.innerHeight),
scale = 1 - scrolled
transformValue = 'scale(' + (scale) + ')';
current_box.style.WebkitTransform = transformValue;
current_box.style.MozTransform = transformValue;
current_box.style.OTransform = transformValue;
current_box.style.transform = transformValue;
if (scale == 0) {
outer_container.appendChild(current_box);
var older_box = current_box;
current_box = current_box == box ? box2 : box;
container.appendChild(current_box);
window.scrollTo(0, 0);
older_box.style.WebkitTransform = "0";
older_box.style.MozTransform = "0";
older_box.style.OTransform = "0";
older_box.style.transform = "0";
}
}, false);
document.getElementById('nav').addEventListener('click', function(event) {
var level = parseInt(event.target.getAttribute('href').slice(1), 10),
// normalize scroll position
scrollY = (level / 4) * (docHeight - window.innerHeight);
// enable transitions
current_box.className = 'transitions-enabled';
// change scroll position
window.scrollTo(0, scrollY);
}, false);
function transitionEnded(event) {
// disable transition
current_box.className = '';
}
current_box.addEventListener('webkitTransitionEnd', transitionEnded, false);
current_box.addEventListener('transitionend', transitionEnded, false);
current_box.addEventListener('oTransitionEnd', transitionEnded, false);
}, false);

Set top of page to 340px from top with jQuery

Currently I have a script which starts a progress bar the moment a user starts scrolling.
Is it possible to change this to when the user gets to 340px from the top of the page?
Here is a demo of my site: http://pixsols.com/test/wordpress/reading-progress/
Here is my current code:
(function ( $ ) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion / elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%' );
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}( jQuery ));

My guess would be to manipulate this:
windowOffset = docOffset - docScroll,
Probably you should add or subtract 320px from windowOffset. So for example"
windowOffset = docOffset - docScroll + 320,

Make HTML5 draggable items scroll the page?

I'm using the HTML5 attribute draggable = "true" on some of my divs on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you drag it to the top, it scrolls the page up.
I will eventually make a playlist on my sidebar, and since it will not always be on view depending on where you're looking on the page, the page needs to scroll when you're dragging.
My page is here and you can try dragging the pictures of the posts around. On Chrome, it automatically lets me scroll down when I drag to the bottom, but not up. On Firefox, it doesn't automatically let me scroll either direction. Any help?
Here's a simple jsfiddle to get you started. On Chrome you should be able to drag the Google icon down and have it scroll the page down, but not going up.

here is a code that will scroll-up or scroll-down your page while you are dragging something. Just placing your dragging object at top or bottom of the page. :)
var stop = true;
$(".draggable").on("drag", function (e) {
stop = true;
if (e.originalEvent.clientY < 150) {
stop = false;
scroll(-1)
}
if (e.originalEvent.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
});
$(".draggable").on("dragend", function (e) {
stop = true;
});
var scroll = function (step) {
var scrollY = $(window).scrollTop();
$(window).scrollTop(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}

I have made a simple JavaScript drag and drop class. It can automatically scroll up or down the page while dragging.
See this jsfiddle. Also avaliable at my github page.
Dragging at a high speed is not recommended now. I need to work out that.
Code below is a part of the library.
var autoscroll = function (offset, poffset, parentNode) {
var xb = 0;
var yb = 0;
if (poffset.isBody == true) {
var scrollLeft = poffset.scrollLeft;
var scrollTop = poffset.scrollTop;
var scrollbarwidth = (document.documentElement.clientWidth - document.body.offsetWidth); //All
var scrollspeed = (offset.right + xb) - (poffset.right + scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
} else {
var scrollLeft = offset.scrollLeft;
var scrollTop = offset.scrollTop;
var scrollbarwidth = parentNode.offsetWidth - parentNode.clientWidth; //17
var scrollbarheight = parentNode.offsetHeight - parentNode.clientHeight; //17
var scrollspeed = (offset.right + xb) - (poffset.right - scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb + poffset.left);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + scrollbarheight + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb + poffset.top);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
}
};

Here is the javascript version of AngularPlayers answer, I added horizontal support. I noticed both the JQuery solution and Javascript solution have a bug on mobile safari that allows the page to infinitely grow when the bounce effect from overscrolling happens.
The purpose of VerticalMaxed and HorizontalMaxed is to check that the scroll bars are not maxed before scrolling again. This prevents the page from growing during overscroll bounce.
var stopX = true;
var stopY = true;
document.addEventListener('drag', function(e) {
if (event.target.classList.contains('draggable')) {
stopY = true;
// Handle Y
if (e.clientY < 150) {
stopY = false;
scroll(0,-1)
}
if ((e.clientY > ( document.documentElement.clientHeight - 150)) && !VerticalMaxed()) {
stopY = false;
scroll(0,1)
}
// Handle X
stopX = true;
if (e.clientX < 150) {
stopX = false;
scroll(-1,0)
}
if ((e.clientX > ( document.documentElement.clientWidth - 150)) && !HorizontalMaxed()) {
stopX = false;
scroll(1,0)
}
}
});
document.addEventListener('dragend', function(e) {
if (event.target.classList.contains('draggable')) {
stopY = true;
//stopY = true;
stopX = true;
}
});
// On drag scroll, prevents page from growing with mobile safari rubber-band effect
var VerticalMaxed = function(){ return (window.innerHeight + window.scrollY) >= document.body.offsetHeight}
var HorizontalMaxed = function(){ return (window.pageXOffset) > (document.body.scrollWidth - document.body.clientWidth);}
var scroll = function (stepX, stepY) {
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
window.scrollTo((scrollX + stepX), (scrollY + stepY));
if (!stopY || !stopX) {
setTimeout(function () { scroll(stepX, stepY) }, 20);
}
}

Control page scroll animation with mousewheel

can anybody help me understand how Honda achieved this effect:
http://testdays.hondamoto.ch/
I mean the ease when you scroll.

var $pages = $(".page"),
tot = $pages.length,
c = 0, pagePos = 0, down = 0, listen = true;
$('html, body').on('DOMMouseScroll mousewheel', function(e) {
e.preventDefault();
if(!listen)return;
listen = false;
down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0;
c = Math.min(Math.max(0, down ? ++c : --c), tot-1);
pagePos = $pages.eq(c).offset().top;
$(this).stop().animate({scrollTop: pagePos}, 650, function(){
listen = true;
});
});
*{margin:0;}
.page{min-height:100vh;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page" style="background:#0bf">PAGE 1</div>
<div class="page" style="background:#fb0">PAGE 2</div>
<div class="page" style="background:#0fb">PAGE 3</div>
<div class="page" style="background:#b0f">PAGE 4</div>
P.S:
Use .position().top; if your .pages are inside a scrollable DIV like $("#pagesParent") (instead of $('html, body'))
Notice:
for mobile you might want to adjust the value accounting for the browser's tabs bar height (or best, prevent that behaviour at all). You got the idea

Open up their JS file : http://testdays.hondamoto.ch/js/script_2.js
and search for Utils - Navigation
/***********************************************************************************************/
/************************************ Utils - Navigation *************************************/
/***********************************************************************************************/
/**
* navigation
*/
function navigation(target){
//--Init Quiz
if(!quizRdy){
hideQuiz();
}
//Add class to body
var pageName = target.substr(1).split('-');
$('body').removeClass(lastPage);
$('body').addClass(pageName[0]);
lastPage = pageName[0];
if(resizeBg)retractBg();
resizeBg = false;
busy = true;
$('body').addClass('loading');
//Change Nav Color
$('#nav-wrapper ul.nav li a').each(function(){
$(this).removeClass('selected');
});
var currentNavNumber = currentNav +1;
$('#main_nav_'+currentNavNumber).addClass('selected')
var wHeight = $(window).height();
if(wHeight<1080){
var newMargin = 180 - ( (wHeight - 720)/2 ) ;
if(newMargin<0) newMargin=180;
}else{
var newMargin =0 - (wHeight - 1080)/2;
}
var navTop = $(target).offset().top + newMargin;
navTop += 'px';
trace('navTop : '+navTop);
//$('#nav-wrapper').css('top',navTop);
$('html,body').stop().animate({
scrollTop: $(target).offset().top + newMargin
}, 1000,'easeInOutExpo',function(){
trace('annime done - wHeight : '+wHeight+' target top : '+$(target).offset().top);
if(currentNav==2 && !quizRdy && !quizForm){
showQuiz();
}
if(currentNav==4){
//update social datas
$.getJSON('inc/socials.php', function(data) {
$('#count-fans').empty().append(data['fans-count']);
$('#count-followers').empty().append(data['followers-count']);
});
}
/*
if(currentNav==2){
$('#quiz-nav').livequery(function(){
$(this).show();
});
}else{
$('#quiz-nav').livequery(function(){
$(this).hide();
});
}
*/
$('body').removeClass('loading');
if(currentNav!=0 && currentNav!=4){
$('#nav-wrapper').fadeIn(200);
}else{
$('#nav-wrapper').fadeOut(200);
}
if(currentNav==3){
//--Init Google Map
if(!mapReady){
if(dealerReady){
//init map
initialize();
}else{
askMap = true;
}
}
}
if(wHeight>1080){
extendBg();
}
busy = false;
});
}
/**
* navigation next Page
*/
function nextPage(){
if(currentNav<navArray.length-1 && !busy){
currentNav++;
navigation(navArray[currentNav]);
}
}
/**
* navigation previous Page
*/
function prevPage(){
if(currentNav>0 && !busy){
currentNav--;
navigation(navArray[currentNav]);
}
}
/**
* Center content
*/
function centerContent(){
if(!busy){
//--Retract Background if expended for big screen
if(resizeBg)retractBg();
var wHeight = $(window).height();
var wWidth = $(window).width();
var imgHeight = 0;
//--Test image width / Height and fill the screen
if(wWidth / wHeight > ratioImg ){
//trace('case1 - width : ' + wWidth + ' height : '+wHeight);
if(wHeight > 1080 || wWidth > 1900){
var newImgHeight = wWidth * 1080 / 1920;
$(".bg-image").each(function(){
$(this).css({
'height':newImgHeight+'px',
'width':'100%'
});
});
imgHeight = newImgHeight;
}else{
$(".bg-image").each(function(){
$(this).css({
'height':'1080px',
'width':'1900px'
});
});
imgHeight = 1080;
}
}else{
if(wHeight > 1080 || wWidth > 1900){
$(".bg-image").each(function(){
var newImgWidth = wHeight * 1920 / 1080;
$(this).css({
'height':wHeight+'px',
'width':newImgWidth+'px'
});
});
imgHeight = wHeight;
}else{
$(".bg-image").each(function(){
$(this).css({
'height':'1080px',
'width':'1900px'
});
});
imgHeight = 1080;
}
}
//--Fix height if window > img height
if(wHeight>imgHeight){
$(".bg-image").each(function(){
var newImgWidth = wHeight * 1920 / 1080;
$(this).css({
'height':wHeight+'px',
'width':newImgWidth+'px'
});
});
}
//--Center horizontal bkg image
if(wWidth<1900){
$(".bg-image").each(function(){
var marginCenter = (wWidth - 1900) / 2;
marginCenter = marginCenter * -1;
if($(this).width() > (wWidth + marginCenter)){
$(this).css({'margin-left':-marginCenter+'px'});
}
});
}
//--Scroll to the good position
if(wHeight<1080){
var newMargin = 180 - ( (wHeight - 720)/2 ) ;
if(newMargin<0) newMargin=180;
}else{
var newMargin =0 - (wHeight - 1080)/2;
}
var navTop =$(navArray[currentNav]).offset().top + newMargin;
navTop += 'px';
//$('#nav-wrapper').css('top',navTop);
//trace('Scrool to good position, then expend bg : ' + navArray[currentNav] + ' '+ $(navArray[currentNav]).offset().top);
$('html,body').stop().animate({
scrollTop: $(navArray[currentNav]).offset().top + newMargin
}, 1000,'easeInOutExpo',function(){
if(wHeight>1080){
extendBg();
}
});
}
}
/**
* Extend the background image for big screen ( > 1080 px )
*/
function extendBg(){
var hWin = $(window).height();
if(hWin > 1080){
//--Get & save current page Name
lastBg = navArray[currentNav].split('-');
lastBg = lastBg[0].substr(1);
lastheight = $('#bg-'+lastBg).height();
//--Calculate the position from top to set the scroll position
posToTop = (hWin - $('#bg-'+lastBg).height())/2;
posToTop = $('#bg-'+lastBg).offset().top - posToTop;
lastPosToTop = $('#bg-'+lastBg).offset().top;
//trace('posToTop setting : '+posToTop+' page : ' + lastBg);
//--Set boolean resize to true to call the retract BG
resizeBg = true;
$('#bg-'+lastBg).css({'z-index':2});
//--Test if it's first or last
if(currentNav != 0 && currentNav != (navArray.length-1)){
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:posToTop+'px'
},600);
}else{
if(currentNav==0){
posToTop=0;
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:0
},600);
}else{
posToTop=0;
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:4320+'px'
},600);
}
}
//--Scroll to the bottom for credits page
if(currentNav==(navArray.length-1)){
$('html,body').stop().animate({
scrollTop: $(document).height()
}, 1000,'easeInOutExpo');
}
}
}
/**
* Retrac the background to normal
*/
function retractBg(){
var hWin = $(window).height();
if(resizeBg && lastheight>0 && lastBg!=""){
$('#bg-'+lastBg).css({'z-index':0});
//trace('posToTop callback : '+posToTop + ' lastBg : ' + lastBg + ' lastheight : ' +lastheight);
if(posToTop>0){
//trace('reset pos top : ' + posToTop);
$('#bg-'+lastBg).animate({
height:lastheight+'px',
top:lastPosToTop+'px'
},600)
}else{
$('#bg-'+lastBg).animate({
height:lastheight+'px'
},600)
}
}
}