Simple Expanding Content Slider with jQuery and CSS3
File Size: | 1.92 KB |
---|---|
Views Total: | 1876 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, responsive jQuery & CSS3 content slider which allows you to slide through a set of content with shrink / expand animations powered by CSS3 transitions and transforms.
How to use it:
1. Create a navigation to slide through the slides.
<nav> <div class="nav-item" id="0"></div> <div class="nav-item" id="1"></div> <div class="nav-item" id="2"></div> <div class="nav-item" id="3"></div> </nav>
2. Embed any content into the slides as follows.
<div class="wrapper"> <div class="slide current one" id="0"> <h1 class="slide-title">Slide One</h1> </div> <div class="slide two shrink" id="1"> <h1 class="slide-title">Slide Two</h1> </div> <div class="slide three shrink" id="2"> <h1 class="slide-title">Slide Three</h1> </div> <div class="slide four shrink" id="3"> <h1 class="slide-title">Slide Fout</h1> </div> </div>
3. The primary CSS styles for the content slider.
html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .wrapper { height: 100%; } .slide { width: 100%; height: 100%; position: absolute; display: none; overflow: hidden; text-align: center; margin: 0 auto; } .current { display: block } nav { position: absolute; width: 100%; height: 50px; background: #2C3E50; text-align: center; z-index: 99; } .nav-item { height: 10px; width: 10px; -webkit-border-radius: 100%; border-radius: 100%; background: #fff; display: inline-block; margin: 20px 10px; } .slide-title { margin: 0 auto; top: 50%; position: relative; display: block; color: #fff; font-size: 2em; font-weight: 500; }
4. Create the shrink / expand animations using CSS3.
.increase-size { -webkit-transform: scale3d(1.5, 1.5, 1.5); -moz-transform: scale3d(1.5, 1.5, 1.5); -o-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; } .decrease-size { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; } @keyframes "shrink" { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); } } @-webkit-keyframes "shrink" { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); } } .shrink { -webkit-animation: shrink 1s 1 ease forwards; -moz-animation: shrink 1s 1 ease forwards; -o-animation: shrink 1s 1 ease forwards; animation: shrink 1s 1 ease forwards; overflow: visible !important; } @keyframes "unshrink" { from { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateX(88deg); -ms-transform: rotateX(88deg); transform: rotateX(88deg); } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } } @-webkit-keyframes "unshrink" { from { -webkit-transform: rotateY(-88deg); transform: rotateY(-88deg); } to { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } .unshrink { -webkit-animation: unshrink 2.5s 1 ease forwards; -moz-animation: unshrink 2.5s 1 ease forwards; -o-animation: unshrink 2.5s 1 ease forwards; animation: unshrink 2.5s 1 ease forwards; overflow: visible !important; }
5. Load the latest version of jQuery JavaScript library from a CDN.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
6. The core JavaScript to enable the content slider.
$(document).ready(function() { $(".nav-item").mouseover(function() { $(this).addClass("increase-size"); $(this).removeClass("decrease-size"); }); $(".nav-item").mouseout(function() { $(this).removeClass("increase-size"); $(this).addClass("decrease-size"); }); $(".nav-item").click(function() { var currentNav = $(this); var navLinkId = $(this).attr("id"); var slides = $(".slide"); $.each(slides, function(i, slide) { if ($(slide).attr("id") == navLinkId) { var slideBg = $(slide).css("background-color"); console.log(slideBg) $(currentNav).css("background-color", slideBg); $(this).removeClass("shrink").addClass("current unshrink"); } else { $(this).removeClass("current"); } }); }) });
This awesome jQuery plugin is developed by tonkec. For more Advanced Usages, please check the demo page or visit the official website.