Folding Panels

Developer
Derek Wheelden
Size
3,134 Kb
Views
30,360
  1. Folding Panels Previews
  2. Folding Panels HTML Codes
  3. Folding Panels CSS Codes
  4. Folding Panels JS Codes

How do I make an folding panels?

CSS folding animation. Panels fold in and out on hover.Thanks to @jr for getting the transitions to fire correctly.. What is a folding panels? How do you make a folding panels? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Folding Panels Previews
IQ Test

Folding Panels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folding Panels</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="preload"> <h1>Folding Panels</h1> <h2>Hover over the white</h2> <div class="flyout-container"> <div class="panel panel-1"></div> <div class="panel panel-2"></div> <div class="panel panel-3"></div> <div class="panel panel-4"></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>

Folding Panels - Script Codes CSS Codes

/* Variables */
/* Panel styles */
@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.flyout-container { width: 80rem; height: 30rem; margin: 2rem auto; -webkit-perspective: 1000; perspective: 1000;
}
.panel { height: 100%; padding: 1rem; background: white; font-size: 2rem; float: left; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: 0.25s -webkit-transform; transition: 0.25s -webkit-transform; transition: 0.25s transform; transition: 0.25s transform, 0.25s -webkit-transform;
}
.panel-1 { width: 10%; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; -webkit-transform: rotateY(-72.25deg); transform: rotateY(-72.25deg);
}
.panel-2 { width: 20%; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: rotateY(-80.9deg); transform: rotateY(-80.9deg);
}
.panel-3 { width: 30%; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; -webkit-transform: rotateY(-95deg); transform: rotateY(-95deg);
}
.panel-4 { width: 40%;
}
.flyout-container:hover .panel { -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
.flyout-container:hover .panel-1 { -webkit-transition-delay: 0.75s; transition-delay: 0.75s;
}
.flyout-container:hover .panel-2 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
.flyout-container:hover .panel-3 { -webkit-transition-delay: 0.25s; transition-delay: 0.25s;
}
/* General page styles */
* { box-sizing: border-box;
}
html { background: #2a2a2a; font-size: 62.5%;
}
body { font-family: Lato; font-weight: 400; color: #999; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
h1 { margin: 1rem 0 0; font-size: 4em; font-weight: 100; text-align: center; color: lightgray;
}
h2 { margin: 0.5rem 0 1rem; font-size: 1.5em; font-weight: 400; text-align: center; color: gray;
}
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important;
}

Folding Panels - Script Codes JS Codes

// Prevent the animation from firing on page load.
$(function() { $("body").removeClass("preload");
});
Folding Panels - Script Codes
Folding Panels - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 3,134 Kb
Views 30,360
Do you need developer help for Folding Panels?

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!

Derek Wheelden (frxnz) Script Codes
Name
Tile Animation Thing
Live LESS Compilation
Suck It
Triangle Peeker
Blockquote Patterns
Off-Screen Mobile Nav
A Pen by Derek Wheelden
Fantastic Mr. Fox
Bouncing Border
Fluid Image Management
Create amazing sales emails 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!