经验分享程序开发文档资料数据资源其它资源

jQuery鼠标互动多背景层视觉差特效js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标互动多背景层视觉差特效js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery鼠标互动多背景层视觉差特效js代码

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标互动多背景层视觉差特效</title>
<link rel="stylesheet" href="dist/jquery.nGyroParallax.css">
<style>
body {
  overflow-x: hidden;
  margin: 0;
  color: #fff;
  background: url(img/fes_main_bg.png) repeat 50% 50%;
  transition: background-position .5s ease-out;
}

h1 {
  text-align: center;
  font-family: 'Rock Salt', cursive;
  text-shadow: 2px 2px 2px #000;
}

.nGyroParallax1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .5s ease-out;
}


#chouchin-1-1 {
  margin: -160px 0 0 -460px;
}
#chouchin-1-2 {
  margin: -110px 0 0 280px;
}
#chouchin-1-1 img,
#chouchin-1-2 img {
  transform: translate3d(0,0,0);
  transition: .5s;
}


#ink1-1 {
  margin: -186px 0 0 -400px;
}
#ink1-2 {
  margin: -206px 0 0 -40px;
}


#aori {
  margin: -241px 0 0 -270px;
}
#hotaru {
  margin: -237px 0 0 40px;
}
#aori img,
#hotaru img {
  transform: translate3d(0,0,0);
  -webkit-filter: drop-shadow(4px 0 3px black);
  -ms-filter: drop-shadow(4px 0 3px black);
  filter: drop-shadow(4px 0 3px black);
  transition: .5s;
}


#console {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 32px;
  background: rgba(0,0,0,.6);
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="htmleaf-container">
	<h1>n Gyro Parallax</h1>
	<div id="ink1-1" class="nGyroParallax1">
	  <img src="img/fes_ink1-1.png" alt="" width="445" height="373">
	</div>
	<div id="ink1-2" class="nGyroParallax1">
	  <img src="img/fes_ink1-2.png" alt="" width="379" height="412">
	</div>

	<div id="chouchin-1-1" class="nGyroParallax1">
	  <img src="img/fes_chouchin.png" alt="" width="151" height="267">
	</div>
	<div id="chouchin-1-2" class="nGyroParallax1">
	  <img src="img/fes_chouchin.png" alt="" width="151" height="267">
	</div>

	<div id="aori" class="nGyroParallax1">
	  <img src="img/sc_aori.png" alt="" width="260" height="482">
	</div>
	<div id="hotaru" class="nGyroParallax1">
	  <img src="img/sc_hotaru.png" alt="" width="202" height="474">
	</div>

	<div id="console"></div>

</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="dist/jquery.nGyroParallax.min.sourcemap.js"></script>
<script>
$(function(){
  
  $(window).load(function(){
	$('#chouchin-1-1').nGyroParallax({
	  magnification: .004
	});
	$('#chouchin-1-2').nGyroParallax({
	  magnification: .004
	});
	$('#aori').nGyroParallax();
	$('#hotaru').nGyroParallax();
  });
  
});
</script>
</body>
</html>

JS代码(jquery.easing.min.js):

/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
jQuery.easing.jswing=jQuery.easing.swing;
	jQuery.extend(jQuery.easing,{
	def:"easeOutQuad",swing:function(e,f,a,h,g){
	return jQuery.easing[jQuery.easing.def](e,f,a,h,g)}
,easeInQuad:function(e,f,a,h,g){
	return h*(f/=g)*f+a}
,easeOutQuad:function(e,f,a,h,g){
	return -h*(f/=g)*(f-2)+a}
,easeInOutQuad:function(e,f,a,h,g){
	if((f/=g/2)<1){
	return h/2*f*f+a}
return -h/2*((--f)*(f-2)-1)+a}
,easeInCubic:function(e,f,a,h,g){
	return h*(f/=g)*f*f+a}
,easeOutCubic:function(e,f,a,h,g){
	return h*((f=f/g-1)*f*f+1)+a}
,easeInOutCubic:function(e,f,a,h,g){
	if((f/=g/2)<1){
	return h/2*f*f*f+a}
return h/2*((f-=2)*f*f+2)+a}
,easeInQuart:function(e,f,a,h,g){
	return h*(f/=g)*f*f*f+a}
,easeOutQuart:function(e,f,a,h,g){
	return -h*((f=f/g-1)*f*f*f-1)+a}
,easeInOutQuart:function(e,f,a,h,g){
	if((f/=g/2)<1){
	return h/2*f*f*f*f+a}
return -h/2*((f-=2)*f*f*f-2)+a}
,easeInQuint:function(e,f,a,h,g){
	return h*(f/=g)*f*f*f*f+a}
,easeOutQuint:function(e,f,a,h,g){
	return h*((f=f/g-1)*f*f*f*f+1)+a}
,easeInOutQuint:function(e,f,a,h,g){
	if((f/=g/2)<1){
	return h/2*f*f*f*f*f+a}
return h/2*((f-=2)*f*f*f*f+2)+a}
,easeInSine:function(e,f,a,h,g){
	return -h*Math.cos(f/g*(Math.PI/2))+h+a}
,easeOutSine:function(e,f,a,h,g){
	return h*Math.sin(f/g*(Math.PI/2))+a}
,easeInOutSine:function(e,f,a,h,g){
	return -h/2*(Math.cos(Math.PI*f/g)-1)+a}
,easeInExpo:function(e,f,a,h,g){
	return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a}
,easeOutExpo:function(e,f,a,h,g){
	return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a}
,easeInOutExpo:function(e,f,a,h,g){
	if(f==0){
	return a}
if(f==g){
	return a+h}
if((f/=g/2)<1){
	return h/2*Math.pow(2,10*(f-1))+a}
return h/2*(-Math.pow(2,-10*--f)+2)+a}
,easeInCirc:function(e,f,a,h,g){
	return -h*(Math.sqrt(1-(f/=g)*f)-1)+a}
,easeOutCirc:function(e,f,a,h,g){
	return h*Math.sqrt(1-(f=f/g-1)*f)+a}
,easeInOutCirc:function(e,f,a,h,g){
	if((f/=g/2)<1){
	return -h/2*(Math.sqrt(1-f*f)-1)+a}
return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a}
,easeInElastic:function(f,h,e,l,k){
	var i=1.70158;
	var j=0;
	var g=l;
	if(h==0){
	return e}
if((h/=k)==1){
	return e+l}
if(!j){
	j=k*0.3}
if(g<Math.abs(l)){
	g=l;
	var i=j/4}
else{
	var i=j/(2*Math.PI)*Math.asin(l/g)}
return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
,easeOutElastic:function(f,h,e,l,k){
	var i=1.70158;
	var j=0;
	var g=l;
	if(h==0){
	return e}
if((h/=k)==1){
	return e+l}
if(!j){
	j=k*0.3}
if(g<Math.abs(l)){
	g=l;
	var i=j/4}
else{
	var i=j/(2*Math.PI)*Math.asin(l/g)}
return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e}
,easeInOutElastic:function(f,h,e,l,k){
	var i=1.70158;
	var j=0;
	var g=l;
	if(h==0){
	return e}
if((h/=k/2)==2){
	return e+l}
if(!j){
	j=k*(0.3*1.5)}
if(g<Math.abs(l)){
	g=l;
	var i=j/4}
else{
	var i=j/(2*Math.PI)*Math.asin(l/g)}
if(h<1){
	return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e}
,easeInBack:function(e,f,a,i,h,g){
	if(g==undefined){
	g=1.70158}
return i*(f/=h)*f*((g+1)*f-g)+a}
,easeOutBack:function(e,f,a,i,h,g){
	if(g==undefined){
	g=1.70158}
return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a}
,easeInOutBack:function(e,f,a,i,h,g){
	if(g==undefined){
	g=1.70158}
if((f/=h/2)<1){
	return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}
return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a}
,easeInBounce:function(e,f,a,h,g){
	return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a}
,easeOutBounce:function(e,f,a,h,g){
	if((f/=g)<(1/2.75)){
	return h*(7.5625*f*f)+a}
else{
	if(f<(2/2.75)){
	return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}
else{
	if(f<(2.5/2.75)){
	return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}
else{
	return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}
}
}
}
,easeInOutBounce:function(e,f,a,h,g){
	if(f<g/2){
	return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}
return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}
}
);

JS代码(jquery.nGyroParallax.min.js):

/*! jquery.nGyroParallax.js Version:0.1.0 Author:Nunifuchisaka(nunifuchisaka@gmail.com) Website:http://nunifuchisaka.com/w/n-gyro-parallax/demo Repository:https://github.com/Nunifuchisaka/nGyroParallax*/
!function(i,o,t,e){
	"use strict";
	function n(t){
	this.opts=i.extend({
	background:!1,magnification:.02,duration:500,easing:"easeOutExpo"}
,t),this.$el=i(t.el),this.$window=i(o),this.$body=i("body"),this.$console=i("#console"),this.center={
	x:Math.floor(this.$window.width()/2),y:Math.floor(this.$window.height()/2)}
,s.Mobile?(this.$console.css("display","block"),o.addEventListener("deviceorientation",i.proxy(this.orientationchange,this))):this.$window.on("mousemove.nGyroParallax",i.proxy(this.mousemove,this))}
var s=function(i){
	return{
	Tablet:-1!=i.indexOf("windows")&&-1!=i.indexOf("touch")&&-1==i.indexOf("tablet pc")||-1!=i.indexOf("ipad")||-1!=i.indexOf("android")&&-1==i.indexOf("mobile")||-1!=i.indexOf("firefox")&&-1!=i.indexOf("tablet")||-1!=i.indexOf("kindle")||-1!=i.indexOf("silk")||-1!=i.indexOf("playbook"),Mobile:-1!=i.indexOf("windows")&&-1!=i.indexOf("phone")||-1!=i.indexOf("iphone")||-1!=i.indexOf("ipod")||-1!=i.indexOf("android")&&-1!=i.indexOf("mobile")||-1!=i.indexOf("firefox")&&-1!=i.indexOf("mobile")||-1!=i.indexOf("blackberry"),Android:-1!=i.indexOf("android")}
}
(o.navigator.userAgent.toLowerCase());
	i.fn.nGyroParallax=function(o){
	return this.each(function(t,e){
	o=i.extend({
	i:t,el:e}
,o),new n(o)}
)}
,n.prototype.orientationchange=function(i){
	var o=(i.alpha,i.beta),t=i.gamma,e=14,n=50+Math.floor((o-55)*(this.opts.magnification*e)),s=50+Math.floor(t*(this.opts.magnification*e));
	this.$console.html("β(x-axis)="+o+"<br>γ(y-axis)="+t),this.render({
	top:n,left:s}
)}
,n.prototype.mousemove=function(i){
	var o={
	x:i.pageX,y:i.pageY}
,t=50+Math.floor((this.center.y-o.y)*this.opts.magnification),e=50+Math.floor((this.center.x-o.x)*this.opts.magnification);
	this.render({
	top:t,left:e}
)}
,n.prototype.render=function(i){
	this.opts.background?this.$el.css({
	"background-position":i.top+"% "+i.left+"%"}
):this.$el.css({
	top:i.top+"%",left:i.left+"%"}
)}
}
(jQuery,this,this.document);
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
157.45 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
157.45 KB
立即下载
卞滢
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章