Slidey things

Developer
Casey Zumwalt
Size
3,011 Kb
Views
20,240
  1. Slidey things Previews
  2. Slidey things HTML Codes
  3. Slidey things CSS Codes
  4. Slidey things JS Codes

How do I make an slidey things?

What is a slidey things? How do you make a slidey things? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.

Slidey things Previews
IQ Test

Slidey things - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slidey things</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="left"> <div class="image"></div> </div> <div class="right"> <div class="image"></div> </div> <div class="content"> <h1>It slides.</h1> </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>

Slidey things - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);
.container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ff0;
}
.left,
.right { position: absolute; top: 0; height: 100%; width: 70%; overflow: hidden;
}
.left .image,
.right .image { background-size: cover; position: absolute; top: 0; left: -10%; width: 110%; height: 100%;
}
.left .image:after,
.right .image:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(85, 85, 85, 0.55);
}
.left { background: #1abc9c; left: 0;
}
.left .image { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/5457084450_e15b8d2ac1_o.jpg); background-position: left center;
}
.left:hover + .right { width: calc(35% + 10em);
}
.right { background: #34495e; right: -5em; -webkit-transform: skew(-5deg); transform: skew(-5deg); width: calc(45% + 10em); -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
.right .image { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/5456985992_337724a131_o.jpg); background-position: right center; -webkit-transform: skew(5deg); transform: skew(5deg);
}
.right:hover { width: calc(55% + 10em);
}
.content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; -webkit-transition: opacity 2s ease; transition: opacity 2s ease;
}
.content.visible { opacity: 1;
}
.content h1 { color: white; font-family: "roboto condensed"; font-size: 4em; font-weight: 300; text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

Slidey things - Script Codes JS Codes

$(function(){ setTimeout(function(){ $('.content').addClass('visible'); }, 500);
});
Slidey things - Script Codes
Slidey things - Script Codes
Home Page Home
Developer Casey Zumwalt
Username zumwalt
Uploaded November 07, 2022
Rating 3
Size 3,011 Kb
Views 20,240
Do you need developer help for Slidey things?

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!

Casey Zumwalt (zumwalt) Script Codes
Name
Interactive pixel logo
Video tiles
Pulsing loader
Vignette - Pure CSS Illustration
Pure CSS loading animation
Simple.com style modal window
Nicer looking native select element
Animate in bugs
Pure CSS Minimal Toggle Button
Animated Robot
Create amazing Facebook ads 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!