Page Peel

Developer
Boyd Massie
Size
2,153 Kb
Views
24,288
  1. Page Peel Previews
  2. Page Peel HTML Codes
  3. Page Peel CSS Codes
  4. Page Peel JS Codes

How do I make an page peel?

Easy page peel function (on hover).. What is a page peel? How do you make a page peel? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

Page Peel Previews
IQ Test

Page Peel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Peel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<div id="pageflip">	<a href=""><img src="http://www.ravelrumba.com/code/demos/jquery-peelback/assets/peel-image.png" alt="" border="0" /></a> <div class="msg_block"> <div class="inner-message">Inner message goes here...</div> </div>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

Page Peel - Script Codes CSS Codes

body { color: #555; font-size: 10px; padding: 0;	margin: 0;	font-size: 11px;	font-family: verdana, Arial, Helvetica, sans-serif; letter-spacing: 0; line-height: 1.6em; word-spacing: normal; background-color:#e4e4e4;
}
* { margin: 0; padding: 0;
}
.hide { display: none;
}
#pageflip { position: relative; right: 0; top: 0; float: right;
}
#pageflip img { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block { width: 50px; height: 50px; overflow: hidden;	position: absolute;	right: 0; top: 0; background: #e4e4e4;
}
#pageflip .msg_block .inner-message { position:absolute; top:45px; right:30px;
}

Page Peel - Script Codes JS Codes

$(document).ready(function(){
$("#pageflip").hover(function() {	$("#pageflip img, .msg_block").stop()	.animate({	width: '510px',	height: '510px'	}, 500);	} , function() {	$("#pageflip img").stop()	.animate({	width: '50px',	height: '52px'	}, 220);	$(".msg_block").stop()	.animate({	width: '50px',	height: '50px'	}, 200);	});
});
Page Peel - Script Codes
Page Peel - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 2,153 Kb
Views 24,288
Do you need developer help for Page Peel?

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!

Boyd Massie (massiebn) Script Codes
Name
QuickFlip
Responsive Dropdown Menu
Desaturate an image with CSS
Image Hover
Inline Frame PDF
JQuery Quiz
Fancy Image Showcase With Timer Bar
Responsive Table
Drag and Drop Images
Countdown Timer
Create amazing love letters 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!