[classicwflParticipant]

Good morning! I’m working on a new site design that relies heavily on svg elements and animation; I’ve been doing my static page outside of WordPress utilizing velocity.js & velocity.ui, but am having issues figuring out how to get it to play nice in WordPress & X-Theme. I’ve already set up a child theme to override the header, but can’t figure out how to get velocity.js to work.

You can see what I’m trying to do here, essentially: http://www.classicwfl.com/geometricweb1.html – basically I’m replacing out the header with that spinning ball thingy that acts as a menu (on click it pulls up the site menu). Here’s the relevant JS code:

$( document ).ready(function() {
                $('.menusvg').velocity({opacity: 0}, {duration:0 });
                $('.menusvg').velocity("transition.expandIn", {delay: 4000});
                $('.menusvg').velocity({rotateZ: "360deg" }, {loop: true, duration:3000});
            });
            
            function menuclick() {
                $('.menusvg').velocity("stop")
                $('.menusvg').velocity("transition.shrinkOut");
                $('.menu').velocity("transition.expandIn");
            }
            
            function menuclose() {
                $('.menusvg').velocity("transition.expandIn");
                $('.menu').velocity("reverse");
                $('.menusvg').velocity({rotateZ: "360deg" }, {loop: true, duration:3000});
            }

Any tips for getting Velocity and/or my code to play right? I read about replacing the $ with jQuery(), but I still would get errors on the velocity functions as not being defined.

I’d show you the live site, but I can’t make it live until the design is done and good to go.

UPDATE: Actually, I got it to work for the most part; just trying to adjust my menu to work on-click. I just wasn’t paying proper attention 🙂

[classicwflParticipant]

Update: Here’s how I did it. My includes were working fine, just wasn’t understanding the jQuery call vs. $.

  <header class="<?php x_masthead_class(); ?>" role="banner">
      
      
      
      <div class="menucontainer">
        <svg class="menusvg" version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="414.873" height="414.862"
         viewBox="0 0 414.873 414.862" style="overflow:visible;enable-background:new 0 0 414.873 414.862;" xml:space="preserve">
            <style type="text/css">
            <![CDATA[
                .mn0{fill:#E20041;}
                .mn1{fill:#085BBF;}
            ]]>
            </style>
            <circle class="mn1" cx="191.991" cy="191.991" r="191.991"/>
            <circle class="mn0" cx="308.009" cy="308.009" r="191.991"/>
        </svg>
    </div>
      
        <script>
            jQuery( document ).ready(function($) {
                $('.menusvg').velocity({opacity: 0}, {duration:0 });
                $('.menusvg').velocity("transition.expandIn");
                $('.menusvg').velocity({rotateZ: "360deg" }, {loop: true, duration:3000});
            });
            
            jQuery(".menusvg").click(function($) {
                jQuery('.menusvg').velocity("stop")
                jQuery('.menusvg').velocity("transition.shrinkOut");
                jQuery('.wflmenu').velocity("transition.expandIn");
        });
            
            function menuclose($) {
                jQuery('.menusvg').velocity("transition.expandIn");
                jQuery('.wflmenu').velocity("reverse");
                jQuery('.menusvg').velocity({rotateZ: "360deg" }, {loop: true, duration:3000});
            }
      </script>
      
      <ul class="wflmenu">
        <li class="wflmenuli"><a href="http://www.classicwfl.com/home/">About WFL</a></li>
        <li class="wflmenuli">Art</li>
        <li class="wflmenuli">Photography</li>
        <li class="wflmenuli">Music</li>
        <li class="wflmenuli">Session Musician</li>
        <li class="wflmenuli">Commissioned Art</li>
        <li class="wflmenuclose" onClick="menuclose();">X</li>
    </ul>
  </header>

[Rue NelModerator]

Hello There,

Thanks for writing in and the very detailed post information. To complete your customization, you must enqueue the velocity scripts correctly. Please check out this link: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

Hope this helps.

[Author]

Posts