Add a Peel Back Corner Slide Using Jquery to Your Web Page

html, body height:100%; width:100%; margin:0; padding:0;.banners position:relative; background:#000; width: 100%; height: 100%; overflow:hidden;.banners input display:none;.slide1 background-image: url( -tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);.slide2 background-image:url( -content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);.slide3 background-image:url( -tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);.image display:block; height:100%; width:100%; position: absolute; overflow:hidden; z-index:1; text-align:center; background-position:0 0; background-size:cover; transition:z-index 1s step-end; clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); animation-duration: 2s; animation-name: clipout;input:checked + .image z-index:3; transition:z-index 1s step-end; clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); animation-duration: 2.2s; animation-name: clipin; cursor:default;.image:nth-child(2),input:checked + * + * + .image z-index:2; cursor:pointer;.content color:#FFF; display:inline-block; vertical-align:middle; font-family:arial; text-transform:uppercase; font-size:24px; opacity:0; transition:0s opacity 1s;input:checked + .image .content opacity:1; transition:0.8s opacity 0.8s;.spanner vertical-align:middle; width:0; height:100%; display:inline-block;@keyframes clipout from clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); 50% clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); 51% clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); to clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); @keyframes clipin from clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); 50% clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); to clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); Slide 1 Slide 2 Slide 3

Peel Back Corner Slide Using Jquery

Download File: https://tinurli.com/2vFFII

$(document).ready(function() $(".slider").on("click",".next",function() if ($(this).prev().length) $(this).prev().removeClass("curr"); else $(this).siblings().last().removeClass("curr"); //deactivate current slide if ($(this).next().length) $(this).next().addClass("next"); else $(this).siblings().first().addClass("next"); //prepare slide that follows next slide $(this).removeClass("next").addClass("curr"); //activate next slide ););.slider, .slider .img width: 55vw; height: calc(55vw / 16*9); background: #000 center/contain no-repeat;.slider position:relative; margin:0 auto; overflow:hidden;.slider .slide position: absolute; z-index: 0; width: 250%; height: 0; transform: translateX(-50%) rotate(-20deg); transform-origin: 50% 0; transition:z-index 0s 0.7s, height 0.7s; overflow: hidden;.slider .slide.next z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s; cursor:pointer;.slider .slide.curr z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;.slider .slide .img margin-left:50%; transform:rotate(20deg); transform-origin:0 0; codepen: jsfiddle:

Unfortunately, as usual, IE processes transform:rotate() differently from other browsers. Visually the rotations happen, but the browser still seems to reserve the original space of the elements, so therefor the exposed corner of the next slide is not clickable because the current slide is 'covering' it. Using the -ms- or -webkit- prefix doesn't make a difference.

$(document).ready(function() $(".slider .corner").on("click",function() var $next = $(this).siblings(".next"); if ($next.prev().length) $next.prev().removeClass("curr"); else $next.siblings(".slide").last().removeClass("curr"); //deactivate current slide if ($next.next(".slide").length) $next.next().addClass("next"); else $next.siblings().first().addClass("next"); //prepare slide that follows next slide $next.removeClass("next").addClass("curr"); //activate next slide ););.slider, .slider .img width: 55vw; height: calc(55vw / 16*9); background: #000 center/contain no-repeat;.slider position:relative; margin:0 auto; overflow:hidden;.slider .corner position: absolute; z-index: 3; bottom: 0; right: 0; width: 100%; height: 21%; transform: rotate(-20deg); transform-origin: 100% 0; cursor: pointer;.slider .slide position: absolute; z-index: 0; width: 250%; height: 0; transform: translateX(-50%) rotate(-20deg); transform-origin: 50% 0; transition:z-index 0s 0.7s, height 0.7s; overflow: hidden;.slider .slide.next z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s;.slider .slide.curr z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;.slider .slide .img margin-left:50%; transform:rotate(20deg); transform-origin:0 0; codepen: jsfiddle:

$(document).ready(function() var slides = [ 2, //index for next slide " ", " ", " ", " ", " " ]; //INITIALIZE SLIDESHOW-------------------- $(".slider").css("background-image","url("+slides[2]+")"); //set next slide $(".slider .current .img").css("background-image","url("+slides[1]+")"); //set current slide, and set slide-height to slideshow-height //SLIDESHOW CLICK-HANDLER-------------------- $(".slider .current").on("click",function(e)e.stopPropagation();); $(".slider").on("click",function() $(this).children(".current").animate(height:0,700,function() $(this).children(".img").css("background-image","url("+slides[slides[0]]+")"); //set the current slide to the next slide $(this).css("height","155%"); //cover entire slide if (slides[0]==slides.length-1) slides[0]=1; else ++slides[0]; //increase/loop index for next slide $(this).parent().css("background-image","url("+slides[slides[0]]+")"); //set the next slide to the next slide after that $(this).animate(height:"135%",400); //reveal corner for next slide ); ););.slider, .slider .img width: 55vw; height: calc(55vw / 16*9); background: #000 center/contain no-repeat;.slider margin:0 auto; cursor:pointer; overflow:hidden;.slider .current width: 250%; height: 135%; transform: translateX(-50%) rotate(-20deg); transform-origin: 50% 0; overflow: hidden; cursor: default;.slider .current .img margin-left:50%; transform:rotate(20deg); transform-origin:0 0;codepen: jsfiddle:

$(document).ready(function() $(".banners").on("click", ".slide-cropper.next .slide-content", function() var $container = $(this).closest(".slide"); $(".slide-cropper").removeClass("prev") .removeClass("current") .removeClass("next"); $(this).closest(".slide-cropper").addClass("current"); var $prevContainer; if ($container.prev().length) $prevContainer = $container.prev(); else $prevContainer = $container.siblings(":last"); $prevContainer.find(".slide-cropper").addClass("prev"); var $nextContainer; if ($container.next().length) $nextContainer = $container.next(); else $nextContainer = $container.siblings(":first"); $nextContainer.find(".slide-cropper").addClass("next"); ););*,*:before,*:after box-sizing: border-box;html --width: 300px; --height: 200px; /* rotate for image cropping */ --rotate-angle: 30deg; /* sin 30 degrees for image cropping */ --sin-rotate-angle: 0.5; /* cos 30 degrees for image cropping */ --cos-rotate-angle: 0.8660254037844386; /* clipper ratio for width, can be from 0 to 1 */ --clipper-ratio: 0.45; --animation-timeout: 2s;/* all body styles are just for demo *//* just centering the slider */body margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;.banners width: var(--width); height: var(--height); position: relative;.slide width: 100%; height: 100%;.slide .slide-cropper position: absolute; left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle)); top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle)); width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle)); height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle)); transform-origin: 0 0; transform: rotate(calc(-1 * var(--rotate-angle))); overflow: hidden; transition: height var(--animation-timeout) linear;.slide-content position: absolute; background-size: 100% 100%; left: calc(var(--height) / 2); width: var(--width); height: var(--height); transform: rotate(var(--rotate-angle)); transform-origin: 0 0; z-index: 0; /* just styles for text */ display: flex; justify-content: center; align-items: center; color: #fff; font-size: 3em;.slide1 .slide-content background-image: url(" ");.slide2 .slide-content background-image: url(" ");.slide3 .slide-content background-image: url(" ");.slide-cropper.prev height: 0; z-index: 3;.slide-cropper.current height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle)); transition-delay: var(--animation-timeout); z-index: 2;.slide-cropper.next z-index: 1;/* Fix for IE */.slide-cropper.current pointer-events: none; Slide 1 Slide 2 Slide 3 2ff7e9595c

The Health Spa

Add a Peel Back Corner Slide Using Jquery to Your Web Page

Peel Back Corner Slide Using Jquery

Recent Posts

Comments