Improved Page Flipping Effect

Developer
Tamik Soziev
Size
5,201 Kb
Views
12,144
  1. Improved Page Flipping Effect Previews
  2. Improved Page Flipping Effect HTML Codes
  3. Improved Page Flipping Effect CSS Codes
  4. Improved Page Flipping Effect JS Codes

How do I make an improved page flipping effect?

Hey i saw Page Fan pen of McCray and really liked the idea, however i did not like that it was static :) so i improved it a bit with javascript. What is a improved page flipping effect? How do you make a improved page flipping effect? This script and codes were developed by Tamik Soziev on 29 September 2022, Thursday.

Improved Page Flipping Effect Previews
IQ Test

Improved Page Flipping Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Improved Page Flipping Effect</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #474747; box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Sans-Serif; font-weight: 300; padding-left: 40%; padding-top: 40px;
}
.page-w { padding: 20px; position: relative;
}
.page { display: block; float: left; margin-left: -190px; background: white; height: 350px; box-shadow: 0px 4px 10px #000; border: 2px solid #f3f3f3; padding: 5px; transform: translate(0px, 0px) translateZ(0); transition: all 0.1s; background-image: linear-gradient(-90deg, #ddd 40%, #ccc 90%); cursor: pointer; position: relative;
}
.page.page1 { transform: translate(-6px, -3px) rotate(-15.2deg);
}
.page.page2 { transform: translate(-6px, -3px) rotate(-10.2deg);
}
.page.page3 { transform: translate(-6px, -3px) rotate(-7.2deg);
}
.page.page4 { transform: translate(-6px, -3px) rotate(-2.2deg);
}
.page:not(.active):hover { transform: translate(-6px, -30px) rotate(-4.2deg); background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
}
.page.active { border: 2px solid #FFF; background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
}
.page h2 { font-size: 18px; border-bottom: 1px solid #eee; padding-bottom: 5px; margin: 0px 0px 10px;
}
.page .title { float: left; color: silver; font-weight: bold; margin-left: 4px;
}
.page .content { float: left; width: 190px; padding: 10px 15px; font-size: 14px; margin-left: 5px;
}
.page .content img { margin-bottom: 5px;
}
.page .content p { margin: 0; padding: 0;
}
.page .content p.info { color: silver;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div class="page-w"> <div class="page page1"> <div class="title"> 1 </div> <div class="content"> <h2> Howdy Page 1 </h2> <image src="http://dummyimage.com/190x90/593446/fff"></image> <p> Cras sollicitudin imperdiet diam at venenatis. Vivamus turpis lectus, elementum at bibendum et, condimentum non lorem. Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus. </p> </div> </div> <div class="page page2"> <div class="title"> 2 </div> <div class="content"> <h2> Hello Page 2 </h2> <image src="http://dummyimage.com/190x90/92a298/fff"></image> <p> Proin vel nisl sit amet elit faucibus dapibus eu in nisi. Nullam vitae sapien eu massa convallis aliquet. Cras et sapien eros, a laoreet mauris.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus. </p> </div> </div> <div class="page page3"> <div class="title"> 3 </div> <div class="content"> <h2> Hey Page 3 </h2> <image src="http://dummyimage.com/190x90/94ccc0/fff"></image> <p> Proin tortor urna, scelerisque facilisis cursus vel, faucibus at augue. Etiam id semper dui. Aenean et justo tellus. Donec ac nunc nulla, vitae pharetra risus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus. </p> </div> </div> <div class="page active page4"> <div class="title"> 4 </div> <div class="content"> <h2> Wazzap Page 4 </h2> <image src="http://dummyimage.com/190x90/6c7065/fff"></image> <p> Sollicitudin imperdiet diam at venenatis. Vivamus turpis lectus, elementum at bibendum et, condimentum non lorem. Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus. </p> </div> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Improved Page Flipping Effect - Script Codes CSS Codes

body { background-color: #474747; box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Sans-Serif; font-weight: 300; padding-left: 40%; padding-top: 40px;
}
.page-w { padding: 20px; position: relative;
}
.page { display: block; float: left; margin-left: -190px; background: white; height: 350px; box-shadow: 0px 4px 10px #000; border: 2px solid #f3f3f3; padding: 5px; transform: translate(0px, 0px) translateZ(0); transition: all 0.1s; background-image: linear-gradient(-90deg, #ddd 40%, #ccc 90%); cursor: pointer; position: relative;
}
.page.page1 { transform: translate(-6px, -3px) rotate(-15.2deg);
}
.page.page2 { transform: translate(-6px, -3px) rotate(-10.2deg);
}
.page.page3 { transform: translate(-6px, -3px) rotate(-7.2deg);
}
.page.page4 { transform: translate(-6px, -3px) rotate(-2.2deg);
}
.page:not(.active):hover { transform: translate(-6px, -30px) rotate(-4.2deg); background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
}
.page.active { border: 2px solid #FFF; background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
}
.page h2 { font-size: 18px; border-bottom: 1px solid #eee; padding-bottom: 5px; margin: 0px 0px 10px;
}
.page .title { float: left; color: silver; font-weight: bold; margin-left: 4px;
}
.page .content { float: left; width: 190px; padding: 10px 15px; font-size: 14px; margin-left: 5px;
}
.page .content img { margin-bottom: 5px;
}
.page .content p { margin: 0; padding: 0;
}
.page .content p.info { color: silver;
}

Improved Page Flipping Effect - Script Codes JS Codes

(function() { $(".page").on("click", function(event) { var save_margin; if ($(this).hasClass('active')) { return false; } save_margin = $(this).css('marginLeft'); return $(this).animate({ 'marginLeft': "-400px" }, 300, 'linear', function() { $(this).insertAfter('.page.active'); return $(this).animate({ 'marginLeft': save_margin }, 300, 'linear', function() { $('.page.active').removeClass('active'); $(this).addClass('active'); return $(this).css('position', 'relative'); }); }); });
}).call(this);
Improved Page Flipping Effect - Script Codes
Improved Page Flipping Effect - Script Codes
Home Page Home
Developer Tamik Soziev
Username usaphp
Uploaded September 29, 2022
Rating 4.5
Size 5,201 Kb
Views 12,144
Do you need developer help for Improved Page Flipping 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!

Tamik Soziev (usaphp) Script Codes
Name
A Pen by Tamik Soziev
Create amazing video scripts 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!