Questa pagina serve solo da test per i moduli in sviluppo

Riferimenti CSS.Class

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.

Questo sito web e tutti i suoi contenuti, vengono pubblicati per la promozione dell’agenzia nei confronti dei clienti, effettivi o potenziali, pertanto l’accesso e l’utilizzo di questo sito web sono regolati da due condizioni basilari:

Il sito web contiene materiale registrato e protetto da copyright, materiale di proprietà esclusiva e riservata, come loghi, contenuti, immagini, animazioni e suoni, elaborazioni grafiche, illustrazioni e disegni, e comunque tutto quanto è presente nel suo interno.

E’ assolutamente fatto divieto a chiunque di modificare, pubblicare o trasmettere il suddetto materiale e di sfruttare i relativi contenuti, per intero o parzialmente, senza il preventivo e necessario consenso scritto dall’agenzia Linkness. Il linking, il framing e il downloading relativi ai contenuti del sito web sono ammessi solo se espressamente e assolutamente concessi dall’agenzia.

Ciao

Ciao

Ciao

Ciao