Jessica Jessica - 2 months ago 12
CSS Question

How to create reusable function with alternating if statements

I am creating a smooth scrolling and a bounce (at top and bottom) effect. (After a full day of trial and error,) I was able to successfully implement it. I'm now having trouble finding a method to have reusable clean code. (I think that's called an algorithm?)

The specific problem I'm having, is alternating between

<=
and
>=
. The code overall can use some clean up, which I did to the best of my ability, but I think it needs some more (let me know if it doesn't).

So in reusable
function
, like this:

function reusableFunction() {
...
if (num1 >= num2) // One case I have to compare like this
if (num1 <= num2) // Another case, I have to compare like this
...
}


I got stuck at line #86 in the
function bounceBack
. If you have a better way of making the smooth scrolling, and bouncing effect, please post as an answer. I don't want to use any librarys, or other frameworks (like JQuery).

JSFiddle





console.clear();

var innerWrapper = document.getElementById('innerWrapper');
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';

var interval, // scroll is being eased
mult = 0, // how fast do we scroll
dir = 0, // 1 = scroll down, -1 = scroll up
steps = 50, // how many steps in animation
length = 30; // how long to animate

var bouncePadding = 30;

function handleScroll(e) {
e.preventDefault();
clearInterval(interval); // cancel previous animation
++mult; // we are going to scroll faster
var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (dir != delta) { // scroll direction changed
mult = 1; // start slowly
dir = delta;
}
var start = parseInt(innerWrapper.style.transform.split(',')[1], 10); // Get x from translate3d
var end = start + length * mult * delta; // where to end the scroll
var change = end - start; // base change in one step
var step = 0; // current step
var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
var tempVar;

interval = setInterval(function() {
var scrollPosition = easeOut(step++, start, -change, steps);
scrollPosition = clamp(scrollPosition, -scrolledToBottom - bouncePadding, 0 + bouncePadding);
innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
if (tempVar === scrollPosition) {
step = steps;
} else {
tempVar = scrollPosition
}

if (step >= steps) { // scroll finished without speed up - stop by easing out
endScrollCallback();

if (scrollPosition > 0 && dir === -1) {
step = 0;
var myInterval = setInterval(function() {
var scrollPos = easeOut(step++, scrollPosition, -scrollPosition, 15);
innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

if (scrollPos <= 0) {
clearInterval(myInterval);
innerWrapper.style.transform = 'translate3d(0px, ' + (0) + 'px, 0px)';
}
}, 10);
} else if (scrollPosition < -scrolledToBottom && dir === 1) {
step = 0;
var myInterval = setInterval(function() {
var change = -scrolledToBottom - scrollPosition;
var scrollPos = easeOut(step++, scrollPosition, change, 15);
innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

if (scrollPos >= -scrolledToBottom) {
clearInterval(myInterval);
innerWrapper.style.transform = 'translate3d(0px, ' + (-scrolledToBottom) + 'px, 0px)';
}
}, 10);
}
}
}, 10);
}

function easeOut(t, b, c, d) {
t /= d;
return -c * t * (t - 2) + b;
}

function endScrollCallback() {
mult = 0;
clearInterval(interval);
}

function bounceBack(from, to, difference) {
var step = 0;
var interval = setInterval(function() {
var scrollPos = outQuartic(step++, from, difference, 15);
innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';
if (scrollPos <= 0) { /* Got stuck here */
clearInterval(interval);
innerWrapper.style.transform = 'translate3d(0px, ' + to + 'px, 0px)';
}
}, 10);
}

function clamp(val, min, max) {
if (typeof min !== 'number') min = 0;
if (typeof max !== 'number') max = 1;
return Math.min(Math.max(val, min), max);
}

body {} #outerWrapper {
width: 500px;
height: 400px;
overflow: hidden;
background-color: black;
}
#content {
background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
}

<div id="outerWrapper">
<div id="innerWrapper">
<div id="content">
Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus
Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus
enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar
justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames
ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque
Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie
vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci
Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet
consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet
risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat
Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor
dolor
</div>
</div>
</div>




Answer

Generally, to customize a function, which is what <= is, one can use a function. If you'd like customize a statement like:

if (a <someFunction> b){
  // ...
}

where someFunction in your case can be either <= or >, one way to do it could be:

function f(a,b,conditionsMet){
  return conditionsMet ? a <= b : a > b;
}

and then call it:

if ( f(a,b,are conditions met?) ){
  // ...
}

(Not sure if that's what you mean, feel free to comment..)

Comments