2021.12.4|JavaScript

画面スクロールでついてくる画像がふわふわする「JavaScript」の設定方法

画面スクロールでついてくる画像がふわふわする「JavaScript」の設定方法

ホームページを閲覧して画面を下までスクロールしたときに、JavaScriptで設定することによって、画像が下までついてきて、尚且つふわふわさせるアニメーションを実装させることができます。
要素によって色んなアニメーションを実装させることができます。
画面スクロールでついてくる画像がふわふわする「JavaScript」の設定方法を解説します。

画面スクロールでついてくる画像がふわふわする設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード

2.html、css、JavaScriptファイルを作成

html、css、JavaScriptファイルを作成します。

htmlファイルに記述
<div id="wrap">
<div id="frontPic"><a href="http://www.kingsite.jp" title="king" target="_blank"></a></div>
</div>
cssファイルに記述
#wrap{ 
	margin: 0 auto;
	min-width: 100px;
	padding: 0;
	position: relative;
	width: 100%;
	/*width: 1200px; limit*/
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

#toplayer {
	height: 100%;
	width:100%;
	left: auto;
	top: 0;
	position: fixed;
	z-index:99;
}
#pageCover {
	background: #fff;
	height: 100%;
	width:100%;
	left: 0;
	top: 0;
	/*position: fixed;*/
}
#frontPicLayer {
	height: 100%;
	width:100%;
	left: auto;
	top: 700px;
	position: absolute;
	z-index:99;
}
#frontPic {
	width:124px;
	height:119px;
	background-image: url(/sample/006/img/ani.png);
	background-position: left top;
	background-repeat: no-repeat;
	position: fixed;
	right: 25px;
	top: 30px;
	z-index: 9997;
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
#frontPic a{
	width:124px;
	height:119px;
	background-image: url(/sample/006/img/ani.png);
	background-position: left top;
	background-repeat: no-repeat;
	position: fixed;
	right: 25px;
	top: 30px;
	z-index: 9997;
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
JavaScriptファイルに記述
/* monitorBtn action*/

$(window).bind("load",function(){
    $("#wrap").animate({opacity: 1}, { duration: 1000, easing: 'swing'});
    setTimeout(function(){$("#sec1,#label,#frontPic,#frontPic4,#sec1pic1,#sec1pic2,#sec1pic3").stop().animate({opacity: 1}, { duration: 0, easing: 'swing'});},0);
});


$(function() {
	$(window).scroll(function () {
		var scrollTop = $(window).scrollTop();
		if(scrollTop > 550) {
			$("#sec2title").stop().animate({left:"160px",opacity: 1});
			setTimeout(function(){$("#sec2copy").stop().animate({left:"160px",opacity:1});},500);
		} else {
			$("#sec2title").stop().animate({left:"-400px",opacity: 0});
			setTimeout(function(){$("#sec2copy").stop().animate({left:"-300px",opacity:0});},500);
		}
	});
});

$(function () {
    
    function sec3picMove() {
    
    var
		easing = "easeInOutCubic",
		speed  = 1200;
        
        function voiceMove(pos1,pos2,pos3,pos4,pos5,pos6,pos7,pos) {
				
			$("#wrap").find('#frontPic').
				stop().
				animate({
					left: pos3
				},{
					easing   : swing,
					duration : speed,
					complete : function () {
						//nowPos = pos
					}
				});
				
			nowPos = pos;
		};
        
        
        var
		moveInterval,
        ang_d1 = 0;
        
        moveInterval = setInterval(function () {
			ang_d1++;
            
			$("#wrap").find('#frontPic').css("margin-top", Math.cos(ang_d1 / 20) * 8 + "px");
			
		}, 17);
        
    };
    sec3picMove();
    
/* end of Onload function Module */
});

3.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述
<meta charset="UTF-8">
<title>画面下までスクロールすると右下にBOXが開く「JavaScript」の設定方法|Webデザイナーブログ</title>
<meta name="description" content="jQueryを使ったスクロールでついてくる画像がふわふわするアクションのご紹介を致します。">
<meta name="keywords" content="スクロール,ふわふわ,画像,スクリプト,action.js,jQuery">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/006/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/sample/006/action.js"></script>

実装サンプル

実装サンプルを作りましたのでこちらでも確認してみてください。
スクロール画像アクション デモ

まとめ

以上で設定完了となりますが、簡単に設定ができますね。
特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。画像が色々動かせるようになるとWebサイト全体のイメージも変わってきます。