I have a tween effect that works fine with a click event but I would like it to work with periodical. Please help! Thanks in advance.
// Tween effect
var bounce = function() {
this.set('tween', {duration: 1500, transition: 'bounce:out'});
this.tween('right', [900, 40]);
}
// This works fine
$('someID').addEvent('click', bounce);
// These don't work
bounce();
bounce.periodical(10000);
When you attach the bounce() to the click event then you can use this in that function, but outside that you need to define the "this". You could use bind, or change this to your element.
Try this:
var bounce = function() {
var element = $('someID'); // cache it here or outside the function
element.set('tween', {duration: 1500, transition: 'bounce:out'});
element.tween('right', [900, 40]);
}
bounce();
bounce.periodical(10000);
Related
I'm newer to working with SVG animations so I apologize in advanced if there is a straightforward answer to this. With a combination of utilizing Scrollmajic.js and GASP I was able to get the SVG to animate when the user scrolls to a specific position. The issue i'm running into is that the animation converts it from a dashed line to a solid stroke. I've done some research and found that using a mask would be the best way to accomplish this though I'm a bit lost on how to approach this method.
https://codepen.io/ncanarelli/pen/wvaeLNa
js:
$(document).ready(function() {
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
// init controller
var controller = new ScrollMagic.Controller();
// loop through all elements
$(".svg-animation").each(function() {
var $thePath = $(this).find("path#thePath");
// prepare SVG
pathPrepare($thePath);
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($thePath, 1, {
strokeDashoffset: 0,
ease:Linear.easeNone
}))
// build scene
var scene = new ScrollMagic.Scene({
triggerElement: $(this)[0],
duration: 200,
tweenChanges: true,
reverse: true
})
.setTween(tween)
.addTo(controller)
.addIndicators();
});
});
UPDATE: Updated .js to reflect an .each loop + other modifications. Still having issues with implementing a mask.
I'm looking for a really simple and lightweight code that change the body background of the website (it can go with the css also) every 10 seconds, it's supposed to be something easy with jquery and css, right?
how can i do that?
You can use JavaScript's setTimeout() function. Here is an example of how to use it.
For setTimeout(), you need 2 parameters, one being your function, and the other an integer, which is how long your timeout will last.
So for your instance, you can do:
$(function() {
var newBg = ['img1.png', 'img2.jpg', 'img3.png'];
var path="img/";
var i = 0;
var changeBg = setTimeout(function() {
$('body').css({backgroundImage : 'url(' path + newBg[i] + ')'});
if(i == newBg.length)
i=0;
else
i++;
}, 10000);
});
This creates an array of your images, specified with a path. Thus I create a variable which checks the length of your arrayList, and whether or not you need to reset the variable i.
So i hope that helps :)
custom-background.js is a lightweight jQuery plugin to allow users change the website’s default background and saves the background selected to local storage. This plugin can easily be added to any website or web app without any compromise on website's performance.
https://github.com/CybrSys/custom-background.js
You can easily do this with jQuery.
A simple javascript function to toggle between two colors every X seconds
function toggle_color(color1,color2,cycle_time,wait_time) {
setInterval(function first_color() {
$("body").animate({
backgroundColor: color1
}, 1000, function () {
setTimeout(change_color, wait_time);
});
}, cycle_time);
function change_color() {
$("body").animate({
backgroundColor: color2
}, 1000, function () {
setTimeout(function () {}, wait_time);
});
}
}
You can check Changing background color every X seconds in Javascript for working demo and explanation.
here is my code:
$('myButton').addEvents({
mouseenter: function(){
$('myImage').setStyle('display','block');
$('myImage').morph({
'duration': 500,
'transition': Fx.Transitions.Sine.in,
'opacity': 1,
'top': -205
});
},
mouseleave: function(){
$('myImage').morph({
'opacity': 0,
'top': -175,
'onComplete': hidemyImage
});
}
});
function hidemyImage() {
$('myImage').setStyle('display','none')
}
the onComplete inside the mouseleave does not work as expected... it hides the image immediately when i move away from myButton instead of hiding it after the morph has finished... i tried several solutions but none worked so far. any idea / help? thanks in advance!
you need to work with the instance and not pass on things in the morph function directly, that takes properties to morph and it probably runs your function immediately in the hope it will return a property value. you can do el.set('morph', {onComplete: hideImagefn}) before that and it will work but read on...
one way to do it is to set your morph options/instance once and work with it afterwards like so:
(function() {
var img = document.id('myImage').set('morph', {
duration: 500,
transition: Fx.Transitions.Sine.in,
link: 'cancel',
onStart: function() {
this.element.setStyle('display', 'block');
}
}), fx = img.get('morph');
// of you can just do var fx = new Fx.Morph(img, { options});
document.id('myButton').addEvents({
mouseenter: function(){
fx.start({
opacity: 1,
top: -205
});
},
mouseleave: function(){
fx.addEvent('complete', function() {
this.element.setStyle('display', 'none');
this.removeEvents('complete');
}).start({
opacity: 0,
top: -175
});
}
});
})();
the start ensures its always visible when mouseovered, the link is cancel which means it will stop execution if you mouse out too early and if you do mouseout, it will then hide the image and remove the onComplete event so that if you show it once more, it stays visible when it comes into view.
if you don't plan on being able to bring it back you can clean-up better and even use event pseudos like onComplete:once etc - though thats part of Event.Pseudos from mootools-more.
in general - .get/.set morph is your setup. el.morph() passes values to morphInstance.start()
play here: http://jsfiddle.net/dimitar/NkNHX/
Good morning,
I have a problem with mootools, and I make an alpha effect from 0 to 100 but I would like to make a delay before loading the next effect.
code is as follows:
<script type="text/javascript">
var miEfecto1 = new Fx.Style('texto42' ,'opacity',{duration: 9000,onComplete: function(){setInterval(miEfecto2.start(1,0) , 15000 );}});
var miEfecto2 = new Fx.Style('texto14' ,'opacity',{duration: 9000,onComplete: function(){setInterval(miEfecto3.start(1,0) , 15000 );}});
...etc...
var miEfecto59 = new Fx.Style('texto45' ,'opacity',{duration: 9000,onComplete: function(){setInterval(miEfecto60.start(1,0) , 15000 );}});
var miEfecto60 = new Fx.Style('texto39' ,'opacity',{duration: 9000,onComplete: function(){setInterval(miEfecto61.start(1,0) , 15000 );}});
window.addEvent('domready',function() {
miEfecto1.start(1,0);});
</script>
thank you very much for your help!
setInterval sets interval for some function you pass as the first parameter, where setTimeout just delays the execution. Use the latter to avoid multiple execution.
Also in your code you immediately execute start() method (eg. miEfecto2.start(1,0)), because you do not pass it - you pass its result. To fix this you can enclose it in an anonymous function (but do not call it).
The example code could look like this (notice setInterval being replaced by setTimeout and that I enclosed the function call in anonymous function):
var miEfecto1 = new Fx.Style('texto42', 'opacity', {
duration: 9000,
onComplete: function(){
setTimeout(function(){
miEfecto2.start(1,0);
}, 15000);
}
});
Make similar changes in the rest of your code.
what you need to do is to chain the effects and set the delay to whatever you need..
check this example : http://demos111.mootools.net/Chain
or check the doc : http://mootools.net/docs/core/Class/Class.Extras
Hope this helps
THE SOLUTION:
var miEfecto_i1 = new Fx.Style('texto19', 'opacity', {
duration: 1000,
onComplete: function(){
setTimeout(function(){
miEfecto_o1.start(1,0);
}, 10000);
}
});
var miEfecto_o1 = new Fx.Style('texto19', 'opacity', {
duration: 1000,
onComplete: function(){
miEfecto_i2.start(0,1);
}
});
THANKS!!
I'm using mootools 1.4.1 and I'm trying to get a div that 'tweens' the width of the screen to fire another function on completion. However, the tween keeps firing and I don't believe that it's firing the function I'm wanting it to.
The code is below:
$('photo-loading_amt').set('tween', {duration: '1000ms',
link: 'cancel',
transition: 'linear',
property: 'width',
onComplete: function() {
var photoContainers = $$('.photo-container')
if (photoNum != photoContainers.length) {
nextPhoto(photoNum.toInt() + 1);
}
else {
nextPhoto(1);
}
}
});
Any Help that you might have would be appreciated.
#Dimitar Christoff, here's the code for the nextPhoto function:
function nextPhoto(photoNum) {
resetTimeline();
var photoContainers = new Array();
photoContainers = $$('.photo-container');
var photoFx = new Fx.Tween(photoContainers[photoNum.toInt() - 1], {
duration: 'normal',
transition: Fx.Transitions.Sine.easeOut,
property: 'opacity',
onComplete: function() {
photoContainers[photoNum.toInt() - 1].setStyle('visibility', 'hidden');
photoContainers[photoNum.toInt() - 1].setStyle('opacity', 1);
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('z-index', photoContainers.length);
}
}
});
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('z-index', 0);
}
photoFx.tween(1, 0);
//alert("photoNum = " + photoNum + "\n" + "photoContainers.length = " + photoContainers.length);
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('visibility', 'visible');
}
else {
photoContainers[photoNum.toInt()].setStyle('visibility', 'visible');
//loadingPhotos(photoNum.toInt() + 1);
}
// hard reset the loadingPhotos function
} // end of FUNCTION nextPhoto
Since I don't see an apparent loop in your code, I would suspect the effect to be caused by
link: 'cancel'
in your first block of code. According to the Moo docs this will:
'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition. The new transition will start immediately, canceling the one that is currently running.
So this might upset your tweens. However, you probably added this deliberately. I would try changing this to chain or ignore, both in your first and second tween setup, to see what combines best.
If this doesn't solve it, perhaps you could post some more code. For instance, I don't see the code for the resetTimeline function. Perhaps your code gets stuck here.