Sliding Lines Animation
How do I make an sliding lines animation?
Some lines sliding in from the corners, for a modal background animation. Using jQuery transit.. What is a sliding lines animation? How do you make a sliding lines animation? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.
Sliding Lines Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Lines Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div class="bottom"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sliding Lines Animation - Script Codes CSS Codes
html, body { height: 100%;
}
.top, .bottom { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
}
.top ul, .bottom ul { width: 100%; height: 100%; overflow: hidden;
}
.top ul li, .bottom ul li { height: 100%; width: 1%; float: left;
}
.top { -webkit-transform: rotate(45deg) scale(2.5) translateY(-100%); transform: rotate(45deg) scale(2.5) translateY(-100%);
}
.top ul li:nth-child(odd) { background: #00A388;
}
.bottom { -webkit-transform: rotate(45deg) scale(2.5) translateY(100%); transform: rotate(45deg) scale(2.5) translateY(100%);
}
.bottom ul li:nth-child(even) { background: #79BD8F;
}
Sliding Lines Animation - Script Codes JS Codes
var $top = $('.top'), $bottom = $('.bottom'), animationTime = 3000;
$top.transition({ rotate: '45deg', scale: '2.5', y: '0px'
}, animationTime)
$bottom.transition({ rotate: '45deg', scale: '2.5', y: '0px'
}, animationTime)
Developer | Adam Grayson |
Username | agrayson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,572 Kb |
Views | 12,144 |
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!
Name | Size |
Playing Animations on Scroll | 19,876 Kb |
Dynamic circle menus with SASS | 3,928 Kb |
Drag and Drop File Preview | 3,444 Kb |
Spinning Circles | 3,581 Kb |
Responsive Carousel | 3,291 Kb |
Multi-Column Responsive Carousel | 5,686 Kb |
RPG Cooldown | 2,902 Kb |
Custom Select Element | 3,616 Kb |
Circle Progression Plugin | 2,612 Kb |
Random Weapon Generator | 4,209 Kb |
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!
Name | Username | Size |
CSS Infinite 360 | APinix | 5,564 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!