I manage to reproduce an effect that I loved to do. When flash arrived I was using this effect in every website. Only today I manage to get it to work with blur and with clipping. Thanks to Greenshock we can make a smooth effect.
A Pen by Ignacio Correia on CodePen.
| #copy <a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b><br/>Searching for a Dribbble invite :)</a> | |
| #sliderWrapper | |
| span.play.fa-stack | |
| i.fa.fa-play.fa-inverse | |
| span.stop.fa-stack | |
| i.fa.fa-stop.fa-inverse | |
| #slider | |
| #wrapper | |
| #slideshow | |
| .slide-wrapper | |
| ul.slides-container | |
| li.slide | |
| .bgimage0 | |
| .content Glass <br/> Slideshow | |
| .bgglass1 | |
| .content Glass <br/> Slideshow | |
| .bgglass2 | |
| .content Glass <br/> Slideshow | |
| .bgblury1 | |
| .content Glass <br/> Slideshow | |
| /* | |
| * Hi and Welcome to Codepen! | |
| * | |
| * My name is Ignacio and I am looking for a Dribble invitation. | |
| * Please contact me via twitter if you have 1, | |
| * I would like to have 1 hehe :) | |
| * | |
| * | |
| * Finally I can reproduce in CSS what I managed to design in Photoshop. | |
| * Still not all browsers allow for the creatives to reproduce everything. | |
| * We still have browser compatibility problems. | |
| * | |
| * I will keep publishing examples to help push the web foward. | |
| * PLEASE Like, Heart or Share if you like, and don't forget to follow. | |
| * Thanks. | |
| * | |
| * Now let's animate it :) | |
| */ | |
| var tl = new TimelineLite({onUpdate:updateSlider,onComplete:restart}) | |
| ,animSpeed = 1 | |
| ,level0 = '.bgimage0' | |
| ,level1 = '.bgglass1' | |
| ,level2 = '.bgglass2' | |
| ,level3 = '.bgblury1' | |
| ,level1Start = [-200,0,0,0,-40,100,-240,100] | |
| ,level1end = [100,0,120,0,80,100,60,100] | |
| ,level2Start = [120,0,140,0,100,100,80,100] | |
| ,level2end = [-40,0,-20,0,-60,100,-80,100] | |
| ,level3Start = [100,0,120,0,80,100,60,100] | |
| ,level3end = [40,0,60,0,20,100,0,100] | |
| ,$slideContainer = $('.slides-container') | |
| ,$slides = $('.slide') | |
| ,playButton = $('.play') | |
| ,stopButton = $('.stop') | |
| ,$resetStyle = $('.bgglass1,.bgglass2,.bgblury1'); | |
| //First Reset | |
| tl.set($resetStyle, {autoAlpha:0}) | |
| //.set($slides.first().find(level1),{webkitClipPath:level1Start}) | |
| //.set($slides.first().find(level2),{webkitClipPath:level2Start}) | |
| //.set($slides.first().find(level3),{webkitClipPath:level3Start}) | |
| //Then Animate | |
| .to($slides.first().find(level0), animSpeed, {autoAlpha:1}) | |
| .to($slides.first().find(level1), animSpeed, {autoAlpha:1},'fadeInGlass') | |
| .to($slides.first().find(level2), animSpeed, {autoAlpha:1},'fadeInGlass') | |
| .to($slides.first().find(level3), animSpeed, {autoAlpha:1},'fadeInGlass') | |
| .to(level1Start,40, level1end,'fadeInGlass') | |
| .to(level2Start,40, level2end,'fadeInGlass') | |
| .to(level3Start,40, level3end,'fadeInGlass') | |
| .to($slides.first().find(level1), animSpeed*3, {autoAlpha:0},"-=9",'fadeOutGlass') | |
| .to($slides.first().find(level2), animSpeed*3, {autoAlpha:0},"-=9",'fadeOutGlass') | |
| .to($slides.first().find(level3), animSpeed*3, {autoAlpha:0},"-=9",'fadeOutGlass'); | |
| //.to($slides.first().find(level3), animSpeed, {autoAlpha:1}); | |
| tl.play(); | |
| level1end.onUpdate = function() { | |
| TweenMax.set($slides.first().find(level1), {webkitClipPath:'polygon('+level1Start[0]+'%'+level1Start[1]+'%,'+level1Start[2]+'%'+level1Start[3]+'%,'+level1Start[4]+'%'+level1Start[5]+'%,'+level1Start[6]+'%'+level1Start[7]+'%)'}); | |
| }; | |
| level2end.onUpdate = function() { | |
| TweenMax.set($slides.first().find(level2), {webkitClipPath:'polygon('+level2Start[0]+'%'+level2Start[1]+'%,'+level2Start[2]+'%'+level2Start[3]+'%,'+level2Start[4]+'%'+level2Start[5]+'%,'+level2Start[6]+'%'+level2Start[7]+'%)'}); | |
| }; | |
| level3end.onUpdate = function() { | |
| TweenMax.set($slides.first().find(level3), {webkitClipPath:'polygon('+level3Start[0]+'%'+level3Start[1]+'%,'+level3Start[2]+'%'+level3Start[3]+'%,'+level3Start[4]+'%'+level3Start[5]+'%,'+level3Start[6]+'%'+level3Start[7]+'%)'}); | |
| }; | |
| function updateSlider(){} | |
| function restart(){ | |
| tl.stop(); | |
| tl.restart(); | |
| } | |
| $("#slider").slider({ | |
| range: false, min: 0, max: 100, step:.1, | |
| slide: function ( event, ui ) { | |
| tl.pause(); tl.progress( ui.value/100 ); | |
| }}); | |
| function updateSlider() { | |
| $("#slider").slider("value", tl.progress() *100); | |
| } | |
| $(playButton).click(function(){ | |
| tl.stop(); | |
| tl.restart(); | |
| }) | |
| $(stopButton).click(function(){ | |
| tl.stop(); | |
| }) |
| @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); | |
| @numbeSlides:4; | |
| @bodyBG:#222222; | |
| @slideH:80%; | |
| @slideW:80%; | |
| @minSlideW:450px; | |
| @maxSlideW:700px; | |
| @centerTop:@slideH/2; | |
| @centerLeft:@slideW/2; | |
| @wrapperBG:#000; | |
| @imageSlide01:'http://lorempixel.com/1000/800/nature/'; | |
| @fontSize:60px; | |
| @smallText:30px; | |
| @fontColor:#fff; | |
| @fontFamily: 'Lato', Helvetica, Arial; | |
| @fontWeight:900; | |
| @smallWeight:300; | |
| @link:#898989; | |
| @transition:all 0.3s ease-in-out 0s; | |
| @linkhover:#fff; | |
| html{ | |
| height: 100%; width: 100%; min-height:100%; | |
| overflow:hidden; background: @bodyBG; margin: 0;padding: 0; | |
| font-family:@fontFamily; | |
| body{ | |
| height: 100%; width: 100%; min-height:100%;margin: 0;padding: 0; | |
| #copy{ | |
| position:absolute; | |
| bottom:0; | |
| height: 40px; | |
| width: 100%; | |
| text-align:center; | |
| text-transform:uppercase; | |
| line-height: 14px; | |
| font-size:10px; | |
| font-weight:400; | |
| a{ | |
| color:@link; | |
| text-decoration:none; | |
| transition:@transition; | |
| b{ | |
| font-weight: 700; | |
| } | |
| &:hover{ | |
| color:@linkhover | |
| } | |
| } | |
| } | |
| #wrapper{ | |
| position:absolute; | |
| height:@slideH; | |
| top:50%; | |
| width:@slideW; | |
| left:50%; | |
| -webkit-transform:translate(-50%,-50%); | |
| background: @wrapperBG; | |
| box-shadow: 0 0 3px #000; | |
| max-width: @maxSlideW; | |
| min-width: @minSlideW; | |
| #slideshow{ | |
| height: 100%; | |
| width: 100%; | |
| .slide-wrapper{ | |
| height: 100%; | |
| width: 100%; | |
| overflow:hidden; | |
| outline: 1px rgba(000,000,000,0.2) solid; | |
| ul{ | |
| margin: 0;padding: 0;list-style:none; | |
| width: 100% * @numbeSlides; | |
| height: 100%; | |
| li{ | |
| position: relative; | |
| display: block; | |
| float:left; | |
| width: 25%; | |
| height: 100%; | |
| background: #000; | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| z-index: 10; | |
| opacity:0.5; | |
| background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0))); | |
| background: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); | |
| background: -o-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); | |
| background: -ms-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); | |
| background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#00ffffff',GradientType=0 ); | |
| } | |
| > div{ | |
| position: absolute; | |
| top:0; | |
| left:0; | |
| box-shadow: 0 0 1px 1px rgba(255,255,225,0.25) inset; | |
| height: 100%; | |
| width: 100%; | |
| background-image: url(@imageSlide01); | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| background-size:cover; | |
| text-align:center; | |
| div{ | |
| font-size:@smallText; | |
| font-weight: @smallWeight; | |
| } | |
| &.bgimage0{ | |
| z-index:1; | |
| } | |
| &.bgglass1{ | |
| z-index:2; | |
| //-webkit-clip-path: polygon(60% 0,80% 0,40% 100%, 20% 100%); | |
| transform: scale(1.05); | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| &.bgglass2{ | |
| z-index:3; | |
| //-webkit-clip-path: polygon(40% 0,60% 0,20% 100%, 0% 100%); | |
| transform: scale(1.06); | |
| -webkit-filter:blur(1px); | |
| opacity: 0; | |
| } | |
| &.bgblury1{ | |
| z-index:4; | |
| //-webkit-clip-path: polygon(80% 0,100% 0,60% 100%, 40% 100%); | |
| transform: scale(1.08); | |
| -webkit-filter:blur(2px); | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .content{ | |
| cursor:default; | |
| font-size:@fontSize; | |
| color:@fontColor; | |
| text-align:center; | |
| position:absolute; | |
| height:auto; | |
| top:50%; | |
| width:@slideW; | |
| left:50%; | |
| -webkit-transform:translate(-50%,-50%); | |
| text-transform:uppercase; | |
| font-weight: @fontWeight; | |
| text-shadow: 0 0 10px rgba(00,00,00,0.5), | |
| 0 0 30px rgba(00,00,00,0.5); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #sliderWrapper{ | |
| z-index: 9999999; | |
| position:absolute; | |
| bottom: 50px; | |
| width: 580px; | |
| left:50%; | |
| margin-left:-280px; | |
| .play{ | |
| cursor: pointer; | |
| text-align: center; | |
| position: absolute; | |
| margin-top: 0; | |
| left: 0; | |
| margin-left: -75px; | |
| font-size: 11px; | |
| } | |
| .stop{ | |
| cursor: pointer; | |
| text-align: center; | |
| position: absolute; | |
| margin-top: 0; | |
| left: 0; | |
| margin-left: -35px; | |
| font-size: 11px; | |
| } | |
| #slider{ | |
| width: 580px; | |
| margin:10px; | |
| box-shadow: none; | |
| border:0 none; | |
| height: 1px; | |
| background: rgb(000,000,000); | |
| } | |
| span{ | |
| cursor:pointer; | |
| background: rgb(020,020,020); | |
| border-radius:50%; | |
| box-shadow:0 0 4px rgba(020,020,020,0.5); | |
| margin-top:-5px; | |
| border:0 none; | |
| outline:none; | |
| &:focus{ | |
| border:0 none; | |
| outline:none; | |
| } | |
| } | |
| } |