月: 2024年5月
手書き風 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を遅らせることで実行できた。
そのまま表示させると、アニメーションの発動が早くて、見せ場がみにくかった
アニメーション探り中のまとめ
margin-inline: auto;
https://zenn.dev/tonkotsuboy_com/articles/margin-inline_auto
width: fit-content
transition: 1.5s cubic-bezier(0.15, 1.13, 0.25, 1); cubic-bezier
説明
https://qiita.com/96usa_koi/items/6f313f1d664806a77313
目安便利
https://easings.net/#
ジェネレーター
https://cubic-bezier.com/#.13,.68,.86,.32
border-radius: 100vh; border-radius: 9999px;
https://jajaaan.co.jp/web-production/frontend/border-radius/
デザイン参考 web
https://jajaaan.co.jp/service/web/ 斜めデザイン
https://casitaflor.com/recruit/ 1.ブラシ 動く 2.ホバー白黒 3.英語が右から左
https://dynamo-inc.jp/ TOPのみかっこいい 動画、スクロール背景
昭和
https://showa-ds.co.jp/ 1.svg 文字 色がつく 書いてるよう 2.スクロールで現れる人 ２重で現れるアニメーションで 動画のよう
タイトル と同じカラーでビヨン
https://shimizu-jidousya.com/
こんなコラムで結構 順位入ってる 小牧 春日井 守山 板金
https://shimizu-jidousya.com/column/
手書き風 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」の使い方
アニメーションメモ
<div class="flex2box effect-fade inview left_mask_in">
inview left_mask_in
をつける
inviewは画面に入ったら .onがつく すると表示される 透明度でopti
left_mask_inはアニメーション用のクラスで、今回の場合はボックス用のhiddenであり親
親にアフターでボックスを背景と同じ色につけて
左から右に動かすアニメーション
//スクロールで見えたら.onがつく
.inview {
//transition-delay: .4s;
transition: all 1.5s;
position: relative;
opacity: 0;
}
.inview.on {
opacity: 1;
}
//左から背景ベタがイン
.left_mask_in{
overflow: hidden;
position: relative;
//設定ベタ
&.inview::after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
//background-color: #000;
background-color:#e7f4ff;
transform: translateX(0%);
transition: transform ease 1s;
}
//見えたら
&.inview.on::after{
transform: translateX(100%);
}
}
//なんでも使えるように .inview が画面に入ったら onがつく .inview.on
$('.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('effect-scroll');
}
// スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
// タブレット向けの記述
if (scroll > elemPos - windowHeight + 200){
$(this).addClass('effect-scroll');
}
} else {
// PC向けの記述
if (scroll > elemPos - windowHeight + 200){
$(this).addClass('on');
}
}
} );
//
フッターの
window.onload = function() {
scroll_effect();
$(window).scroll(function(){
scroll_effect();
});
function scroll_effect(){
ここに追記
}
};
</script>
Crop-Thumbnails Post Thumbnail Editorの代替え
Crop-Thumbnails Post