Custom Dragging w/ Parallax effect

Developer
Adam Grayson
Size
3,577 Kb
Views
10,120
  1. Custom Dragging w/ Parallax effect Previews
  2. Custom Dragging w/ Parallax effect HTML Codes
  3. Custom Dragging w/ Parallax effect CSS Codes
  4. Custom Dragging w/ Parallax effect JS Codes

How do I make an custom dragging w/ parallax effect?

What is a custom dragging w/ parallax effect? How do you make a custom dragging w/ parallax effect? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Custom Dragging w/ Parallax effect Previews
IQ Test

Custom Dragging w/ Parallax effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Dragging w/ Parallax effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layer layer1"> <p>Drag Me</p>
</div>
<div class="layer layer2"></div>
<div class="layer layer3"></div>
<div class="layer layer4"></div>
<div class="layer layer5"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Dragging w/ Parallax effect - Script Codes CSS Codes

html, body { background: #FCFFF5;
}
.layer { top: 50%; left: 50%; border-radius: 50%; position: absolute; box-shadow: 0 6px 5px rgba(0, 0, 0, 0.4);
}
.layer1 { z-index: 4; cursor: move; width: 100px; height: 100px; background: #FFFFFF; margin: -50px 0 0 -50px;
}
.layer1 p { color: #000; text-align: center; -webkit-user-select: none; font: 14px/100px "TrebuchetMS", trebuchet, sans-serif;
}
.layer2 { z-index: 3; width: 150px; height: 150px; background: #193441; margin: -75px 0 0 -75px;
}
.layer3 { z-index: 2; width: 200px; height: 200px; background: #3E606F; margin: -100px 0 0 -100px;
}
.layer4 { z-index: 1; width: 250px; height: 250px; background: #91AA9D; margin: -125px 0 0 -125px;
}
.layer5 { z-index: 0; width: 300px; height: 300px; background: #D1DBBD; margin: -150px 0 0 -150px;
}

Custom Dragging w/ Parallax effect - Script Codes JS Codes

(function() { var currX, currY, dragging, layer1, layer2, layer3, layer4, layer5, moveBack, moveEl, startX, startY; dragging = false; layer1 = '.layer1'; layer2 = '.layer2'; layer3 = '.layer3'; layer4 = '.layer4'; layer5 = '.layer5'; startX = null; startY = null; currX = 0; currY = 0; moveEl = function(el, newX, newY) { el.css({ x: newX, y: newY }); }; moveBack = function(el) { el.stop().transition({ x: 0, y: 0 }); }; $(document).on('mousedown', layer1, function(e) { startX = e.pageX; startY = e.pageY; currX = parseInt($(layer1).css('x')); currY = parseInt($(layer1).css('y')); dragging = true; }); $(document).on('mousemove', layer1, function(e) { var diffX, diffY, mouseX, mouseY; if (!dragging) { return; } mouseX = e.pageX; mouseY = e.pageY; diffX = currX + (mouseX - startX); diffY = currY + (mouseY - startY); moveEl($(layer1), diffX, diffY); moveEl($(layer2), diffX * .8, diffY * .8); moveEl($(layer3), diffX * .6, diffY * .6); moveEl($(layer4), diffX * .4, diffY * .4); moveEl($(layer5), diffX * .2, diffY * .2); }); $(document).on('mouseup mouseleave mousecancel', layer1, function() { dragging = false; moveBack($(layer1)); moveBack($(layer2)); moveBack($(layer3)); moveBack($(layer4)); moveBack($(layer5)); });
}).call(this);
Custom Dragging w/ Parallax effect - Script Codes
Custom Dragging w/ Parallax effect - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 4.5
Size 3,577 Kb
Views 10,120
Do you need developer help for Custom Dragging w/ Parallax effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Grayson (agrayson) Script Codes
Name
Dynamic circle menus with SASS
HTML5 GeoLocation Example
RPG Cooldown
Drag and Drop File Preview
Circle Progression Plugin
Random Weapon Generator
CCS3 Navigation Hover Effect
Responsive Carousel
Centered background Image with hot spots
Spinning Circles
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!