1. ホーム /
  2. webデザイン /
  3. 【Velocity.js】 NiziUのサイトみたいなおしゃれアニメーションメインビジュアルの作り方＆サンプル
webデザイン

【Velocity.js】 NiziUのサイトみたいなおしゃれアニメーションメインビジュアルの作り方＆サンプル

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
  • by うはは！
  • 0

今回はNiziUの公式サイトのような動きのあるちょっとおしゃれなメインビジュアルの見せ方をご紹介します。
プログラミングもシンプルで分かりやすいVelocity.jsの使い方とサンプルをまとめました。
webデザインにおいてアニメーションなどのエフェクトをかける際jQueryのアニメーションだと動きがカクつく、cssアニメーションだと記述がめんどくさいなどの難点があります。
それほど新しいソースではないのですがVelocity.jsはjQueryでcssアニメーションに近いレベルでスムーズに動くプラグインです。
※Velocity.js はIEサポート対象外です。

NiziUの公式サイト

Velocity.jsはjQueryなしでも動きますが今回はjQuery ありバージョンのデモになります。

以下のようなメインビジュアルで〇+▼ラインなどの図形を動かす想定です。
どの図形をどの位置に置くかざっとラフを決めます。

各図形を使う分だけ記述しておきます。

<section class="sec_mv">
	<h2 class="tith2_top">velocity.js</h2>
	<div class="line01"></div><!-- 図形ライン -->
	<div class="line02"></div>
	<div class="line03"></div>
	<div class="line04"></div>
	<div class="line05"></div>
	<div class="line06"></div>
	<div class="line07"></div>
	<div class="line08"></div>
	<div class="circle01"></div><!-- 図形〇 -->
	<div class="circle02"></div>
	<div class="circle03"></div>
	<div class="circle04"></div>
	<div class="circle05"></div>
	<div class="cross01"></div><!-- 図形+ -->
	<div class="cross02"></div>
	<div class="cross03"></div>
	<div class="cross04"></div>
	<div class="cross05"></div>
	<div class="triangle01"></div><!-- 図形▲ -->
	<div class="triangle02"></div>
	<img src="img/mv_01.jpg" alt="">
</section><!-- sec_mv -->

デザインに沿ってHTMLで設定した図形をcssで装飾します。

.sec_mv {
    margin: 0;
    position: relative;
    text-align: right;
    height: 100vh;
	overflow: hidden;
}
.sec_mv img {
    height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	max-width: inherit;
}
.line01{
	width: 300px;
	height: 1px;
	background: #aa9dcb;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	top: 30%;
	left: 30%;
}
.line02{
	width: 30px;
	height: 2px;
	background: #f29faa;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	top: 20%;
	left: 25%;
}
.line03{
	width: 300px;
	height: 2px;
	background: #f29faa;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	bottom: calc(30% + 10px);
	left: 5%;
}
.line03{
	width: 30px;
	height: 2px;
	background: #aa9dcb;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	bottom: -5%;
	left: 25%;
}
.line04{
	width: 300px;
	height: 1px;
	background: #aa9dcb;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	bottom: calc(30% - 50px);
	left: 35%;
}
.line05{
	width: 30px;
	height:10px;
	background: #f29faa;
	transform: rotate(-35deg);
	transform-origin:0 0;
	position: absolute;
	bottom: calc(10% - 10px);
	left: 25%;
}

.line06{
	width: 300px;
	height:1px;
	background: #aa9dcb;
	transform: rotate(-35deg);
	transform-origin:bottom right 30px;
	position: absolute;
	top: calc(10% - 10px);
	right: 5%;
}

.line07{
	width: 30px;
	height:2px;
	background: #aa9dcb;
	transform: rotate(-35deg);
	transform-origin:bottom right 10px;
	position: absolute;
	bottom: calc(20% - 10px);
	right: 5%;
}
.line08{
	width: 300px;
	height:10px;
	background: #f29faa;
	transform: rotate(-35deg);
	transform-origin:bottom right 60px;
	position: absolute;
	bottom:45%;
	right: -8%;
}


.circle01{
	width: 20px;
	height: 20px;
	border: 2px solid #f29faa;
	border-radius: 50%;
	position: absolute;
	top:10%;
	left: 15%;
	opacity: 0%;
}
.circle02{
	width: 20px;
	height: 20px;
	border: 2px solid #aa9dcb;
	border-radius: 50%;
	position: absolute;
	top: 65%;
	left: 20%;
	opacity: 0%;
}
.circle03{
	width: 20px;
	height: 20px;
	border: 2px solid #f29faa;
	border-radius: 50%;
	position: absolute;
	bottom: 10%;
	left: 30%;
	transform-origin:0 0;
	opacity: 0%;
}
.circle04{
	width: 20px;
	height: 20px;
	border: 2px solid #aa9dcb;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	right: 10%;
	opacity: 0%;
}
.circle05{
	width: 20px;
	height: 20px;
	border: 2px solid #f29faa;
	border-radius: 50%;
	position: absolute;
	bottom: 10%;
	right: 35%;
	opacity: 0%;
}
.cross01{
	width: 30px;
	height: 30px;
	border-left: 2px solid #f29faa;
	position: absolute;
	top: 30%;
	left: 3%;
	opacity: 0%;
}
.cross01:after{
	content: "";
	width: 30px;
	height: 30px;
	border-bottom: 2px solid #f29faa;
	position: absolute;
    bottom: 14px;
    left: -16px;
}
.cross02{
	width: 20px;
	height: 20px;
	border-left: 2px solid #f29faa;
	position: absolute;
	top: 70%;
	left: 10%;
	opacity: 0%;
}
.cross02:after{
	content: "";
	width: 20px;
	height: 20px;
	border-bottom: 2px solid #f29faa;
	position: absolute;
    bottom: 10px;
    left: -10px;
}
.cross03{
	width: 20px;
	height: 20px;
	border-left: 2px solid #f29faa;
	position: absolute;
	top: 20%;
	right: 8%;
	opacity: 0%;
}
.cross03:after{
	content: "";
	width: 20px;
	height: 20px;
	border-bottom: 2px solid #f29faa;
	position: absolute;
    bottom: 10px;
    left: -10px;
}
.cross04{
	width: 30px;
	height: 30px;
	border-left: 2px solid #f29faa;
	position: absolute;
	top: 50%;
	right: 3%;
	opacity: 0%;
}
.cross04:after{
	content: "";
	width: 30px;
	height: 30px;
	border-bottom: 2px solid #f29faa;
	position: absolute;
    bottom: 14px;
    left: -16px;
}

.triangle01{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #f29faa;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: rotate(74deg);
	opacity: 0%;
}
.triangle02{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #aa9dcb;
	position: absolute;
	bottom: 20%;
	right: 30%;
	transform: rotate(74deg);
	opacity: 0%;
}




今回はjQueryも使用する書き方なのでvelocity.jsと一緒にjqueryも読み込みます。

<script src="js/jquery-3.5.1.min.js"></script>
<!-- velocity.js -->
<script src="js/velocity.js"></script>

以下のように各図形に動きを設定します。

  • 図形ライン…widthで設定した幅分伸び縮みする
  • その他の図形…透明度を変更しながら20px上下に動く 
<script>
$(document).ready(function() {
//図形ライン…widthで設定した幅分伸び縮みする
$('.line01').velocity(
    {
        width: '20%'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.line02').velocity(
    {
        width: '30%'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 500
    }
);
$('.line03').velocity(
    {
        width: '30%'
    }, {
        duration: 3000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.line04').velocity(
    {
        width: '10%'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 300
    }
);
$('.line05').velocity(
    {
        width: '30%'
    }, {
        duration: 3000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.line06').velocity(
    {
        width: '10%'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 500
    }
);
$('.line07').velocity(
    {
        width: '60%'
    }, {
        duration: 3000,
        easing: 'ease-in-out',
        loop: true,
        delay: 500
    }
);
$('.line08').velocity(
    {
        width: '30%'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 500
    }
);
//図形〇…透明度を変更しながら20px上下に動く
$('.circle01').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.circle02').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 2000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.circle03').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.circle04').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 1000,
        easing: 'ease-in-out',
        loop: true,
        delay: 500
    }
);
$('.circle05').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5500,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
//図形+…透明度を変更しながら20px上下に動く
$('.cross01').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 2000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.cross02').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
$('.cross03').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 1000,
        easing: 'ease-in-out',
        loop: true,
        delay: 300
    }
);
$('.cross04').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);
//図形▲…透明度を変更しながら20px上下に動く
$('.triangle01').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 3000,
        easing: 'ease-in-out',
        loop: true, 
        delay: 0
    }
);
$('.triangle02').velocity(
    {
        opacity:'100%',
		top:'+=20px'
    }, {
        duration: 5000,
        easing: 'ease-in-out',
        loop: true,
        delay: 0
    }
);

});//jQuery

</script>

サンプル

使ってみた感想としては設定が単純・明解でjQueryアニメーションよりは早く、カクつきがない印象でしたcssアニメーションとの差もあまり感じされませんでした。

uhaha

あやなんさんの臨月Make you happy踊ってみたおしゃれだったな♡

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*