Scroll animations in Oxygen

le 26/10/2021
JAG

This tutorial provides the steps to implement Animate on scroll Javascript library in Oxygen for animating elements as they come into view upon scrolling.
Step 1
Install and activate my custom functionality plugin.
Create a file named say, data-attributes.js in the plugin’s assets/js directory via a FTP client having:
(function ($) {

$('.data').each(function (index1, value1) {
var getClasses = $(this).attr('class').split(' ');
var currentElement = $(this);

$(getClasses).each(function (index, value) {
if (value.indexOf('data-') !== -1) {
var d = value.substring(0, value.indexOf('_')); // data attribute name
var newval = value.replace(d, ''); // set data attribute value. Includes _
newval = newval.replace('_', '');
newval = newval.replace('hash', '#');
newval = newval.replace('__', '.');
if (d.length > 1) {
currentElement.attr(d, newval);
currentElement.removeClass(value);
currentElement.removeClass('data');
}
}
});
});

})(jQuery);

In the next step we shall enqueue this script so that after DOM loads in the browser, classes like data-aos_fade will get parsed and get converted to data attributes, data-aos="fade".
Step 2
Upload aos.css to plugin’s assets/css directory and aos.js to assets/js.
Edit plugin.php. Inside custom_enqueue_files(), add
wp_enqueue_script(
'data-attributes',
plugin_dir_url( __FILE__ ) . 'assets/js/data-attributes.js',
array( 'jquery' ),
'1.0.0',
true
);

wp_enqueue_style(
'aos',
plugin_dir_url( __FILE__ ) . 'assets/css/aos.css'
);

wp_enqueue_script(
'aos',
plugin_dir_url( __FILE__ ) . 'assets/js/aos.js',
array(),
'1.0.0',
true
);
If you would like to restrict the scroll animations to only a specific page/view wrap the above in an if conditional.
For example, to load the assets only on the site’s front page:
if ( is_front_page() ) {
wp_enqueue_script(
'data-attributes',
plugin_dir_url( __FILE__ ) . 'assets/js/data-attributes.js',
array( 'jquery' ),
'1.0.0',
true
);

wp_enqueue_style(
'aos',
plugin_dir_url( __FILE__ ) . 'assets/css/aos.css'
);

wp_enqueue_script(
'aos',
plugin_dir_url( __FILE__ ) . 'assets/js/aos.js',
array(),
'1.0.0',
true
);
}
Step 3
Let’s initialize Animate on scroll.
Add a Code Block below all other elements.
PHP & HTML:

JavaScript:
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms. Default: 400
offset: 240, // offset (in px) from the original trigger point. Default: 120
disable: 'phone', // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function. Default: false
});
I’ve
increased the global duration to 800 since the default of 400 makes the animations too quick.increased the global offset to 240 since the default of 120 triggers the animations earlier than I would like when scrolling down.disabled the animations on phones.
If you want the animations to work on phones as well, simply delete the last line:
disable: 'phone', // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function. Default: false
Step 4
In the Oxygen editor, select the element for which you wish to add scroll animation.
Add a class of data. This class is needed to indicate our custom JS defined earlier in data-attributes.js that this element’s classes be parsed into data attributes.
Add a class of data-aos_fade-left.
Replace fade-left with the name of your desired animation from this list.

Code in data-attributes.js will add data-aos="fade-left" data attribute in the front end and delete this class.
Repeat this for other elements you wish to add scroll animations to.
For staggered/sequential animations like the three columns in the Testimonials section on the demo page, we need to add data-aos-duration data attribute with increasing values.
For this, I’ve added data-aos-duration_1300 class for the second column and data-aos-duration_1800 for the second column. i.e., there is a gap of 500ms between each. Remember that we have set the global duration to 800 in Step 3.

Reference: https://wpdevdesign.com/how-to-add-data-attributes-to-elements-in-oxygen/

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat