Alternate the text alignment

Working on a clients site today and they wanted a slider for their site..Now I normally steer clients away from sliders as they can slow down a sites performance, both in speed and in SEO, but for this eCommerce site it seemed to fit so I was happy to oblige the client.

For this I wanted image on one side, and title, text and CTA on the other. Not only that, I wanted to alternate between slides as well as add some animations to each element within the page.

The core slider in Beaver Builder allows the end user to position text for every slide, but I wanted to make it easy for my client.

In order to do that I wanted to add/remove CSS classes to every other slide, and jQuery handles this really easily.

Using the Beaver Builder theme, we jump into the customizer and navigate to Code > Footer Code and paste the following, ensuring it is wrapped in <script></script> tags.

jQuery( document ).ready(function() {
 jQuery( '.fl-slide:odd' ).addClass('fl-slide-text-right').removeClass('fl-slide-text-left');
 });

So what does the code do? When the document is ready, it searches the page for the class fl-slide and locates every second one. Now even though it says odd, it will actually locate the even slides as they are every other slide (2, 4, 6 etc).

Once it finds every other fl-slide class, it then adds the class fl-slide-text-right and removes the class fl-slide-text-left

Now that we have the content aligning automatically as we like, any layered images will alternate as required as well. Cool.

Add the animations

So now lets go about adding some animations to each element.

This will take a bit of planning to figure out how you want each element to animate, but this is what I decided.

For the odd slides (text on left):

  • Title slide in from the left with a large animation
  • Text slide in from the bottom with a small animation
  • Image slide in from right with a large animation

For the even slides (text on the right):

  • Title slide in from the right with a large animation
  • Text slide in from the bottom with a small animation
  • Image slide in from left with a large animation

So how do we do that? We are going to use a predefined CSS Library called Animate.css so what we need to do is load that into out theme, so still in the customizer > code go to header code and paste the following

<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.4.0/animate.min.css">

This will load the css into the theme, so now we need to add the classes to the individual elements, and we do that exactly the same way as we did to change the alignments.

So go back to the Customizer > Code > Footer Code and add the following

jQuery(".fl-slide-title:odd").addClass("fadeInRightBig");

jQuery(".fl-slide-text:odd").addClass("fadeInUp");

jQuery(".fl-slide-photo-img:odd").addClass("fadeInLeftBig");

jQuery(".fl-slide-title:even").addClass("fadeInLeftBig");

jQuery(".fl-slide-text:even").addClass("fadeInUp");

jQuery(".fl-slide-photo-img:even").addClass("fadeInRightBig");

Lets run through what this code is doing, for all the even number slides text on right) to the title is adds in fadeInRightBig, then the text it adds fadeInUp and finally the image it adds the class fadeInLeftBig.

For the odd numbered slides (text on left) it is adding the following classes; for the title is adds in fadeInRightBig, then the text it adds fadeInUp and finally the image it adds the class fadeInLeftBig.

Check out the Animate.css site for examples and different animations.

So even though the animations are taking place, they are doing so as soon as the site loads, that means as the slides scroll through the animations have already happened, lets fix that now.

Delay the animations

To ensure our sites visitors get to see the animations, we are going to use a jQuery plugin called WOW.js.

This is really easy to use and integrate, all we need to do is in the customizer > Code > Footer Code add the following to top of the previous code were were working on

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
new WOW().init();
</script>

What this doe is loads in the wow library and initiates it, nothing fancy and we will not see any changes to our animations yet.

In order to make WOW work with our slides, we need to go in and add the class to all animations we added before, just like this:

jQuery(".fl-slide-title:odd").addClass("fadeInRightBig wow");
jQuery(".fl-slide-text:odd").addClass("fadeInUp wow");
jQuery(".fl-slide-photo-img:odd").addClass("fadeInLeftBig wow");
jQuery(".fl-slide-title:even").addClass("fadeInLeftBig wow");
jQuery(".fl-slide-text:even").addClass("fadeInUp wow");
jQuery(".fl-slide-photo-img:even").addClass("fadeInRightBig wow")

And that is all there is to it, you should now see all the animations take place once they scroll into view. This is only the first time the slides scroll, the animations do not repeat themselves.

The final code

Here is all the final code we used in this tutorial

Customizer > Code > Header Code

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.4.0/animate.min.css">

Customizer > Code > Footer Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
new WOW().init();
</script>

<script>
jQuery( document ).ready(function() {

jQuery( '.fl-slide:odd' ).addClass('fl-slide-text-right').removeClass('fl-slide-text-left');

jQuery(".fl-slide-title:odd").addClass("fadeInRightBig wow");

jQuery(".fl-slide-text:odd").addClass("fadeInUp wow");

jQuery(".fl-slide-photo-img:odd").addClass("fadeInLeftBig wow");

jQuery(".fl-slide-title:even").addClass("fadeInLeftBig wow");

jQuery(".fl-slide-text:even").addClass("fadeInUp wow");

jQuery(".fl-slide-photo-img:even").addClass("fadeInRightBig wow")

});
</script>

BONUS: Parallax background

Want to add some parallax scroll to the background image? Play around with this code in the Customizer > Code > Footer Code

<script>
(function(){

var parallax = document.querySelectorAll(".fl-slide-bg-photo"),
speed = 0.5;

window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){

var windowYOffset = window.pageYOffset,
elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

el.style.backgroundPosition = elBackgrounPos;

});
};
})();
</script>

Leave a comment