I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?
http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});
Related
Hey friends I'm trying to use window.matchMedia("(max-width: 1700px)") to add some elements in the html when the page is 1700px or smaller. Right now I'mk just trying to test it by have a function alert 'yo' to the screen. This doesn't work as well as other things I tried to change? Any ideas?
https://jsfiddle.net/yat5ncmk/6/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;
x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
num--;
if(num > 0) {
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
console.log(num);
console.log(img.style.backgroundImage);
} else {
num = 4;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
}
})
rightArrow.addEventListener('click', function() {
num++;
if(num <= 4) {
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
console.log(num);
console.log(img.style.backgroundImage);
} else {
num = 1;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
}
})
function adjustMenuDesign(width) {
if (width.matches) { // If media query matches
alert('yo');
}
}
window.sr = ScrollReveal();
sr.reveal('.logo-wrap', {
duration: 2000
});
sr.reveal('.w1', {
duration: 2000,
origin: 'bottom'
});
sr.reveal('.w2', {
duration: 3000,
origin: 'bottom'
});
sr.reveal('.w3', {
duration: 4000,
origin: 'bottom'
});
sr.reveal('.hours-line-left', {
duration: 1000,
origin: 'left',
distance: '200px'
});
sr.reveal('.hours-line-right', {
duration: 1000,
origin: 'right',
distance: '200px'
});
sr.reveal('.contact-line', {
duration: 1000,
origin: 'bottom',
distance: '250px'
});
sr.reveal('.burrito', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.taco', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.guac', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.nachos', {
duration: 1000,
origin: 'bottom',
distance: '250px'
});
sr.reveal('.hot', {
duration: 1000,
origin: 'left',
distance: '250px'
});
sr.reveal('.back-to-top', {
duration: 1000,
origin: 'bottom',
});
sr.reveal('.btp-arrow', {
duration: 1500,
origin: 'top',
distance: '250px'
});
A couple of problems..
x.addEventListener(adjustMenuDesign);
Errors, because addEventListener expects an event and a callback.
But what you might have meant to do was add this to the resize event..
window.addEventListener("resize", adjustMenuDesign);
Also you will want to run the matchMedia query again on resize, so moving that piece of code into the adjustMenuDesign would make sense here.
Below is a working fiddle with these changes.
https://jsfiddle.net/veckopab/
I'm trying to make a bouncy ball which move on hover by the user. I got a problem on how to disable the function to relaunch if the ball cross again the mouse. It cause some freeze/bugs sometimes. I'm not exactly sure on how to proceed to avoid that. Do you guys have any tips ?
https://codepen.io/kombolo/pen/YvzPvm
Thanks !
window.onmousemove = logMouseMove;
function logMouseMove(e) {
e = e || window.event;
mousePos = e.clientX;
el = document.querySelector('.circle');
const elPos = getOffset(el);
if(mousePos < (elPos -20) || mousePos > (elPos + 20)) {
triggerAnimation();
};
}
function getOffset(el) {
el = el.getBoundingClientRect();
return el.left + window.scrollX + 50;
}
function triggerAnimation() {
xValues = [100, 0, 400];
yValues = [0, 50, 200];
const xVal = xValues[Math.floor(Math.random()*xValues.length)];
const yVal = yValues[Math.floor(Math.random()*yValues.length)];
var duration = anime({
targets: '#duration .el',
translateX: [
{ value: xVal, duration: 1000, delay: 500, elasticity: 0 },
{ value: xVal, duration: 1000, delay: 500, elasticity: 0 }
],
scaleX: [
{ value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
translateY: [
{ value: yVal, duration: 1000, delay: 500, elasticity: 0 },
{ value: yVal, duration: 1000, delay: 500, elasticity: 0 }
],
});
}
Mouse hover is an extensive event. You are doing too much on hover.
what I would suggest is - set window.onmousemove = undefined in
triggerAnimation function and then turn it on in the last. This helped a little.
function triggerAnimation() {
window.onmousemove = void 0;
xValues = [100, 0, 400];
.....
....
//loop: true
});
window.onmousemove = logMouseMove;
}
I have a small problem on my jQuery animation.
I want a button which change the width of a div from 100% to 72.5%. Next to this div could be another div which could fill the rest space (width 22.5%, 5% margin)
It could do following things step by step:
Div 1 get a border
div 1 change his width
div 2 get opacity and change his width
Here is my code:
var hidden = true;
function openEditMenu(){
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if(hidden){
$({alpha:0}).animate({alpha:1}, {
duration: 1500,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$("#editMenu").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},1000);
$(em).animate({width: "22.5%"},{ duration: 1000, queue: false });
$(rf).animate({width: "72.5%"},{ duration: 1000, queue: false });
$(rf).animate({marginRight: "5%"},{ duration: 1000, queue: false });
}
else{
$({alpha:1}).animate({alpha:0}, {
duration: 1000,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$(em).animate({width: "0%"},{ duration: 1000, queue: false });
$(rf).animate({width: "100%"},{ duration: 1000 });
$(rf).animate({marginRight: "0%"},{ duration: 1000, queue: false });
$("#editMenu").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0},1000);
}
hidden = !hidden;
}
Like you can see in the example now everything happens on the same time. But I want that everything works step by step.
var hidden = true;
function openEditMenu() {
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if (hidden) {
$({
alpha: 0
}).animate({
alpha: 1
}, {
duration: 1500,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$("#editMenu").css({
opacity: 0.0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 1000);
$(em).animate({
width: "22.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "72.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
marginRight: "5%"
}, {
duration: 1000,
queue: false
});
} else {
$({
alpha: 1
}).animate({
alpha: 0
}, {
duration: 1000,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$(em).animate({
width: "0%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "100%"
}, {
duration: 1000
});
$(rf).animate({
marginRight: "0%"
}, {
duration: 1000,
queue: false
});
$("#editMenu").css({
opacity: 1.0,
visibility: "visible"
}).animate({
opacity: 0.0
}, 1000);
}
hidden = !hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-flex;width:100%;">
<div id="reportField" style="width:100%; height:50px; background-color:blue;">
a
</div>
<div id="editMenu" style="width:0%; height:50px; background-color:red; visibility: hidden;">
b
</div>
</div>
<button onclick="openEditMenu()">
</button>
I know this solution:
$('#id').animate(
{ left: new value },
duration, function() {
// Animation complete.
});
But it doesnt works on my alpha animation.
So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/
What would be a better way of writing this:
setTimeout(function() {
$('#clock').animate({
'marginTop': '-20px'
}, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
$('#submit').animate({
'top': '-5px'
}, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
$('#details').animate({
'top': '-200px'
}, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
$('#details').animate({
'top': '19px'
}, 100, $.bez(bezierEasing));
}, 600);
Create a function:
// adjust your function accordingly...
function animateIt(selector, speed, top) {
setTimeout(function() {
$(selector).animate({
'top': top
}, speed, $.bez(bezierEasing));
}, 600);
}
Instead of using some weird timeOut chain why you don't use TimelineMax from greensock.com.
It's far more advanced and way easier to use.
Just throwing out my version...
function animateEl(selector, css, speed, timer) {
var tmp = parseInt(speed, 10);
if (!isNaN(tmp)) {
speed = tmp;
}
return setTimeout(function () {
$(selector).animate(css, speed, $.bez(bezierEasing)
}, timer);
}
animateEl('#clock', {'marginTop': '-20px' }, 'slow', 100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100, 600);