0%

Hey! Do you have any query related to front end?

Sign in Sign up

Smooth parallaxt effect on mouse moveBack

HTML:

It is nessesory to initialize data-depth="__" between 0 to 1, this determines how far is our object. According to this movement of object calculates itself. Far the object slow will be the movement, nearer the object fast will be the movement.

CSS:

.parallexWrapper{width:500px; border:solid 1px #333; margin:0 auto; position:relative; height:400px; background:#e9f4d4; overflow:hidden;}
img{display:block; margin:0 auto; position:absolute;}
.parallexWrapper div{ position:absolute; width:1000px; height:100%;left:0; transform:translateX(-250px); top:0;}
.first{z-index:10;}
.first img{bottom:0;}
.second{z-index:9;}
.second img{bottom:16px;}
.third{ z-index:8;}
.third img{bottom:109px;}
.fourth {z-index:7;}
.fourth img{bottom:160px;}
.fifth{z-index:6; left:50%; margin-left:-31%;}
.fifth img{ bottom:139px;}
.sixth{z-index:5; left:50%; margin-left:-31%;}
.sixth img{ left:50%; margin-left:-37px; bottom:169px;}
.seventh{z-index:4; width:500px; left:50%; margin-left:-40%;}
.seventh img{left:50%; margin-left:-172px; bottom:157px;}
.eighth{z-index:3;}
.eighth img {top: 26px; right: 20px;}
.ninth{z-index:2;}
.ninth img{left:50%; margin-left:-384px; top:14px;}
.tenth{z-index:1;}
.tenth img{top:25px;}

Every slide should have position="absolute" and z-index has to initialize according to depth.

Javascript:

var parallexWrapper = document.getElementsByClassName("parallexWrapper")[0],
slide = document.querySelectorAll(".parallexWrapper div");
slideNum = slide.length,
parallexWidth = parallexWrapper.offsetWidth,
parallexLeft = parallexWrapper.offsetLeft;
	
parallexWrapper.addEventListener('mousemove', onMouseMove, false);

var slidesObj = {};
function Parallex(obj){
	this.obj = obj;
	this.depth = this.obj.dataset.depth;
	this.cx = 0;
	this.tx = 0;
}
Parallex.prototype.moveSlide = function(e){
	this.tx = (Math.round(e.clientX - parallexLeft) * this.depth);
}
Parallex.prototype.update = function(){
	this.cx += ( this.tx - this.cx ) * 0.05;
	this.obj.style.transform = "translate(-"+this.cx+"px)";
	window.requestAnimationFrame( this.update.bind(this) );	
}
		
for(var i=0; i < slideNum; i++){
	var elem = slide[i];
	slidesObj[i] = new Parallex(elem);
}

function onMouseMove( event ) {
	for(var i=0; i < slideNum; i++){
		slidesObj[i].moveSlide(event);
	}
};
		
for(var i=0; i < slideNum; i++){
	slidesObj[i].update();
}

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Get index of an element

    Get index of an element

    • 228
    • 2
    • 228
    • facebook icon
    • twitter icon
    • google plus
  • Hanging menu on window scroll

    After scrolling window beyond menu height, a floating bar appears at the top having same menu inside it.

    • 333
    • 12
    • 333
    • facebook icon
    • twitter icon
    • google plus
  • Pure css3 accordion

    A pure css3 accordion which has been created by target pseudo selector.

    • 365
    • 18
    • 365
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password