手書き風 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を遅らせることで実行できた。
そのまま表示させると、アニメーションの発動が早くて、見せ場がみにくかった