Rift.js

Developer
Kyle Foster
Size
3,311 Kb
Views
36,432
  1. Rift.js Previews
  2. Rift.js HTML Codes
  3. Rift.js CSS Codes
  4. Rift.js JS Codes

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 Previews
IQ Test

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();
Rift.js - Script Codes
Rift.js - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded August 30, 2022
Rating 4.5
Size 3,311 Kb
Views 36,432
Do you need developer help for Rift.js?

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!

Kyle Foster (hkfoster) Script Codes
Name
Colored Single-Element Sections
SVG Optimization Breakdown
Ken Burns Banner
Vanilla Flavored Unorphanize
Messing Around with CSS3 Shadows
Slimslider.js
Vanilla FlowType.js
Freemason.js
Super Simple Fader
Rumble on Hover
Create amazing blog posts 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!