• how to integrate 3 language (HTML,javascript,CSS) proper PHP format to put in function.php file.
• I made animation in 3 formats HTML, javascript, CSS but when I have seen the function.php file in PHP language I am a little stuck because I can't able to write/integrate these 3 formats in the PHP language.
• here is 3 format code I need to integrate into php format-

(function() {
  var previousScroll = 0;

  $(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > previousScroll) {
      //down scroll code
      $("#repel").addClass("repel");
      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('repel');
      });

    } else {
      // upscroll code
      $("#repel").addClass("climb");
      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('climb');
      });
    }
    previousScroll = currentScroll;
  });
}());

body {
  height: 2000px;
 background:white;
  background-repeat: no-repeat;
  background-size: cover;
}

#repel {
  position: fixed;
  top: -850px;
  right: 0px;
}

.repel {
  -webkit-animation: repel 1s;
  animation: repel 1s;
}

.climb {
  -webkit-animation: climb 1s;
  animation: climb 1s;
}

@-webkit-keyframes climb {
  0% {
    -webkit-transform: translatey(0px);
  }

  50% {
    -webkit-transform: translatey(-55px);
  }

  100% {
    -webkit-transform: translatey(0px);
  }
}

@keyframes climb {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-25px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes repel {
  0% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(2.5deg)skewy(-5deg);
  }

  100% {
    -webkit-transform-origin: top right;
    -webkit-transform: rotate(0deg);
  }
}

@keyframes repel {
  0% {
    transform-origin: top right;
    transform: rotate(0deg);
  }

  50% {
    transform-origin: top right;
    transform: rotate(2.5deg)skewy(-5deg);
  }

  100% {
    transform-origin: top right;
    transform: rotate(0deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="repel" src="http://s3.amazonaws.com/dfc_attachments/images/3246705/Repel.png" />

• here is what I tried to implement these 3 format in PHP format but didn't work-

<?php
    //code
$string =  '<img id="repel" src="http://s3.amazonaws.com/dfc_attachments/images/3246705/Repel.png" />';

 echo $string; 


?>


<script type=\"text/javascript\">
(function() {
  var previousScroll = 0;

  $(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > previousScroll) {
      //down scroll code
      $("#repel").addClass("repel");
      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('repel');
      });

    } else {
      // upscroll code
      $("#repel").addClass("climb");
      $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
        $('#repel').removeClass('climb');
      });
    }
    previousScroll = currentScroll;
  });
}());
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

• function.php file is in the WordPress theme editor. reason to integrate 3 code format in the function.php file is that after that I able to call this animation on a specific page.
• any idea?

CodePudding user response：

You can use use nowdoc in PHP to achieve this. Try this

function somefunction(){
    return <<<'EOD'
        <style type="text/css">
            #repel {
                position: fixed;
                top: -850px;
                right: 0px;
            }

            .repel {
                -webkit-animation: repel 1s;
                animation: repel 1s;
            }

            .climb {
                -webkit-animation: climb 1s;
                animation: climb 1s;
            }

            @keyframes climb {
                0% {
                    transform: translatey(0px);
                }

                50% {
                    transform: translatey(-25px);
                }

                100% {
                    transform: translatey(0px);
                }
            }

            @keyframes repel {
                0% {
                    transform-origin: top right;
                    transform: rotate(0deg);
                }

                50% {
                    transform-origin: top right;
                    transform: rotate(2.5deg)skewy(-5deg);
                }

                100% {
                    transform-origin: top right;
                    transform: rotate(0deg);
                }
            }
        </style>
        <img id="repel" src="http://s3.amazonaws.com/dfc_attachments/images/3246705/Repel.png" />
        <script type="text/javascript">
            (function() {
                var previousScroll = 0;

                $(window).scroll(function(){
                    var currentScroll = $(this).scrollTop();
                    if(currentScroll > previousScroll){
                        //down scroll code
                        $("#repel").addClass("repel");
                        $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
                            $('#repel').removeClass('repel');
                        });
                    }else{
                        // upscroll code
                        $("#repel").addClass("climb");
                        $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
                            $('#repel').removeClass('climb');
                        });
                    }
                    previousScroll = currentScroll;
                });
            }());
        </script>
EOD;
}

Then you use it like this

<?php echo somefunction(); ?>