Rift.js
How do I make an rift.js?
Took a few minutes today to write up a little plugin for all your caption-revealing needs. I'd be honored for you to use it, just let me know what you made!. What is a rift.js? How do you make a rift.js? This script and codes were developed by Kyle Foster on 30 August 2022, Tuesday.
Rift.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rift.js</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! */ /* Base plugin styles */
.rift { width: 300px; /* Define width */ height: 300px; /* Define height */ position: relative; overflow: hidden; backface-visibility: hidden;
}
.rift img { width: 100%; height: auto; -webkit-filter: blur(5px); filter: blur(5px);
}
.rift .caption { position: absolute; top: 50%; width: 100%; height: 60px; /* Define caption height */ line-height: 60px; /* Define matched line-height */ margin: -30px 0 0 0; /* Half caption height */ text-align: center; z-index: 0;
}
.rift span[class*="span"] { display: block; width: 100%; height: 50%; overflow: hidden; position: absolute; left: 0; z-index: 1; transform: translate3d(0,0,0); /* Acceleration FTW */ transition: transform .25s; /* Define anim. speed */
}
.rift span.top-span { top: 0; }
.rift span.btm-span { bottom: 0; }
.rift:hover span.top-span { transform: translate(0,-30px); /* Half caption height */
}
.rift:hover > span.btm-span { transform: translate(0,30px); /* Half caption height */
}
/* Non-plugin styles */
body { text-align: center; background: #CCC;
}
.rift { display: inline-block; cursor: pointer; margin: 20px 0 0 20px;
}
.rift .caption { color: #FFF; background: rgba(0, 0, 0, .75);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <figure class="rift"> <img src="http://ecx.images-amazon.com/images/I/517HpPUIsxL.jpg" alt="Era Vulgaris"> <figcaption class="caption">Era Vulgaris</figcaption>
</figure>
<figure class="rift"> <img src="http://ecx.images-amazon.com/images/I/413WE38pDRL.jpg" alt="Like Clockwork"> <figcaption class="caption">Like Clockwork</figcaption>
</figure>
<figure class="rift"> <img src="http://ecx.images-amazon.com/images/I/71Uj7GcOkZL._SL1500_.jpg" alt="Rated R"> <figcaption class="caption">Rated R</figcaption>
</figure>
<figure class="rift"> <img src="http://ecx.images-amazon.com/images/I/51MSV6KQM5L.jpg" alt="Lullabies to Paralyze"> <figcaption class="caption">Lullabies to Paralyze</figcaption>
</figure> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Rift.js - Script Codes CSS Codes
/* Base plugin styles */
.rift { width: 300px; /* Define width */ height: 300px; /* Define height */ position: relative; overflow: hidden; backface-visibility: hidden;
}
.rift img { width: 100%; height: auto; -webkit-filter: blur(5px); filter: blur(5px);
}
.rift .caption { position: absolute; top: 50%; width: 100%; height: 60px; /* Define caption height */ line-height: 60px; /* Define matched line-height */ margin: -30px 0 0 0; /* Half caption height */ text-align: center; z-index: 0;
}
.rift span[class*="span"] { display: block; width: 100%; height: 50%; overflow: hidden; position: absolute; left: 0; z-index: 1; transform: translate3d(0,0,0); /* Acceleration FTW */ transition: transform .25s; /* Define anim. speed */
}
.rift span.top-span { top: 0; }
.rift span.btm-span { bottom: 0; }
.rift:hover span.top-span { transform: translate(0,-30px); /* Half caption height */
}
.rift:hover > span.btm-span { transform: translate(0,30px); /* Half caption height */
}
/* Non-plugin styles */
body { text-align: center; background: #CCC;
}
.rift { display: inline-block; cursor: pointer; margin: 20px 0 0 20px;
}
.rift .caption { color: #FFF; background: rgba(0, 0, 0, .75);
}
Rift.js - Script Codes JS Codes
/** * Rift v1.0.0 * An itsy bitsy image-splitting jQuery plugin * * Licensed under the MIT license. * Copyright 2013 Kyle Foster @hkfoster */
;(function ( $, window, document, undefined ) { $.fn.rift = function () { return this.each(function () { // Vurribles var element = $(this), elemImg = element.find('img'), imgSrc = elemImg.attr('src'); // We be chainin' element .prepend('<span class="top-span"></span>') .append('<span class="btm-span"></span>') .find('span.top-span') .css('background', 'url(' + imgSrc + ') no-repeat center top') .css('background-size', '100%') .parent() .find('span.btm-span') .css('background', 'url(' + imgSrc + ') no-repeat center bottom') .css('background-size', '100%'); }); };
})( jQuery, window, document );
$('.rift').rift();
Developer | Kyle Foster |
Username | hkfoster |
Uploaded | August 30, 2022 |
Rating | 4.5 |
Size | 3,311 Kb |
Views | 36,432 |
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 |
Cattywompus - A Subtle Parallax Banner Plugin | 4,486 Kb |
Askew - A Subtle Parallax Banner Plugin | 5,081 Kb |
Freemason.js | 12,873 Kb |
Rumble on Hover | 150,889 Kb |
Rift.js | 3,311 Kb |
Vanilla FlowType.js | 4,247 Kb |
SVG Circular Scroll Progress Bar | 7,656 Kb |
A Pen by Kyle Foster | 2,404 Kb |
Ken Burns Banner | 3,817 Kb |
Gradual.js | 2,685 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 |
Monochrome Form | AlienPiglet | 3,096 Kb |
Whyutils | LeYvan | 3,752 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Simple Accordion | Wearebold | 3,683 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!