Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Fitrepreneur pro asked 8 years ago


Hello - I am not clear on what this means: Step 1: Initialize script for animations on a scroll. new WOW().init(); Would you please be more specific as to what I need to add to html, .css and/or .js to initiate the animations 'trigger' when they enter the viewport? thank you

Nasimullah free answered 4 years ago


hi how to show the paragraph text when we scroll down it animate like fade in fade out i try but cant work with class animated kindly help


Grzegorz Bujański staff commented 4 years ago

Hi. Please create snippet here: https://mdbootstrap.com/snippets/ I will look at this.



Jonathan, is it your problem resolved?

jbankster.web pro answered 8 years ago


No problem. I need to have the ability to inspect the page your using animations on. This means I need a live link I can goto. Without a link to your page, I can't really help. For your benefit, I will try one time below. If the following doesn't help, then I can't do anything else without inspecting your code. Use lowercase "wow" in the css class names and use uppercase "WOW" in the initialization call. Also remember, These animations depend on JQuery and specific css rules. MDB provides the necessary css rules in their .css file. As long as you have links to JQuery and MDB css, as well as putting the initialization call in, like shown previously... you should be good to go. Simply look into a demo template that uses animation and comes in the download of MDB. Load this in your browser and then look at how the html file is coded and then compare this to your file. In the head of your html document you need a css call to the mdb.css file.
    <!-- Material Design Bootstrap -->
    <link href="<path to your>/mdb.min.css" rel="stylesheet">
Then, at the bottom of the html document,just before the closing body tag, (at a minimum) you need a link to JQuery and place the "WOW" initialization call last in the order. Example:
    <!-- JQuery -->
    <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-2.2.3.min.js"></script>

    <!-- Animations init-->
    <script>
        new WOW().init();
    </script>
After you've made these change, you need to make sure to dump your browser cache and then reload the page in browser. Hope that helps. Not having a link to look at is really the only way I can help. Right now I'm wasting time typing all this out and guessing what your problem MIGHT BE. Josh

Fitrepreneur pro answered 8 years ago


Hi Josh - Thank you for the response, but that did not work. Here is my code: <!--First column--> <div class="col-md-12 mb-r WOW fadeInUp"> <!--Card--> <div class="card-overlay" style="background-image: url('img/cards/make_products_customers_love.png')"> ----- <!-- Animated --> <!-- Animations init--> <script> new WOW().init(); </script> <!-- / Animated--> </body> PS I tried both WOW and wow

jbankster.web pro answered 8 years ago


Hi, Put this code just before the closing body tag:
    <!-- Animations init-->
    <script>
        new WOW().init();
    </script>
Josh

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No