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

コーディング
HTML
各図形を使う分だけ記述しておきます。
<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 -->
css
デザインに沿って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%;
}
Velocity.js設定の仕方
今回は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アニメーションとの差もあまり感じされませんでした。

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