JQuery Gallery Simple 3D Effect
How do I make an jquery gallery simple 3d effect?
What is a jquery gallery simple 3d effect? How do you make a jquery gallery simple 3d effect? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.
JQuery Gallery Simple 3D Effect Previews
JQuery Gallery Simple 3D Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Gallery Simple 3D Effect</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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:black;
}
.slider { position:relative; width: 960px; height: 450px; margin: 0 auto;
}
.slider img { position: absolute; top:0px; left:0px; display: none; background-color: #f3f4ef; border: 13px solid #dedede;
}
.slider .active { display: block; z-index: 100;
}
.nav { z-index: 1000; position: absolute; bottom: 0; text-align: center; width: 100%; padding: 10px 0 20px 0;
}
.nav a { margin-right: 15px; display: inline-block; border-radius: 50%; width: 10px; background: #fff; height: 10px;
}
.nav .navActive { background: #666; border: none;
}
.buttons { width: 100%; position:absolute;
}
.buttons a { position:absolute; z-index: 1000; top: 230px; height: 30px; width: 30px; background: url(http://oi41.tinypic.com/t6dxsm.jpg);
}
.buttons .prev { left:20px;
}
.buttons .next { right:20px; background-position: 30px 30px;
}
body { -webkit-backface-visibility: hidden;
}
.animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; х. </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slider"> <img src="https://i.imgur.com/Cd3FlPa.jpg" alt=""> <img src="https://i.imgur.com/7sZylcD.jpg" alt=""> <img src="https://i.imgur.com/Ei7btAX.jpg" alt=""> <div class="buttons"> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> <span class="nav"></span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>
JQuery Gallery Simple 3D Effect - Script Codes CSS Codes
body { background:black;
}
.slider { position:relative; width: 960px; height: 450px; margin: 0 auto;
}
.slider img { position: absolute; top:0px; left:0px; display: none; background-color: #f3f4ef; border: 13px solid #dedede;
}
.slider .active { display: block; z-index: 100;
}
.nav { z-index: 1000; position: absolute; bottom: 0; text-align: center; width: 100%; padding: 10px 0 20px 0;
}
.nav a { margin-right: 15px; display: inline-block; border-radius: 50%; width: 10px; background: #fff; height: 10px;
}
.nav .navActive { background: #666; border: none;
}
.buttons { width: 100%; position:absolute;
}
.buttons a { position:absolute; z-index: 1000; top: 230px; height: 30px; width: 30px; background: url(http://oi41.tinypic.com/t6dxsm.jpg);
}
.buttons .prev { left:20px;
}
.buttons .next { right:20px; background-position: 30px 30px;
}
body { -webkit-backface-visibility: hidden;
}
.animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; х.JQuery Gallery Simple 3D Effect - Script Codes JS Codes
$(function () { var duration = 2500; var slides = $(".slider img").length; var i = 1; $(".slider img:nth-child(1)").addClass("active animated flipInX"); // Slide the images function slide() { if (i <= slides) { var imagelocation = ".slider img:nth-child(" + i + ")"; var navlocation = ".nav a:nth-child(" + i + ")"; $(imagelocation).siblings().removeClass("active animated flipInX"); $(imagelocation).addClass("active animated flipInX"); $(navlocation).siblings().removeClass("navActive"); $(navlocation).addClass("navActive"); } if (i == 0) { i = slides; } if (i < 0) { i = 0; } } // Add navigation blips var blips = 0; for (var nav = 0; nav < slides; nav++) { $(".nav").append('<a href="#"></a>'); } $(".nav a:first-child").addClass("navActive"); // Configure the next/prev buttons $('.next').click(function () { clearInterval(timer); if (i == slides) { i = 1; } else { i++ } slide(); console.log(i); }) $('.prev').click(function () { clearInterval(timer); if (i == 1) { i = slides; } else { i-- } slide(); console.log(i); }) // Autoplay timer = setInterval(function () { i++; if (i > slides) { i = 1; } slide(); }, duration);
});
| Developer | Nick Mkrtchyan |
| Username | Sonick |
| Uploaded | November 10, 2022 |
| Rating | 4 |
| Size | 3,584 Kb |
| Views | 36,432 |
Do you need developer help for JQuery Gallery Simple 3D 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!
Nick Mkrtchyan (Sonick) Script Codes
| Name | Size |
| Preloader | 2,981 Kb |
| 3D Menu | 3,448 Kb |
| Canvas Starfield | 2,827 Kb |
| Canvas Background Effect 2 | 2,929 Kb |
| Canvas Hover Effect | 2,833 Kb |
| CSS2 Spotlight | 2,531 Kb |
| CSS3 Text Animation Effect 2 | 3,367 Kb |
| Animan CSS3 | 5,353 Kb |
| Mozilla DevDerby | 21,599 Kb |
| Canvas Green Particles | 3,249 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| Blog Concept 2 | JGallardo | 2,994 Kb |
| Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
| Ball Physics | Getsetbro | 3,149 Kb |
| Eunice A | Ejbronze | 2,203 Kb |
| A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| Loading... | Adamjacob | 2,384 Kb |
| Subtle site navigation with description | Necks | 3,206 Kb |
| Simple content swap | Snografx | 1,859 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!