JQuery CSS Transition Content Slide-In

Developer
Patrick
Size
2,362 Kb
Views
20,240
  1. JQuery CSS Transition Content Slide-In Previews
  2. JQuery CSS Transition Content Slide-In HTML Codes
  3. JQuery CSS Transition Content Slide-In CSS Codes
  4. JQuery CSS Transition Content Slide-In JS Codes

How do I make an jquery css transition content slide-in?

Content slider uses width of container and css transition to display content to left and right of center "main" content.. What is a jquery css transition content slide-in? How do you make a jquery css transition content slide-in? This script and codes were developed by Patrick on 21 November 2022, Monday.

JQuery CSS Transition Content Slide-In Previews
IQ Test

JQuery CSS Transition Content Slide-In - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery CSS Transition Content Slide-In</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <div class="container"> <div class="area1"> <strong>area 1</strong><br> <a href="#" class="close">close</a> </div> <div class="area2"> <a href="#" class="thing1">show area 1</a><a href="#" class="thing2">show area 3</a> </div> <div class="area3"> <strong>area 3</strong><br> <a href="#" class="close">close</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery CSS Transition Content Slide-In - Script Codes CSS Codes

body { margin: 0; font-family: helvetica, sans-serif; } a { display: inline-block; width: 48%; color: #fff; background: rgba(255,255,255,.5); text-decoration: none; padding: 4rem; margin: 1%; box-sizing: border-box; -webkit-transition: all 1s ease; } a:hover { background: rgba(255,255,255,.25); }
.main { position: relative; /*width: 80%;*/ height: 200px; overflow: hidden; background: purple; margin: 50px auto; }
.container { position: absolute; /*left: -200px;*/ width: 350%; overflow: auto; background: lightBlue; -webkit-transition: all .3s; }
.area1,
.area2,
.area3 { float: left; height: 200px; color: rgba(255,255,255,.5); } .area1 { background: salmon; } .area2 { background: orange; } .area3 { background: coral; }

JQuery CSS Transition Content Slide-In - Script Codes JS Codes

$(window).resize(function() { // find out the width of element var elWidth = $('.main').outerWidth(); //alert(docWidth * -1); var area2offset = elWidth * -1; //alert(area2offset); var area3offset = elWidth * 2 *-1; //alert(area3offset); // apply width to .area* $('[class^=area]').width(elWidth); // apply docWidth to initially offset container $('.container').css('left', area2offset); $('.thing1').click(function () { // set area1 "left: 0" $('.container').css('left', 0); }); $('.thing2').click(function () { // set area3 "left: elWidth * 2" $('.container').css('left', area3offset); }); $('.close').click(function () { // reset area2 "left: elWidth" $('.container').css('left', area2offset); });
}).resize();
JQuery CSS Transition Content Slide-In - Script Codes
JQuery CSS Transition Content Slide-In - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 2,362 Kb
Views 20,240
Do you need developer help for JQuery CSS Transition Content Slide-In?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick (hinducows) Script Codes
Name
Fixed Scrolling Backgrounds
Log In Modal
Flat-ish UI Login Element
Sloppy Panels
Simple Button
Item Display
3D Transforms
Menu Overlay
3D Transforms Flip
Flat UI Element
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!