Tutte le pagina sono costituite da elementi / blocchi che si articolano su 4 livelli di gestione:
1 - I Menù, sulle singole voci (L'intera pagina)
2 - Il template, sui blocchi (Helix3)
3 - I Moduli Joomla, sul modulo stesso o le singole parti che lo compongono
4 - YeEditor blocks, su: riga, colonna oppure oggetto (Shortcode in content)
Ad ogni elemento / blocco è possibile applicare una classe personalizzata.
Di seguito una lista organizzata per "tecnologia" delle classi implementate in WHITENESS:
queste sono le classi elencate nel file /css/linkness.css
Stira il <div> di sfondo orizzontalmente e crea un background full-width anche all'interno di un container
Costruisce un rettangolo inclinato a 45° nel fondo della pagina.
La classe che lo controlla è "fondo-storto", le proprietà del rettangolo sono modellabili da css in: linkness.css
Va Applicato ad una riga.
gestisce una fila di box tutti uguali in altezza e in contenuto viene posizionato al centro.
animsition-link CLASS
Genera l'animazione da una pagina all'altra.
Applicando la classe "animsition-link" attiverà una transizione per lo scambio della pagina. **
In alternativa è possibile applicare la classe "no-animsition-link" per forzare a non usare l'animazione su specifici link, ES. <a href="#" class="no-animsition-link">
** NB: in questo momento è su tutti gli A HREF.
Animate.CSS genera le classi per gestire le TRANSIZIONI ANIMATE su <tag>
RISORSE
Home: https://daneden.github.io/animate.css/
Github: https://github.com/daneden/animate.css
Generator: https://coveloping.com/tools/css-animation-generator
UTILIZZO:
class="animate TRANSIZIONE"
<h1 class="animated infinite bounce">Example</h1>
animate è l'ancora per impostare le proprietà di animazione.
TRANSIZIONI
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- jello
TRANSIZIONI
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
TRANSIZIONI
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
TRANSIZIONI
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
TRANSIZIONI
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
TRANSIZIONI
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
WOW è una libreria che gestisce le animazioni degli oggetti solo se sono a livello di scroll, Sfrutta animate.css.
RISORSE
Home: http://mynameismatthieu.com/WOW/
Github: https://github.com/matthieua/WOW
UTILIZZO:
class="wow TRANSIZIONE"
<section class="wow slideInLeft"></section> <section class="wow slideInRight"></section>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
var wow = new WOW( { boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: true, // trigger animations on mobile devices (default is true) live: true, // act on asynchronously loaded content (default is true) callback: function(box) { // the callback is fired every time an animation is started // the argument that is passed in is the DOM node being animated } } ); wow.init();
animate è l'ancora per impostare le proprietà di animazione.