手書き風　svg　Vivus Instant利用

 

手書き風　svg　マスク

https://coco-factory.jp/ugokuweb/move01/4-1-6/

Vivus.js

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

Vivus Instant」の使い方

 

実際fullのロゴをやってみた

<div class="svg_logo_white animate__animated animate__fadeIn" style="animation-delay:1.3s">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_white.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

<div class="svg_logo_anime"><?php //動くsvg インラインsvg
                include(get_stylesheet_directory() . "/img/top_svg/include_svg_full_logo.php"); ?></div>

<div class="svg_logo_color  animate__animated animate__fadeIn" style="animation-delay:1.3s">

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_color.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

３つ用意して、ふわっと最後完成させる

///////svg rogo

/////inview  アニメーション
.inview{display: none;}
.inview.on{display: block;
}

.svg_logo_wrap{
    position: relative;
    margin-inline: auto;
    width: 100%;
    height: 56px;
    .transition;


   //padding-top: 200px;

   @media screen and (max-width: 736px){
    //padding-top: 100px;
    height: 33px;
}//@media screen 736px

 
   @top_svg_logo_size:500px;
   @top_svg_logo_size_mob:260px;

   .svg_logo_color img,
   .svg_logo_white img,
   .svg_logo_anime svg{
       width:@top_svg_logo_size;

       @media screen and (max-width: 736px){
        margin-left: -20px;

       }//@media screen 736px

       .transition;
       
   }

    .svg_logo_color{
        position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        //margin-top: -2.5px; margin-left: -2.5px;

        img{
            //width: @top_svg_logo_size;
            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }

    .svg_logo_anime{position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    line-height: 0;

        svg{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
            
        }
        
    }

    .svg_logo_white{
        position: absolute;

       
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        img{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }


}

                         //なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
$('.inview').delay(300).queue(function(){
  //$('.inview').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight + 30){
     $(this).addClass('on');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

window.addEventListener('load', function(){
  scroll_effect();

内に追加

Vivus Instantで作成したアニメーションSVGは、

それを囲ったdiv ,svgにstyle=”animation-delay:1.3s”を書いても反映されないため、それ自体の発動を遅らせるには、

inview を使って、onさせて、onを遅らせることで実行できた。

そのまま表示させると、アニメーションの発動が早くて、見せ場がみにくかった