I'm using the jQuery plugin cycle2 (http://jquery.malsup.com/cycle2/) to cycle through displaying some images on my site.
I'd like to change the transition fx (fade, ScrollHorz etc) between transitions
I thought I could do this by attaching a handler to the 'cycle-after' event:
$('#myelement').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
console.log('was ' + optionHash.fx); // "was fade"
optionHash.fx = 'scrollHorz';
console.log('now ' + optionHash.fx); // "now scrollHorz"
});
but changing the value in optionHash has no effect - the fx stays as "fade".
Related
I want to create some kind of zoom out animated effect using GSAP. What I'm trying to do is scaling an element from double its size to the normal size and apply a vanishing blur filter. The filter should start at blur(15px) and going down to blur(0).
I thought I could do it this way:
var el = $('img');
TweenLite.set(el, {
'webkitFilter': 'blur(15px)',
scale: 2
});
TweenLite.to(el, 0, {
autoAlpha: 1,
delay: 1.75,
ease: Power2.easeIn
});
TweenLite.to(el, 2, {
'webkitFilter': 'blur(0px)',
scale: 1,
delay: 1.7,
ease: Power2.easeIn
});
What happens, instead, is that the blur(0) gets applied immediately.
Here's a simple pen showing the problem.
What am I doing wrong?
Have you tried just updating to GSAP 1.18.4? Seems to work in your codepen. The CDN link to TweenMax 1.18.4 is https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js
you can't really animate the blur filter, but you can set it. You can basically set up a timeline and use the progression of the timeline as the method to set the filter over the timeline duration.
below is update function that sets the blur over the timeline duration.
onUpdate:function(tl){
var tlp = (tl.progress()*40)>>0;
TweenMax.set('#blur img',{'-webkit-filter':'blur(' + tlp + 'px' + ')','filter':'blur(' + tlp + 'px' + ')'});
var heading = $('#blur h3');
heading.text('blur(' + tlp + 'px)');
}
here is a great demo made by Marzullo http://codepen.io/jonathan/pen/ZWOmmg
I have a premium wordpress theme which came with a built in full page slider. It integrates nicely into my website but it displays full page and the information underneath is being lost. The slider is responsive to the window size, I'd like it to be only 60%. Please can someone help:
(function ($) {
"use strict";
$.fn.maximage = function (settings, helperSettings) {
var config;
if (typeof settings == 'object' || settings === undefined) config = $.extend( $.fn.maximage.defaults, settings || {} );
if (typeof settings == 'string') config = $.fn.maximage.defaults;
/*jslint browser: true*/
$.Body = $('body');
$.Window = $(window);
$.Scroll = $('html, body');
$.Events = {
RESIZE: 'resize'
};
this.each(function() {
var $self = $(this),
preload_count = 0,
imageCache = [];
/* --------------------- */
// #Modern
/*
MODERN BROWSER NOTES:
Modern browsers have CSS3 background-size option so we setup the DOM to be the following structure for cycle plugin:
div = cycle
div = slide with background-size:cover
div = slide with background-size:cover
etc.
*/
var Modern = {
setup: function(){
if($.Slides.length > 0){
// Setup images
for(var i in $.Slides) {
// Set our image
var $img = $.Slides[i];
// Create a div with a background image so we can use CSS3's position cover (for modern browsers)
$self.append('<div class="mc-image ' + $img.theclass + '" title="' + $img.alt + '" style="background-image:url(\'' + $img.url + '\');' + $img.style + '" data-href="'+ $img.datahref +'">'+ $img.content +'</div>');
}
// Begin our preload process (increments itself after load)
Modern.preload(0);
// If using Cycle, this resets the height and width of each div to always fill the window; otherwise can be done with CSS
Modern.resize();
}
},
preload: function(n){
// Preload all of the images but never show them, just use their completion so we know that they are done
// and so that the browser can cache them / fade them in smoothly
// Create new image object
var $img = $('<img/>');
$img.load(function() {
// Once the first image has completed loading, start the slideshow, etc.
if(preload_count==0) {
// Only start cycle after first image has loaded
Cycle.setup();
// Run user defined onFirstImageLoaded() function
config.onFirstImageLoaded();
}
// preload_count starts with 0, $.Slides.length starts with 1
if(preload_count==($.Slides.length-1)) {
// If we have just loaded the final image, run the user defined function onImagesLoaded()
config.onImagesLoaded( $self );
}else{
// Increment the counter
preload_count++;
// Load the next image
Modern.preload(preload_count);
}
});
// Set the src... this triggers begin of load
$img[0].src = $.Slides[n].url;
// Push to external array to avoid cleanup by aggressive garbage collectors
imageCache.push($img[0]);
},
resize: function(){
// Cycle sets the height of each slide so when we resize our browser window this becomes a problem.
// - the cycle option 'slideResize' has to be set to false otherwise it will trump our resize
$.Window
.bind($.Events.RESIZE,
function(){
// Remove scrollbars so we can take propper measurements
$.Scroll.addClass('mc-hide-scrolls');
// Set vars so we don't have to constantly check it
$.Window
.data('h', Utils.sizes().h)
.data('w', Utils.sizes().w);
// Set container and slides height and width to match the window size
$self
.height($.Window.data('h')).width($.Window.data('w'))
.children()
.height($.Window.data('h')).width($.Window.data('w'));
// This is special noise for cycle (cycle has separate height and width for each slide)
$self.children().each(function(){
this.cycleH = $.Window.data('h');
this.cycleW = $.Window.data('w');
});
// Put the scrollbars back to how they were
$($.Scroll).removeClass('mc-hide-scrolls');
});
}
}
Thanks in advance. James
Generally, the themes are very customizable on the admin panel. So, you should check it out before you changing it by hand.
If you dont find for customization on the admin panel (and on the theme developer page), as you may be know, when the themes are responsive they are using some framework like bootstrap, foundation, whatever. And then, the slider have to have a css class like "large-12", it should be modified to change its size, for example "large-8", then the slider size will be 8/12.
I hope it help you!
I'm using Bxslider for my div slider. But I need my next slide to slide over my old slide - effectively once a slide has animated in it remains there stacked on top of the others that went before it.
When prev slide button is pressed then it needs to animate out - similar to this effect: http://storiesbylove.com (don't try it out on a tablet though).
Does anyone know how to do this with boxslider?
Bxslider itself is not designed to operate in that way. It only supports three types of transitions ("mode" in the API): fade, horizontal, and vertical. To support the behavior you want would require modifications to Bxslider.
Bxslider stores all the images in the slider in a ul element with a class "bxslider". It then uses the transform property to move the entire slider left/right (or up/down for a veritcal slider). To get the desired behavior you would have to modify bxslider to transform the individual images instead of the ul container.
Below I modified setPositionProperty from Bxslider to do this. You should be able to just modify the original jquery.bxslider.js file and change this function, beginning around line 535 (NOTE: this particular solution does not support infiniteLoop=true):
var setPositionProperty = function(value, type, duration, params){
var selectedSlide=parseInt(slider.active.index) + 1;
// Handle going backwards
if(value==0)
selectedSlide++;
//By default, slide the entire container
var selectedEl = el;
//If set to use "lockedSlide", then only slide one image rather
//than all of them
if(slider.settings.lockedSlide===true)
selectedEl = $(el.children()[selectedSlide-1]);
// use CSS transform
if(slider.usingCSS){
// determine the translate3d value
var propValue = slider.settings.mode == 'vertical'
? 'translate3d(0, ' + value + 'px, 0)'
: 'translate3d(' + value + 'px, 0, 0)';
// add the CSS transition-duration
selectedEl.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
if(type == 'slide'){
// set the property value
selectedEl.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
updateAfterSlideTransition();
});
}else if(type == 'reset'){
selectedEl.css(slider.animProp, propValue);
}else if(type == 'ticker'){
// make the transition use 'linear'
selectedEl.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
selectedEl.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
selectedEl.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
// reset the position
setPositionProperty(params['resetValue'], 'reset', 0);
// start the loop again
tickerLoop();
});
}
// use JS animate
}else{
var animateObj = {};
animateObj[slider.animProp] = value;
if(type == 'slide'){
selectedEl.animate(animateObj, duration, slider.settings.easing, function(){
updateAfterSlideTransition();
});
}else if(type == 'reset'){
selectedEl.css(slider.animProp, value)
}else if(type == 'ticker'){
selectedEl.animate(animateObj, speed, 'linear', function(){
setPositionProperty(params['resetValue'], 'reset', 0);
// run the recursive loop after animation
tickerLoop();
});
}
}
}
To use when activating bxslider set "lockedSlide" to true:
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
mode: 'horizontal',
lockedSlide: true
});
I'm having hard time creating a rather simple move animation.
The effect I want to achieve is similar to this http://jsbin.com/vorub/1/edit?output (which I took from some other SO question).
Now I managed to do it using .animation()
Basically doing this
.animation('.move-to-top', [function() {
return {
addClass: function(element, className, done) {
var el = $(element);
var top = el.position().top;
el
.addClass('move-to-top')
.one('transitionend', function() {
setTimeout(function() {
el.css({
transform: 'scale(1.03) translateY(-' + (top+10) + 'px)'
})
.one('transitionend', function() {
setTimeout(function() {
el
.removeClass('move-to-top')
.css({
transform: 'scale(1) translateY(-' + (top) + 'px)'
})
}, 50);
el.prevAll('.timetracking-item')
.css({
transform: 'translateY(' + el.height() + 'px)'
});
});
}, 100);
});
}
}
}]);
where move-to-top class does this
.move-to-top {
#include vendor(transition, all 400ms ease-in-out);
#include vendor(transform, scale(1.03) translateY(-10px));
position: relative;
z-index: 999;
}
What it does is
add class which scales and move item up a bit
move the item to the top using js
move all previous elements that down to make space using js
remove class that added scaling
BUT that's just for the effect and it's done using transforms, which is of course undesirable, so I'd either need to "cleanup" after the transitions are done and remove trasnsforms and actually move the elements in DOM. Or do it completely differently.
Ideal would by orderBy & ng-move combo, but that would require ng-move to have some ng-pre-move, ng-after-move events, which it as far as I know, doesn't.
Or at least if you could use both addClass: fn() and move: fn() where addClass would fire first(while the element is on the old position), but you can't do this either(addClass doesn't fire when orderBy is applied).
The last option I can think about, and like the least, is broadcast some event from my .animation() after all the transitions are done and catch it inside controller, and sort the array then, but I'd need to remove the style attribute from all the items(to remove items) which could and probably will cause flickers.
Any other ideas?
The pre-move is apparently comming in 1.3 https://github.com/angular/angular.js/issues/7609#issuecomment-44615566
For now, what I've done was apply ng-if, which forces angular to re-render the whole list. Works fine.
Is there a way to get this behavior on this dropline menu?Need second or thrid level to stay active for one second when mouse is hover out from menu items.
To clarify, you're looking for some kind of delayed reaction to the mouse's movement? If so, check out this jQuery hoverintent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html
EDIT: I think you'll need to edit your menu script to replace any instance of .hover with .hoverIntent. I had trouble testing this in jsfiddle, but see if it works:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src:'http://www.odzaci.rs/wp-content/themes/typo/images/down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 300}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
// THIS IS THE PART I REPLACED
var config = {
over: function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
timeout: 1000, // number = milliseconds delay before onMouseOut
out: function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
};
$curobj.hoverIntent( config );
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}