Jquery Slide to Unlock CSS Animation

Today we have a small tutorial about making the slide to unlock function using the Jquery and CSS animation. It is work just like any smartphone swap function.

Do you have a smartphone? Everyone have nowadays, and you surely unlock your phone using Slide left to right. Even this function also working while attending the calls?

Am I right?

How about to build similar fashion into the web? Let’s today try out this small snippet and make it work with the website.

The slide to unlock feature most used in the iPhone and many other smartphones but what you think to make such animation into the site? Yep, that’s entirely possible to do with CSS and a bit of jquery.

We do use the CSS animation and Javascript into to get this operation done. The function will work similar to any smartphone function.

When a user slide form left to right, it will open a new page in the same window. It is useful and unique to implement such thing on the site where you want to the user do swap the button before entering into the website.

Ok, let have a look the HTML and see how we can achieve that.

WE have an ID slideToOpen which work as our main container, and then we have placed a div for showing the dots path to the end of destination.

The div with ID cache is our end destination and to close the screen we will need a button that is defined as an anchor link.

<div id="slideToOpen"> <div id="dot"></div> <div id="cache"></div> <a href="#" id="close"></a> </div> 

The HTML without CSS is nothing, so we have to build CSS and used some advance property to make this swap function work.

#slideToOpen { position: absolute; top: 75%; height: 10px; left: 40%; right: 40%; } #slideToOpen > .ui-slider-handle { display: block; width: 70px; height: 70px; border: 1px solid white; position: absolute; top: 0; margin-top: -35px; margin-left: -35px; left: 0; border-radius: 100%; } #slideToOpen > .ui-slider-handle:before { content: ''; position: absolute; display: block; top: 50%; left: 50%; width: 4px; height: 4px; margin-top: -3px; margin-left: -3px; transform: rotate(45deg); border-top: 2px solid black; border-right: 2px solid black; z-index: 2; opacity: 1; } #slideToOpen > .ui-slider-handle:after { content: ''; position: absolute; display: block; top: 5px; left: 5px; right: 5px; bottom: 5px; background: white; border-radius: 100%; transition: .25s; } 

WE haven’t listed complete CSS here, but you can find in the demo.

See the Pen Slide to Open by Julien Lejeune (@jlnljn) on CodePen.

Here we have Javascript in function. To make work the swap function, we can only use the slider Javascript function. More, we need to add or remove the classes according to the situation.

$( function() { $( "#slideToOpen" ).slider(); }); $(document).ready(function() { $('#cache').css('left', parseInt($('#slideToOpen').css('width')) + parseInt($('#slideToOpen').css('left')) + 'px'); $(window).mousemove(function(){ if (parseInt($('#slideToOpen > span').css('left')) >= parseInt($('#slideToOpen').css('width'))-20 ) { $('#slideToOpen').addClass('open'); } else { $('#dot').css('left',parseInt($('#slideToOpen > span').css('left'))+35); } }); $(window).resize(function(){ var wi = parseInt($('#slideToOpen').css('width')); var le = parseInt($('#slideToOpen').css('left')); $('#cache').css('left', wi + le + 'px'); }); $('#close').click(function(){ $('#slideToOpen > span').css('left','0'); $('#slideToOpen').removeClass('open'); }); });