New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blurry-Effect-Interface Project #238
Merged
Merged
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
7d97d74
Added Blurry Effect
gaurav24072002 63cf035
Updated blurry effect files
gaurav24072002 7c2bae0
Added the project details
gaurav24072002 4da686a
Added Blurry_Loading_Interface
gaurav24072002 840b234
Updated script.js
gaurav24072002 8e9f4f9
Merge branch 'main' into main
gaurav24072002 0ec23a7
Removed vertical and horizontal scrollbar
gaurav24072002 b11381b
Uploaded blurry_loading_interface.gif
gaurav24072002 ed6a067
Updated script.js
gaurav24072002 647570e
Merge branch 'main' into main
gaurav24072002 6630d5a
Update script.js
gaurav24072002 12034a4
Merge branch 'main' into main
gaurav24072002 a47cddf
Merge branch 'main' into main
gaurav24072002 d8cdd58
Merge branch 'main' into main
gaurav24072002 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
body{ | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
height: 100vh; | ||
} | ||
|
||
.bg{ | ||
background: url('https://source.unsplash.com/1600x900/?nature,water'); | ||
background-repeat: no-repeat; | ||
background-position-x: center; | ||
background-position-y: center; | ||
position: absolute; | ||
top: -30px; | ||
left: -30px; | ||
/* width: 100vw; | ||
height: 100vh; */ | ||
width: calc(100vw + 60px); | ||
height: calc(100vh + 60px); | ||
z-index: -1; | ||
filter: blur(0px); | ||
transition: filter 0.8s ease; | ||
} | ||
|
||
.loading-text{ | ||
font-size: 50px; | ||
color: rgb(255, 255, 255); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
let loadtext = document.querySelector('.loading-text'); | ||
let bg = document.querySelector('.bg') | ||
|
||
let load = 0; | ||
let int = setInterval(blurring, 50); | ||
|
||
function blurring(){ | ||
load++ | ||
if(load > 99){ | ||
clearInterval(int); | ||
|
||
} | ||
loadtext.innerHTML = `${load}%` | ||
loadtext.style.opacity = `${1-load/100}` | ||
bg.style.filter = `blur(${30-(load/100)*30}px)` | ||
} | ||
// This project is based on the starter page of any website which is a Blurry effect with a countdown from 0% to 100%. | ||
// The structure is made from blurry_loading_interface.html file. | ||
// To butify The project we use the blurry_loading_interface.css file. | ||
// The main brain of the body that is how will the opacity change from 100% to 0% is written under this javascript file that is blurry_loading_interface.js file. | ||
// You can use this repository to add a starter page to your website and showcase it to your friends or for company basis as well. | ||
// Thank you guys for viewing this project... | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Blurry Loading</title> | ||
<link rel="stylesheet" href="../assets/css/blurry_loading_interface.css"> | ||
</head> | ||
<body> | ||
<div class="bg"> | ||
|
||
</div> | ||
<div class="loading-text">0 %</div> | ||
<script src="../assets/js/blurry_loading_interface.js"></script> | ||
</body> | ||
</html> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please tell me if I need to add more details to it or not like telling how the code base works and all that stuffs...