Fancy Animated Photo Slideshow with jQuery and Greensock
File Size: | 7.91 KB |
---|---|
Views Total: | 2687 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A cool, fullscreen, responsive, animated image slideshow / carousel with a nifty gallery browser, built with jQuery, CSS3 and Greensock's TweenMax.js.
See it in action:
How to use it:
1. Build the markup structure and add your images to the slideshow as shown below:
<div class="slideshow"> <div class="slideshow__contentWrap"> <h2 class="slideshow__title">Slideshow Tittle</h2> <p class="slideshow__text">Slideshow Description</p> </div> <ul class="slideshow__container"> <li class="slideshow__item"> <img src="1.jpg" class="slideshow__image"/> </li> <li class="slideshow__item"> <img src="2.jpg" class="slideshow__image"/> </li> <li class="slideshow__item"> <img src="3.jpg" class="slideshow__image"/> </li> <li class="slideshow__item"> <img src="4.jpg" class="slideshow__image"/> </li> </ul> <div class="slideshow__back"> <div class="slideshow__slidein"> <div class="overlay"></div> <img src="4.jpg" class="slideshow__image"/> <h2 class="slideTitle">PREVIOUS SLIDE </h2> </div> <div class="slideshow__block"> <img src="close.png" class="close"/> </div> <div class="slideshow__prev"> <svg width="32px" height="32px" viewBox="1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="prevBtn" sketch:type="MSArtboardGroup" stroke="#1B2023" stroke-width="2"> <g id="Btn" sketch:type="MSLayerGroup" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) "> <path d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path> <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle> </g> </g> </g> </svg> </div> </div> <div class="slideshow__forward"> <div class="slideshow__slidein"> <div class="overlay"></div> <img src="2.jpg" class="slideshow__image"/> <h2 class="slideTitle">NEXT SLIDE</h2> </div> <div class="slideshow__block"> <img src="close.png" class="close"/> </div> <div class="slideshow__next"> <svg width="32px" height="32px" viewBox="-1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g class="Btn" sketch:type="MSLayerGroup" stroke="#1B2023" stroke-width="2"> <path class="line" d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path> <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle> </g> </g> </svg> </div> </div> </div>
2. The core CSS / CSS3 styles for the slideshow.
* { box-sizing: border-box; } body { margin: 0; width: 100%; height: 100%; background-color: #fff; color: #fff; font-family: "Perpetua", serif; } .slideshow { width: 100%; height: 100vh; position: relative; overflow: hidden; } .slideshow__contentWrap { width: 500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; } .slideshow__title { font-size: 4em; margin: 0; font-weight: 100; } .slideshow__text { font-size: 1em; line-height: 1.5; font-weight: 100; font-family: "Century Gothic", sans-serif; } .slideshow__container { display: block; list-style: none; position: relative; white-space: nowrap; height: 100%; width: 100%; padding: 0; margin: 0; font-size: 0; } .slideshow__item { display: inline-block; position: relative; width: 100%; height: 100%; } .slideshow__image { display: block; position: relative; height: auto; width: 100%; background-size: contain; } .slideshow__slidein { height: 100px; width: 350px; display: block; position: absolute; background-color: #000; top: 50%; transform: translateY(-50%); margin: 0; overflow: hidden; } .slideshow__slidein img { display: block; position: absolute; top: 50%; transform: translateY(-50%); } .slideshow .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: #000; opacity: 0.5; } .slideshow__forward .slideshow__slidein { right: -350px; z-index: 2; } .slideshow__forward .slideshow__slidein .slideTitle { font-size: 1.5em; color: #fff; font-family: "Century Gothic", sans-serif; font-weight: 100; margin: 0; padding-left: 1em; position: relative; top: 50%; transform: translateY(-50%); z-index: 11; margin-right: 300px; text-align: right; } .slideshow__forward .slideshow__block { position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 100px; width: 80px; right: 270px; opacity: 0; background-color: #fff; z-index: 2; } .slideshow__back .slideshow__slidein { left: -350px; z-index: 2; } .slideshow__back .slideshow__slidein .slideTitle { font-size: 1.5em; color: #fff; font-family: "Century Gothic", sans-serif; font-weight: 100; margin: 0; padding-right: 1em; float: right; position: relative; top: 50%; transform: translateY(-50%); z-index: 11; margin-left: 300px; text-align: right; } .slideshow__back .slideshow__block { position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 100px; width: 80px; left: 270px; opacity: 0; background-color: #fff; z-index: 2; } .slideshow .close { width: 25px; height: 25px; position: relative; display: block; opacity: 0; transition: opacity .25s ease-in-out; top: 50%; transform: translateY(-50%); margin-left: auto; margin-right: auto; } .slideshow .slideshow__block:hover .close { opacity: 1; } .slideshow__prev, .slideshow__next { width: 3em; z-index: 1; } .slideshow__prev svg, .slideshow__next svg { display: block; width: 100%; height: 100%; } .slideshow__prev { position: absolute; left: 5em; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; } .slideshow__prev .circle { opacity: 0; } .slideshow__next { position: absolute; right: 5em; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; } .slideshow__next .circle { opacity: 0; }
3. Include the necessary jQuery and TweenMax.js JavaScript libraries at the bottom of the webpage.
<script src="TweenMax.min.js"></script> <script src="jquery-2.1.4.min.js"></script>
4. The core JavaScript to active the slideshow.
$(document).ready(function() { var imgWidth = $(".slideshow__image").width(), $slider = $(".slideshow__container"), $nextButton = $(".slideshow__next"), $prevButton = $(".slideshow__prev"), closeBlock = $(".slideshow__block"), slideInBlock = (".slideshow__slidein"), slideNext = $('.slideshow__forward').find('.slideshow__slidein'), slideBack = $('.slideshow__back').find('.slideshow__slidein'), clickCount = 0, clickCountImg = 1; $nextButton.click(function() { var circle = $(this).find('.circle'), line = $(this).find('.line'), block = $(this).parent().find('.slideshow__block'), slideIn = $(this).parent().find('.slideshow__slidein'), tl = new TimelineMax({ onComplete: tlComplete }), tl2 = new TimelineMax(); tl.set(circle, { x: 15, y: 15, scale: 0 }) .set(slideIn, { right: -350, opacity: 1 }, 0) .set(block, { right: 270, opacity: 0 }, 0) .set($nextButton, { zIndex: 1 }, 0) .to(circle, 0.5, { scale: 1, transformOrigin: "50%, 50%", opacity: 1 }, 0) .to(circle, 0.3, { opacity: 0 }) .to(line, 0.3, { scale: 0, transformOrigin: "50%, 50%" }, 0) .set(circle, { scale: 0, opacity: 0 }); function tlComplete() { tl2.to(slideIn, 0.5, { right: 0 }) .to(block, 0.5, { right: 350, opacity: 1 }, 0) }; function getLineback() { TweenMax.to(line, 0.3, { scale: 1, opacity: 1, delay: 0.5 }); }; closeBlock.click(function() { tl2.reverse(); }); closeBlock.click(getLineback); $prevButton.click(function() { tl2.reverse(); }); $prevButton.click(getLineback); }); $prevButton.click(function() { var circle = $(this).find('.circle'), line = $(this).find('.line'), block = $(this).parent().find('.slideshow__block'), slideIn = $(this).parent().find('.slideshow__slidein'), tl = new TimelineMax({ onComplete: tlComplete }), tl2 = new TimelineMax(); tl.set(circle, { x: 15, y: 15, scale: 0 }) .set(slideIn, { left: -350, opacity: 1 }, 0) .set(block, { left: 270, opacity: 0 }, 0) .set($prevButton, { zIndex: 1 }, 0) .to(circle, 0.5, { scale: 1, transformOrigin: "50%, 50%", opacity: 1 }, 0) .to(circle, 0.3, { opacity: 0 }) .to(line, 0.3, { scale: 0, transformOrigin: "50%, 50%" }, 0) .set(circle, { scale: 0, opacity: 0 }); function tlComplete() { tl2.to(slideIn, 0.3, { left: 0 }) .to(block, 0.3, { left: 350, opacity: 1 }, 0); }; function getLineback() { TweenMax.to(line, 0.3, { scale: 1, opacity: 1, delay: 0.5 }); }; closeBlock.click(function() { tl2.reverse(); }) closeBlock.click(getLineback); $nextButton.click(function() { tl2.reverse(); }); $nextButton.click(getLineback); }); slideNext.click(function() { clickCount++; clickCountImg++; var clickCountImgPrev = clickCountImg - 2; var firstImage = $('.slideshow__container li img:eq(0)'), imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'), image = $('.slideshow__container li img:eq(' + clickCountImg + ')'); if (clickCount > 3) { clickCount = 0; } if (clickCountImg > 3) { clickCountImg = 0; firstImage.clone().appendTo(slideNext); } TweenMax.to($slider, 0.5, { x: -clickCount * imgWidth }) slideNext.children("img").remove(); slideBack.children("img").remove(); image.clone().appendTo(slideNext); imagePrev.clone().appendTo(slideBack); console.log(image); if (clickCountImg == 0) { firstImage.clone().appendTo(slideNext); } }); slideBack.click(function() { clickCount--; clickCountImg--; var clickCountImgPrev = clickCountImg - 2, firstImage = $('.slideshow__container li img:eq(0)'), imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'), image = $('.slideshow__container li img:eq(' + clickCountImg + ')'); if (clickCount < 0) { clickCount = 3; } if (clickCountImg < 0) { clickCountImg = 3; } TweenMax.to($slider, 0.5, { x: -clickCount * imgWidth }); slideNext.children("img").remove(); slideBack.children("img").remove(); imagePrev.clone().appendTo(slideBack); image.clone().appendTo(slideNext); }); });
This awesome jQuery plugin is developed by baarte. For more Advanced Usages, please check the demo page or visit the official website.