月: 2024年6月

vivus.js 手書き風アニメーション　まとめ

まず結果から、

なぜか、ウインドウサイズを大きくすると、発動が遅れたりと、

data-start=”240″ data-duration=”9″

（発動まで待つ時間　アニメーションの速度）

がうまく機能しないが、まあ大体でという感じならok

https://coco-factory.jp/ugokuweb/move02/9-4-2/

こちらを参照

9-4-2

これができるサンプル

これを変更してなんとかできた。

 

完成

css

//*========= 手書き風にするためのCSS ===============*/


.wrapper_tegaki{
    margin-left: 5%;
    margin-top: -5%;
    z-index: 1;
    position: relative;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    //height: 100vh;
    


/*SVGのサイズ*/
svg{
    max-width:240px;/*SVGタグの横幅*/
    width:100%;/* レスポンシブ対応にするため100%を指定*/
    height:auto;
}
}

//* マスクをするパスの設定*/
#mask .cls-1{
    fill:none;
    stroke:#FFFFFF;
    stroke-width:24;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}

html

<div class="wrapper_tegaki">

<svg id="mask"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="203.4" height="74" viewBox="0 0 203.4 74" style="enable-background:new 0 0 203.4 74;" xml:space="preserve">	
    
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<?php echo get_stylesheet_directory_uri(); ?>/img/s1984_moto.svg" width="203.4" height="74" mask="url(#clipmask)"></image>
    
<mask id="clipmask" maskUnits="objectBoundingBox">

    <path data-start="240" data-duration="9" class="cls-1" d="m32.14,35.54c-3.77-7.92-6.61-8.43-12.93-4.66S2.28,41.74,2.58,46.83c.47,7.78,5.82,4.86,14.04,7.17s22.89,5.86,11.66,9.46-23.17,11.81-24.47,8.52c0,0-4.72-4.36-2.91-6.08s5.63-2.27,7.54-2.45,18.25-11.71,18.25-11.71l11.44-17.53,2.36-2.38,1.51,4.53-4.48,21.31-1.64,6.87,4.61-11.29,1.51-3.47,3.49-8.09,2.18,7.91-2.72,12.3-.31,3.01s4.97-13.43,7.15-12.73,8.06-6.3,8.06-6.3c0,0-.88,7.85-.4,8.76s3.78,10.92,3.78,10.92l-.58-17.9,6.55-9.46,6.31-9.59,4.49,10.84s-2.7,2.54-4.49,1.87-7.57,10.94-7.57,10.94l2.08,3.67,4.62,2.26,7.53-6.47,4.57-7.56,8.68.73,3.76-4.9-3.76-4.06s-4.45,1-5.7,2.36-2.36,15.32-2.36,15.32c0,0,2.33,1.97,2.54,1.74s9.99-3.87,9.99-3.87l3.64-5,15.91-23.82,8.72-7.71-5.3,19.82-4.33,13.17-.07,5.65,20.53-18.81,3.43-11.37s-4.7,4-5.46,4.36-1.07,1.84-2.52.68-2.9-5.04-1.44-6.81,6.77-6.89,6.77-6.89c0,0,6.98-.52,7.35-1.54s3.15,3.47,3.15,3.47l-9.39,34.25,14.4-26,6.82-1.56-2.01-9.77,5.61-6.18,7.98-.55.24,7.34-7.06,10.52-9.89,10.42,1.03,9.58,10.89-5.41,6-10.13-.61-6.96,9.33-11.76v10.69l17.62-2.83,5.32-14.18-9.8-3.46-3.29,36.74"/>


</mask>  
</svg>

<!--/wrapper--></div>

js

new Vivus('mask', {//svgに指定したid名
    type: 'scenario',// アニメーションのタイプを設定
    // duration: 20,//アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
    // forceRender: false ,//パスが更新された場合に再レンダリングさせない
    animTimingFunction:Vivus.EASE_OUT,//動きの加速減速設定
});

htmlの

data-start=”240″ data-duration=”9″　が待　と速度だが安定しない

ｊｓの

type: ‘scenario’,// アニメーションのタイプを設定

が

data-start使えるやつ

vivus オプション

これの解説サイト

https://evoworx.dev/lab/svg-animation-vivus/

 

イラレでのポイント

パスを１本で書く

現物は　ｓｖｇ

マスクはペーストでいれる

参考サイト通りhttps://coco-factory.jp/ugokuweb/move02/9-4-2/

赤文字のサイズはいられで作成したときのサイズを入れ込み

筆記体アニメutm.ai

swiper 複数　top-slに利用時のメモ

 

https://webwork-plus.com/content/design/swiper-multiple.html

https://takechi-web.com/swiper-multiple/

 

私事の検証結果

結論

参考サイトのやり方で、スライドは別々の設定が可能だが、

ページネーションについては、

swiper-button-prev　を使い回せない（.sl01  .swiper-button-prev）みたいに指定しても一緒に動く

そのためswiper-button-prevを使いまわしたい（デザインがきいているから）場合

swiper-button-prev　page-prev1 とクラスをつけて、

設定でも　page-prev1　の方をナビに設定する

増やす場合

swiper-button-prev　page-prev2

設定でも　page-prev2　とナビに設定する

 

最初ミスってたのは

const youtube_swiper = new Swiper(“.youtube_swiper”, {

と２個名前を替えること。最初のconst swiper のままやってた

完成コード

<script>
const youtube_swiper = new Swiper(".youtube_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  // autoplay: {
  //   delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
  //   disableOnInteraction: false,
  //   resistanceRatio:0.1,
  // },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next1",//このクラスがあればそこがナビになる
    prevEl: ".page-prev1",//このクラスがあればそこがナビになる
    
  },
});
</script>

<script>
  
const slider_f_swiper = new Swiper(".slider_f_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  autoplay: {
    delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
    disableOnInteraction: false,
    resistanceRatio:0.1,
  },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next2",//このクラスがあればそこがナビになる
    prevEl: ".page-prev2",//このクラスがあればそこがナビになる
    
  },
});
</script>

 

 

あなたは、医療従事者・医療関係者ですか？モーダルウィンドウ 年齢認証ポップアップ

popup maker をつかってなんとか出来そう

特定のページだけにモーダルウィンドウを表示するWordPressプラグイン「Popup Maker」

seo関係上、0秒表示はクローラーをブロックする可能性もゼロでないんで　検証注意

やり方は、
ページ指定
内容はエディターで自分で書く
cssは普通にサイトのcssに

閉じるボタンをcssで消す

.pum-close.popmake-close{display: none;}

エディタにボタンを作成

<p><button class="pum-close popmake-close" type="button" aria-label="Close">はい </button>　いいえ</p>

この　はい　にて ウインドを閉じるボタンを再現　多分aria-label=”Close”が重要（閉じるボタンから引用）でなく、class=”pum-close popmake-close”が重要だった

ターゲットで投稿タイプやカテゴリー　アーカイブも選べたので

固定ページ　製品　諸々をかける