Diagonal accordion - jquery and css

Developer
Jack_Quarry
Size
2,861 Kb
Views
78,936
  1. Diagonal accordion - jquery and css Previews
  2. Diagonal accordion - jquery and css HTML Codes
  3. Diagonal accordion - jquery and css CSS Codes
  4. Diagonal accordion - jquery and css JS Codes

How do I make an diagonal accordion - jquery and css?

What is a diagonal accordion - jquery and css? How do you make a diagonal accordion - jquery and css? This script and codes were developed by Jack_Quarry on 11 October 2022, Tuesday.

Diagonal accordion - jquery and css Previews
IQ Test

Diagonal accordion - jquery and css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>diagonal accordion - jquery and css</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="relWrap99"> <div class="wrapSkewedX"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Diagonal accordion - jquery and css - Script Codes CSS Codes

@-moz-keyframes scaleZanim { 0% { z-index: 1; opacity: 0.8; -moz-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); } 100% { z-index: 2; opacity: 1; -moz-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); }
}
@-webkit-keyframes scaleZanim { 0% { z-index: 1; opacity: 0.8; -webkit-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); } 100% { z-index: 2; opacity: 1; -webkit-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); }
}
@keyframes scaleZanim { 0% { z-index: 1; opacity: 0.8; -moz-transform: skew(-15deg) scale(1); -ms-transform: skew(-15deg) scale(1); -webkit-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); } 100% { z-index: 2; opacity: 1; -moz-transform: skew(-15deg) scale(1.6); -ms-transform: skew(-15deg) scale(1.6); -webkit-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); }
}
@-moz-keyframes rev_scaleZanim { 0% { z-index: 2; opacity: 1; -moz-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); } 100% { z-index: 1; opacity: 0.8; -moz-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); }
}
@-webkit-keyframes rev_scaleZanim { 0% { z-index: 2; opacity: 1; -webkit-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); } 100% { z-index: 1; opacity: 0.8; -webkit-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); }
}
@keyframes rev_scaleZanim { 0% { z-index: 2; opacity: 1; -moz-transform: skew(-15deg) scale(1.6); -ms-transform: skew(-15deg) scale(1.6); -webkit-transform: skew(-15deg) scale(1.6); transform: skew(-15deg) scale(1.6); } 100% { z-index: 1; opacity: 0.8; -moz-transform: skew(-15deg) scale(1); -ms-transform: skew(-15deg) scale(1); -webkit-transform: skew(-15deg) scale(1); transform: skew(-15deg) scale(1); }
}
.relWrap99 { position: relative; width: 100%; height: 30em; overflow: hidden;
}
.wrapSkewedX { position: absolute; width: 100%; height: 100%; background: #ffffff; left: -0.89%; bottom: 0;
}
.wrapSkewedX ul { list-style: none; width: 100%; float: left;
}
.wrapSkewedX ul li { width: 25%; height: 100%; position: absolute; z-index: 1; -moz-animation: rev_scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; -webkit-animation: rev_scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; animation: rev_scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; cursor: pointer;
}
.wrapSkewedX ul li:nth-child(1) { background: purple; left: 0%;
}
.wrapSkewedX ul li:nth-child(2) { background: blue; left: 25%;
}
.wrapSkewedX ul li:nth-child(3) { background: orange; left: 50%;
}
.wrapSkewedX ul li:nth-child(4) { background: green; left: 75%;
}
.wrapSkewedX ul li.activeX { -moz-animation: scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; -webkit-animation: scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; animation: scaleZanim 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}

Diagonal accordion - jquery and css - Script Codes JS Codes

$(document).ready(function(){ var sk_eleLi = $('.wrapSkewedX li'); sk_eleLi.hoverIntent(function(){ var $this = $(this) $this.addClass('activeX'); }, function(){ var $this = $(this) $this.removeClass('activeX'); })
})
Diagonal accordion - jquery and css - Script Codes
Diagonal accordion - jquery and css - Script Codes
Home Page Home
Developer Jack_Quarry
Username TheEnd
Uploaded October 11, 2022
Rating 3
Size 2,861 Kb
Views 78,936
Do you need developer help for Diagonal accordion - jquery and css?

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!

Jack_Quarry (TheEnd) Script Codes
Name
Jigsaw jquery snap-puzzle timed
Simple star rating using js and data-uri
React Color Picker
React render page offers
SlideInForm
Responsive Image with Polyfill
Styling input forms
Video pop up plugin
JsonP test
Swiper js mobile app
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!