Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

How to Build jQuery Slide to Unlock CSS Animation

Ashfaq Ahmed by Ashfaq Ahmed
January 13, 2020
in How To
0
How to Build Jquery Slide to Unlock CSS Animation
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Today, we’ll build a slide to unlock function using jQuery and CSS animation. It works just like any smartphone swap function.

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

Am I right?

How about to build a similar fashion to 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 a Transition sliding effect using CSS and bit of Jquery 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 to get this operation done. The function will work similarly to any smartphone function.

When a user slides from 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 the user do swap the button before entering the website.

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

How to Build a jQuery Slide to Unlock CSS Animation

We have an ID slideToOpen which works as our main container, and then we have placed a div for showing the dot’s path to the end of the 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.

CSS Style

#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 it 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.

The JavaScript

$( 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'); 

	});

});

I hope, now you are able to build your own slide to unlock animation with the help of jQuery and CSS. If you have any questions or suggestions, let me by comment below.

Previous Post

Pure CSS3 Responsive Animated Skills Bar

Next Post

Pure CSS Content Slider without Javascript

Next Post
Pure CSS Content Slider without Javascript

Pure CSS Content Slider without Javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.