scrollreveal.js in Creativity

Responsive, suitable for any type of business, built for any needs elegant one-page Joomla template.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Wed Nov 04, 2015 10:34 am
Reply with quote
Report this post
Hello,

I'm willing to put scrollreveal script into Creativity template to automate text animations in my modules. Here's what I did:
1) took scrollreveal.js from 'John' template and copied it to /js directory of 'Creativity' template,
2) added to /gk_creativity/layouts/blocks/head.php line:

$this->API->addJS($this->API->URLtemplate() . '/js/scrollreveal.js');

3) created module (bottom1) with content including: <div data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.3s">Some text</div>

And it doesn't work. At. All.

What am I missing or doing wrong?

Thank you in advance
User avatar
Fresh Boarder

GK User
Wed Nov 04, 2015 3:55 pm
Reply with quote
Report this post
You have probably forgot to initialise scrollreveal in gk.scripts.js. Pease search for scrollreveal initialisation in any of our templates that uses this script.
User avatar
Moderator

GK User
Thu Nov 05, 2015 8:51 am
Reply with quote
Report this post
SOLVED!

Thank you Cyberek. You were partly right - this script indeed needed initialisation. Here is what I had to do additionally to make it work:

in gk/creativity/layouts/default.php

I changed <script> section (which is right before </body> tag) from:

Code: Select all
<script>
    jQuery(document).ready(function(){
        // Target your .container, .wrapper, .post, etc.
        jQuery("body").fitVids();
    });
</script>


to:
Code: Select all
<script type="text/javascript">
        if(jQuery(window).width() > 600) {
            jQuery(window).scrollReveal = new scrollReveal();
        }

        jQuery(document).ready(function(){
           // Target your .container, .wrapper, .post, etc.
           jQuery("body").fitVids();
    });
</script>


And that's it!
User avatar
Fresh Boarder

GK User
Thu Nov 05, 2015 7:32 pm
Reply with quote
Report this post
Thanks for sharing the code.
Is there anything else I can help you with regarding this topic?
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.