Slide in from bottom boxes
How do I make an slide in from bottom boxes?
Saw this while using Google+ app on my (Android) Nexus 7.. What is a slide in from bottom boxes? How do you make a slide in from bottom boxes? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.
Slide in from bottom boxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide in from bottom boxes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
section { background: #eee; max-width: 600px; margin: 0 auto; padding: 20px; overflow: hidden;
}
.module { width: 48%; min-height: 200px; background: white; position: relative; float: left; padding: 20px; margin-right: 4%; margin-bottom: 4%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) { margin-right: 0;
}
body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg); background-size: cover; padding: 30px;
}
.come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) { animation-duration: 0.6s;
}
.already-visible { transform: translateY(0); animation: none;
}
@keyframes come-in { to { transform: translateY(0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slide in from bottom boxes - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
section { background: #eee; max-width: 600px; margin: 0 auto; padding: 20px; overflow: hidden;
}
.module { width: 48%; min-height: 200px; background: white; position: relative; float: left; padding: 20px; margin-right: 4%; margin-bottom: 4%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) { margin-right: 0;
}
body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg); background-size: cover; padding: 30px;
}
.come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) { animation-duration: 0.6s;
}
.already-visible { transform: translateY(0); animation: none;
}
@keyframes come-in { to { transform: translateY(0); }
}
Slide in from bottom boxes - Script Codes JS Codes
(function($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); };
})(jQuery);
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); }
});
win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } });
});
Developer | Chris Coyier |
Username | chriscoyier |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 3,581 Kb |
Views | 48,576 |
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 |
Merging Flexbox Syntaxes | 2,654 Kb |
Play Button for YouTube | 2,975 Kb |
Basic Example of SVG Line Drawing, Backward and Forward | 2,051 Kb |
Bar Navigation with Flexbox and SVG icons | 5,995 Kb |
Pull Quote from NY Post | 4,622 Kb |
Data on Performance Culture | 1,948 Kb |
JQuery and CoffeeScript | 3,185 Kb |
Smooth Page Scrolling in jQuery | 2,813 Kb |
SVG with Filters | 3,185 Kb |
Simple Flexbox Responsive Nav | 2,818 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 |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Apple website | Jds317 | 1,835 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Menu | Vivi_Lai | 1,210 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 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!