JQueryでオープニングアニメーションつけたいです。

解決済

質問者：ぷろし
質問日時：2021/01/15 16:05
回答数：1件

下記サイトのように背景がスライドして、ページが表示できるJQueryはございますでしょうか。
willof-work.co.jp

初心者です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/01/16 13:38

こんにちは

ご提示のサイトにはアニメーションがいろいろあるようですが、「オープニング」とのご質問なので、最初の画面と同サイズのパネルが右方向へスライドするもののことだと解釈しました。

＞JQueryはございますでしょうか。
ご提示のサイトの仕組みは調べていませんが、単純に要素を右へスライドさせれば実現可能なので、それを組み合わせただけのものを一般化したようなものはあまりないのではないでしょうか？
jQueryのanimateメソッドが、ほとんどそのままと言ってもいいので、animateを連続させれば良いことになってしまいますので…

出来合いのものが欲しければ、ご提示のサイトがそのままのサンプルといえるので、必要部分を借用してカスタマイズするか、面倒なら、自作してしまう方が速いのではないかと思います。

試みに、見た目が似たようなものを作成してみました。
（具体的な方法等は、ご提示のサイトと異なっているかもしれませんが）
ロゴ画像の部分は、ここのサイトのロゴを借用しています。
汎用化してはありません（というか、何が汎用なのかわからない）ので、ご参考までに。

※ このサイトではURLがリンク形式に変換されてしまいますのでご留意下さい。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
.opening, .opening div {
position: fixed; top: 0; left: 0;
z-index: 99;
width: 100vw; height: 100vh;
background-color: #8AB;
}
.opening div { position: absolute; }
.opening img {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
width: 326px; height: 84px;
}

body { background-color: whitesmoke; }
</style>
</head>
<body>

<div>本文　本文　本文</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script>
{
// ****** セットアップ
const
speed = 1200, pause = 500,
logo = 'https://oshiete.xgoo.jp/images/v2/pc/common/logo …

$('body').append('<div class="opening"><img /><div></div></div>');
const opn = $('.opening'), div = $('div', opn);
$('img', opn).attr('src', logo);

// ****** アニメーション
$(window).on('load', e =>{
div.animate({ left: '100vw' }, speed, () =>{
div.css({ left: '-100vw', backgroundColor: '#FFF' })
.delay(pause).animate({ left: 0 }, speed, () =>{
opn.delay(pause).animate({ left: '100vw' }, speed, () =>{
opn.remove();
});
});
});
});
}
</script>
</body>
</html>