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

2021.12.4｜JavaScript（jQuery）

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

本記事の内容

画面スクロールでついてくる画像がふわふわする設定方法
1.jQueryライブラリをダウンロード
2.html、css、JavaScriptファイルを作成
3.htmlファイル内に記述
実装サンプル
まとめ

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

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>