Changing up this slide in and contents

JavaScript
1

Here I have a section displaying posts. You can see them here ( they say read more underneath )

http://www.muslimahwebdesign.co.uk/wac/home-copy/

What I’d like to do is have the slide in coming in from the left ( it is currently coming in from the bottom )
and I would like to remove the view image / symbol and replace it with read more.

I’m not sure what or to look for these changes, I’m guessing it jscript. How can I find out how to change theses things?

Many thanks

2

Hi,

You I would imagine that the classes applied to the markup are what’s controlling the animation. E.g.:

<div class="vc_gitem-animated-block vc_gitem-animate vc_gitem-animate-slideBottom" data-vc-animation="slideBottom"> ... </div>

It seems you are using the animate.css library (line 851):

<link rel='stylesheet' id='animate-css-css'  href='http://www.muslimahwebdesign.co.uk/wac/wp-content/plugins/js_composer/assets/lib/bower/animate-css/animate.min.css?ver=4.6.2' type='text/css' media='' />

but normally that requires the class animated to be added to the elements in question.

Either way, I’d have a play around with that and try swapping out animation="slideBottom" for animation="slideLeft" or some such.

3

Thanks, so I tried changing it to “slideLeft” etc but no change, so in this instance should I look to a js folder to change it?

4

I would try to isolate this component and its behaviour, so that you can understand what is causing it to behave as it does.

Start with your website and remove unnecessary content. Then remove unnecessary CSS and JS files until you have just this one element sliding in from the bottom.

At this point you will be in a much better position to affect a change in its behaviour, as you won’t have to randomly change things and hope that they work.

This is what to aim for:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My site</title>
    <link rel="stylesheet" type="text/css" href="path/to/stylesheet/which/is/driving/animation.css">
  </head>
  <body>

    <div class="vc_gitem-animated-block vc_gitem-animate vc_gitem-animate-slideBottom" data-vc-animation="slideBottom"> ... </div>

    <script src="path/to/any/js/files/necessary/for/animation"></script>
  </body>
</html>
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.