Menu

How to animate any divi module

Did you ever wanted to animate any DIVI module when scrolling down?

Like this text module for example?

Blablalbal

Or this testimonial?

Test

Or the contact form module? Or any other?

5 + 10 =

So this simple tutorial will help for sure.

In fact, everything is still in DIVI code. You just have to add a class to your module depending what animation you want to use.

Step One: Create a module

The first thing you have to do here is to create a module (it doesn’t matter which one you choose, just create it).
For this example I’ll use a text module.

How to animate any divi module

Step Two: Add the class

There are two css classes you have to add for this effect to work.

The first one is: « et-waypoint »

The second one is the class of the effect you’re looking for

How to animate any divi module

Step Three: Choose your effect

Now, several possibilities are up to you

You can choose between five effects made by Divi:

FROM TOP

et-waypoint top-animated

FROM RIGHT

et-waypoint right-animated

FROM LEFT

et-waypoint left-animated

FROM BOTTOM

et-waypoint bottom-animated

FADE IN

et-waypoint fadein-animated

Step Four: Copy this code

/*--------FROM LEFT----------*/

.left-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeLeft 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-moz-animation: fadeLeft 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-o-animation: fadeLeft 1.3s 1 cubic-bezier(0.77,0,.175,1.3); 
	animation: fadeLeft 1.3s 1 cubic-bezier(0.77,0,.175,1.3);}

/*--------FROM RIGHT---------*/

.right-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeRight 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-moz-animation: fadeRight 1.5s 1 cubic-bezier(0.77,0,.175,1.3); 
	-o-animation: fadeRight 1.3s 1 cubic-bezier(0.77,0,.175,1.3); 
	animation: fadeRight 1.3s 1 cubic-bezier(0.77,0,.175,1.3);}

/*---------FROM TOP----------*/

.top-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-moz-animation: fadeTop 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-o-animation: fadeTop 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeTop 1.3s 1 cubic-bezier(0.77,0,.175,2);}

/*--------FROM BOTTOM--------*/

.bottom-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77,0,.175,2);
	-moz-animation: fadeBottom 1.5s 1 cubic-bezier(0.77,0,.175,2);
	-o-animation: fadeBottom 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeBottom 1.3s 1 cubic-bezier(0.77,0,.175,2);}

/*---------FADE IN-----------*/

.fadein-animated.et-animated { 
	opacity: 1; 
	-webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-moz-animation: fadeIn 1.5s 1 cubic-bezier(0.77,0,.175,2); 
	-o-animation: fadeIn 1.3s 1 cubic-bezier(0.77,0,.175,2); 
	animation: fadeIn 1.3s 1 cubic-bezier(0.77,0,.175,2);}

To be sure that all of those effects will work, you have to copy and paste this css part into the Divi Theme Options panel.

How to animate any divi module

Step Five: Try it!

Now you can try it on every module

A text module from left

A testimonial

from right

Google va commencer à bloquer certains sites web

Vous vous êtes fait avoir (et êtes infecté par un virus)

Ce genre de situations vous est déjà arrivée. Le genre où vous êtes en train de naviguer sur internet quand soudainement vous tombez sur une page qui affiche, en grand, un message du type « VERIFICATION DE VIRUS GRATUITE» ou plus récemment sur les tablettes et mobiles vous annonçant que vous êtes infecté. Pris par la panique, vous cliquez sur le lien en espérant obtenir de l’aide. En réalité, ce message était une publicité, qui vous a redirigé sur un site inconnu et amené à installer un fichier qui se trouve être un virus.

La chasse aux truands

Selon Ars Technica, Google est heureusement en train de mettre en place un système qui vous aidera à éviter les sites qui arborent ce genre de publicités, et commencer à bloquer les sites qui vous dupent par le biais de boutons ou de contenus trompeurs.  C’est par exemple le cas des faux boutons de téléchargement placés juste à côté des vrais, ou encore des fenêtres intempestives (« pop-up ») qui proposent d’installer de faux anti-virus.

Ce blocage se fera grâce à la technologie de « safe browsing » (navigation sécurisée) de Google. Bien que le safe browsing existe depuis plusieurs années, cette technologie était surtout utilisée pour empêcher les utilisateurs de visiter des sites contenant des malwares, ou ceux considérés comme étant dangereux par Google.

Conçu pour votre sécurité

Google bloquera donc les sites contenant toute forme de « contenu intégré trompeur », ces publicités louches et mensongères qui proclament que vous devez installer un certain plugin, programme ou barre d’outils. Dorénavant, lorsque vous tomberez sur un tel site, Google affichera un grand message d’avertissement rouge au lieu de vous donner l’accès direct au site.

Ceci s’ajoute aux modifications déjà apportées en novembre par Google, qui a alors commencé à bloquer les sites utilisant des stratégies d’ingénierie sociale pour vous faire installer des logiciels ou révéler des informations sensibles sans que vous ne le souhaitiez.

Quel impact pour les webmasters ?

Cette nouvelle technologie de Google pourrait être délicate à appréhender pour les webmasters qui ont du mal à contrôler les contenus trompeurs livrés par les serveurs publicitaires. Malheureusement, les bases d’informations pour webmasters de Google ne sont pas très utiles à cet égard. Elles indiquent tout de même que « les réseaux publicitaires peuvent effectuer un roulement des annonces sur les pages de votre site. Ainsi, il vous faudra peut-être actualiser une page plusieurs fois avant de voir s’afficher d’éventuelles annonces d’ingénierie sociale ».

Pour l’utilisateur lambda, cette aide supplémentaire pour maintenir la sécurité est bienvenue. Gardez en tête que c’est un travail en cours qui sera potentiellement appliqué de manière graduelle, compte tenu du temps qu’il faudra aux équipes de Google pour déterminer quels sites ont recours à ces pratiques de manière constante.

Source: http://theamericangenius.com/tech-news/google-blocks-sites-with-download-buttons/

Pourquoi tant de développeurs quittent l’App Store ?

Une source de frustration pour les développeurs

Le Mac App Store n’a pas eu beaucoup de succès récemment parmi les développeurs. Initialement lancé en Janvier 2011, le Mac App Store avait pour but de fournir aux développeurs une plateforme centralisée pour vendre leurs applications, similaire à celle de l’iOS qui a un succès colossal. Cependant, au lieu de faciliter la mise en avant de leurs produits, le Mac App Store s’est révélé être une source de frustration grandissante pour les développeurs.

Résultat : de plus en plus de développeurs le délaissent.

Limitations techniques et bugs

Les sources de frustrations pour les développeurs utilisant l’App Store ont été multiples ces derniers mois. En novembre, un bug dû à un certificat de sécurité a provoqué l’arrêt des téléchargements des applications achetées. Puis, en décembre, Bohemian Coding annonce que la plateforme n’avait plus d’intérêt pour eux. Selon eux, ce bug ainsi qu’un nombre d’autres petits problèmes les ont amenés à prendre la décision de retirer Sketch, leur application de design professionnel, du Mac App Store.

Dans un post de blog, l’entreprise déclara que «la vérification des App prend toujours au moins une semaine, certaines ont des limitations techniques imposées par le règlement du Mac App Store (tels que le sandboxing) brident les innovations que nous souhaitons apporter à Sketch, et la tarification de mises à jour est encore indisponible».

Quelles sont les conséquences ?

Cette fuite des développeurs finira par avoir des conséquences néfastes pour le Mac App Store. Sketch, par exemple, se situait parmi les applications les plus rentables du Store, et avait même obtenu un prix pour son design de la part d’Apple.

La frustration des développeurs est aussi une des raisons majeures qui les pousse à délaisser le  Mac App Store. Selon Scott Kyle, développeur de l’appli Current, «c’est une blague de n’avoir quasiment pas mis à jour le Mac App Store en 5 ans, de n’avoir fait que peu d’efforts pour améliorer certaines limitations telles que le sandboxing, d’ignorer les nouveaux outils existant comme l’app analytics, et de continuer à prendre 30% malgré tout».

Scott n’a pas nécessairement tort. Depuis son lancement en 2011, l’App Store n’a pas vraiment évolué, au regret de nombreux développeurs insatisfaits qui aimeraient qu’Apple y travaille. Si la fuite perdure, Apple n’aura pas le choix et sera bien obligé d’améliorer son App Store.

Source: http://theamericangenius.com/tech-news/developers-leaving-the-app-store/

Appeler
Y aller