Blurred Scrollable Overlay

Developer
Gianluca Guarini
Size
3,413 Kb
Views
46,552
  1. Blurred Scrollable Overlay Previews
  2. Blurred Scrollable Overlay HTML Codes
  3. Blurred Scrollable Overlay CSS Codes
  4. Blurred Scrollable Overlay JS Codes

How do I make an blurred scrollable overlay?

An impressive demo made with Vague.js. What is a blurred scrollable overlay? How do you make a blurred scrollable overlay? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Blurred Scrollable Overlay Previews
IQ Test

Blurred Scrollable Overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blurred Scrollable Overlay</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> <!-- * Replace the iframes src attribute to test the same effect on other websites * * ;) *
-->
<div class="main">	<iframe height="3000" frameborder="0" scrolling="no" src="//www.ubuntu.com"></iframe>	</div>	<div class="blurred">	<iframe height="3000" frameborder="0" scrolling="no" src="//www.ubuntu.com"></iframe>	<p>Vague.js</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/GianlucaGuarini/vague.js/master/Vague.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blurred Scrollable Overlay - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Satisfy);
iframe { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; /* fix for the stupid safari */ -webkit-transform: translate3d(0, 0, 0);
}
iframe.main { position: absolute; height: 100%; width: 100%;
}
.blurred { box-shadow: 0 5px 50px rgba(0, 0, 0, 0.4); overflow: hidden; position: fixed; bottom: -10px; left: 0; height: 200px; width: 100%;
}
.blurred p { font-family: 'Satisfy', cursive; position: absolute; top: 50px; width: 100%; color: white; text-align: center; text-shadow: 1px 1px 2px black; font-size: 70px;
}

Blurred Scrollable Overlay - Script Codes JS Codes

/**
*
* Author: Gianluca Guarini
* Contact: [email protected]
* Website: http://www.gianlucaguarini.com/
* Twitter: @gianlucaguarini
* https://gianlucaguarini.github.io/vague.js/
*
* Copyright (c) 2013 Gianluca Guarini
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
var $window = $(window), $main = $('.mainIframe'); $blurred = $('.blurred');
var vague = $blurred.find('iframe').Vague({ intensity:5 //blur intensity
});
vague.blur();
var scrollIframe = function () { $blurred.find('iframe').css({ top: -$blurred.offset().top });
};
$window.on('scroll',scrollIframe);
scrollIframe();
Blurred Scrollable Overlay - Script Codes
Blurred Scrollable Overlay - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 4.5
Size 3,413 Kb
Views 46,552
Do you need developer help for Blurred Scrollable Overlay?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
Drunk on Google Maps
The Dark Loop
Css3D Wall
Appletv
The Milk Glass
Full screen menu
CSS3 Breathing Particles
A Pen by Gianluca Guarini
3D Box-shadow
Riot and es6
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!