Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree3Likes
  • 1 Post By mlseim
  • 1 Post By mlseim
  • 1 Post By mlseim

Thread: Is it possible to create own animation, then install it with a plugin, or do you ....

  1. #1
    Senior Member
    Join Date
    Nov 2012
    Posts
    108
    Member #
    33949
    Liked
    2 times

    Is it possible to create own animation, then install it with a plugin, or do you ....

    Hi, is it possibe to create own animation, then install it with a plugin, or do you have to select an animation to use plugins.

    The reason why I am asking, is that I can't seem to get an animation


    working on a child theme, if I do not use a plugin, so Im wondering if it


    would be easier just to use a plugin, but instead of selecting an animation


    to put in, if its possible to create own animation with the plugin.


    I want to do this, so I can get practice doing animations with the coding


    and javascript that I have gone through a few times.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,966
    Member #
    5580
    Liked
    757 times
    Do you have another website or webpage that is NOT Wordpress that you can experiment and do animations? Get it working on a webpage that is not Wordpress ... if you can do that then let me know. It will be easier to move it to Wordpress if you know it already works by itself.
    spencer likes this.

  4. #3
    Senior Member
    Join Date
    Nov 2012
    Posts
    108
    Member #
    33949
    Liked
    2 times
    Would putting the animation on notepad++ page, then try transfer it to the wordpress site be alright.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,966
    Member #
    5580
    Liked
    757 times
    The animation utilizes HTML, CSS, and javascripting? It needs those three sections of script to operate?
    That's what I'm not sure of. Are you able to create an example on a web page totally separate from your wordpress stuff?
    spencer likes this.


  6. #5
    Senior Member
    Join Date
    Nov 2012
    Posts
    108
    Member #
    33949
    Liked
    2 times
    Sort of, here is an animation in notepad++. It shows when I open the page in chrome, Ok, it doesn't want to move, but it is there.
    Here it is in notepad++. The file or page is called animating-click.htm

    <!DOCTYPE html>
    <html>


    <head>
    <meta charset="uif-8">
    <title>Animating in Code!</title>
    <style>
    body {
    background-color: #FFF;
    margin: 30px;
    marging-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }

    #contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
    background-color #0FF2FF;
    display: flex;
    }

    #circle {
    width: 200px;
    height: 200px;
    background-color: #20A6FF;
    border-radius: 50p%;
    }

    #move {
    background-color: gold;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    border: 5px solid #333;
    outline: none;
    }
    #move:hover {
    background-color: coral;
    }
    move:active {
    background-color: yellowgreen:
    }
    </style>
    </head>

    <body>
    <div id="contentContainer">
    <div id="circle"></div>
    </div>


    <input id="move" type="button" value="move"></input>

    <script>
    var circle = document.queryselector("#circle");

    var xPos = 0;
    var yPos = 0;
    var angle = 0;

    function animate() {
    xPos += 5;
    angle += .1;

    yPos = Math.round(50 * Math.sin(angle));

    circle.style.transform = translate3d(${xPos}px, ${yPos}px, 0)';

    if (Math.abs(xPos) >= 900) {
    xPos = -500;
    }

    if (angle > 2 * Math PI) {
    angle = 0;
    }

    requestAnimationFrame(animate);
    }
    animate();
    </script>
    </body>

    </html>

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,966
    Member #
    5580
    Liked
    757 times
    Yours does not run by itself on my PC either.
    It appears to be missing the event occurring with the button click.
    You have no way to trigger the animation.

    Below is another simple animation that does work on my PC.
    You can save the file as "test.html" on a PC and just run it using your local browser.

    So copy the script below and make sure it works just using your browser.
    Then, you have to somehow get the script inserted into the HTML of your main page.
    I'm not sure what text editor you are using with your wordpress. Are you creating your pages using the wordpress editor within admin? Like the WYSIWYG (what you see is what you get) editor?


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="uif-8">

    <script>
    var adiv
    var starttime

    function moveit(timestamp, el, dist, duration){
    //if browsers don't support requestAnimationFrame, generate our own timestamp:
    var timestamp = timestamp || new Date().getTime()
    var runtime = timestamp - starttime
    var progress = runtime / duration
    progress = Math.min(progress, 1)
    el.style.left = (dist * progress).toFixed(2) + 'px'
    if (runtime < duration){ // if duration not met yet
    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
    moveit(timestamp, el, dist, duration)
    })
    }
    }

    function requestdemo(){
    requestAnimationFrame(function(timestamp){
    adiv = document.getElementById('mydiv')
    starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp
    moveit(timestamp, adiv, 400, 2000) // 400px over 1 second
    })
    }
    </script>

    </head>

    <style>
    #mydiv{
    width: 50px;
    height: 50px;
    position: relative;
    background: darkred;
    margin-bottom: 1em;
    }
    </style>

    <body>
    <p align="left"><b>Demo:</b></p>
    <p align="left"><!--webbot bot="HTMLMarkup" startspan --><div id="mydiv"></div>
    <button onClick="requestdemo()">Move DIV 400px in 2 seconds</button>
    </body>
    </html>
    Last edited by mlseim; May 14th, 2021 at 01:05 PM.
    spencer likes this.


  8. #7
    Senior Member
    Join Date
    Nov 2012
    Posts
    108
    Member #
    33949
    Liked
    2 times
    Thanks Miseim, will try that. Will put it in notepad++.
    I am not using an editor in wordpress. Just use the block editor, and trying to see how and if an animation will work in a child theme, but am very confused by it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com