‹‹ homeAutor: Renato lucena (jQuery Cycle Plugin)

Exemplos - Modelo jQuery Cycle Plugin

You now can put a new twist on your transitions by taking advantage of these in/out options.

Agora você pode colocar novos efeitos em suas transições, aproveitando essas opções de entrada / saída.

 

$('#s1').cycle({
    fx:      'zoom',
    speedIn:  2500,
    speedOut: 500,
    easeIn:  'easeInBounce',
    easeOut: 'easeOutElastic',
    sync:     0,
    delay:   -4000
});
$('#s2').cycle({
    fx:      'scrollDown',
    speedIn:  2000,
    speedOut: 500,
    easeIn:  'easeInCirc',
    easeOut: 'easeOutBounce',
    delay:   -2000
});

Custom Transitions

Transições personalizadas

cssBefore
The styles that are applied to a slide immediately before it is transitioned in.
animIn
The styles that are animated as a slide is transitioned in.
animOut
The styles that are animated as a slide it transitioned out.
cssAfter
The styles that are applied to a slide immediately after it is transitioned out.
cssFirst
The styles that are applied once to the first slide - the one that is initially showing. This property is a be-kind-to-IE property. It is necessary to keep IE happy when animating out the first slide. Any properties that are animated must have initial values, otherwise IE will bork. These values can be defined in CSS, but this property removes the dependency on the external CSS definition.

You may have just realized that this gives you full control over both the incoming slide and the outgoing slide. You can choose which properties to animate, where the slide should start, etc. Cool!

Use these options, along with the custom fx option, to create transitons that use different effects for the in and out slides.

$('#s3').cycle({
    fx:      'custom',
    cssBefore:{ 
        left: 232,  
        top: -232, 
        display: 'block'
    },
    animIn: { 
        left: 0,
        top: 0 
    },
    animOut: { 
        left: 232,  
        top: 232
    },
    delay: -3000
});
$('#s4').cycle({
    fx:      'custom',
    sync: 0,
    cssBefore: { 
        top:  0,
        left: 232,
        display: 'block'
    },
    animIn:  {
        left: 0
    },
    animOut: { 
        top: 232
    },
    delay: -1000
});
$('#s5').cycle({
    fx:      'custom',
    cssBefore: { 
        left: 115, 
        top:  115, 
        width: 0, 
        height: 0, 
        opacity: 1,
		display: 'block'
    },
    animOut: { 
        opacity: 0 
    },
    animIn: { 
        left: 0, 
        top: 0, 
        width: 200, 
        height: 200 
    },
    cssAfter: { 
        zIndex: 0
    },
    delay: -3000
});
$('#s6').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
		display: 'block'
    },
    animIn:  { 
        width: 200,
        height: 200 
    },
    animOut: { 
        top:  200,
        left: 200,
        width: 0,
        height: 0
    },
    cssAfter: { 
        zIndex: 0 
    },
    delay: -1000
});

jQuery Cycle Plugin


Next up: Modelo 1 ››

Blog: Acesse ››

www.renatolucena.tk(2017)