Screens

Developer
Bryan Jones
Size
5,328 Kb
Views
52,624
  1. Screens Previews
  2. Screens HTML Codes
  3. Screens CSS Codes
  4. Screens JS Codes

How do I make an screens?

An example of a few different screen effects you can use to overlay images. Uses a simple scroll image menu for quick navigation.. What is a screens? How do you make a screens? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Screens Previews
IQ Test

Screens - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Screens</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="screen-toggle">Hide Screen</div>
<div id="screen-selector"> <div id="screen-selector-1" data-href="#screen-wrapper-1" class="selector"></div> <div id="screen-selector-2" data-href="#screen-wrapper-2" class="selector"></div> <div id="screen-selector-3" data-href="#screen-wrapper-3" class="selector"></div> <div id="screen-selector-4" data-href="#screen-wrapper-4" class="selector"></div>
</div>
<div id="screen-wrapper-1" class="screen-wrapper"> <div class="image"></div> <div class="screen"></div>
</div>
<div class="separater"></div>
<div id="screen-wrapper-2" class="screen-wrapper"> <div class="image"></div> <div class="screen"></div>
</div>
<div class="separater"></div>
<div id="screen-wrapper-3" class="screen-wrapper"> <div class="image"></div> <div class="screen"></div>
</div>
<div class="separater"></div>
<div id="screen-wrapper-4" class="screen-wrapper"> <div class="image"></div> <div class="screen"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Screens - Script Codes CSS Codes

/** * @file * Styling. */
html,
body { margin: 0; overflow-x: hidden;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#screen-toggle { background-color: rgba(0, 0, 0, 0.7); user-select: none; position: fixed; border: 1px solid #0bcdff; border-radius: 8px; color: #0bcdff; cursor: pointer; clear: both; display: block; font-size: 150%; left: 20px; padding: 10px 20px; text-align: center; text-decoration: none; top: 20px; transition: all 500ms linear; width: auto; z-index: 5;
}
#screen-toggle::after { background-color: rgba(255, 255, 255, 0.4); content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: none; width: 0;
}
#screen-toggle:hover { background-color: rgba(0, 130, 164, 0.8); box-shadow: 0 0 10px 0 #0bcdff; color: #fff; text-decoration: none;
}
#screen-toggle:hover::after { background-color: rgba(255, 255, 255, 0); transition: all 300ms ease-out; width: 100%;
}
#screen-selector { background-color: #0f0; border: 1px solid #0bcdff; height: calc(60vh + 2px); max-height: calc(100vw - 40px); max-width: 200px; min-height: 282px; min-width: 122px; position: fixed; right: 20px; top: 20px; width: calc(20vw + 2px); z-index: 5;
}
.selector { background-color: #000; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; border-bottom: 1px dashed #0bcdff; cursor: pointer; height: 25%; max-height: calc(25vw - 2px); min-height: 70px; position: relative; width: 100%; -moz-transition: filter 0.4s linear; -o-transition: filter 0.4s linear; -webkit-transition: filter 0.4s linear; transition: filter 0.4s linear;
}
.selector:last-child { border-bottom: none;
}
.selector:hover { -webkit-filter: sepia(100%); filter: sepia(100%);
}
.screen-wrapper { display: block; height: 100vh; width: 100vw;
}
.separater { background-color: #999999; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF666666', endColorstr='#FFE5E5E5'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNhNmE2YTYiLz48c3RvcCBvZmZzZXQ9IjIyJSIgc3RvcC1jb2xvcj0iI2E2YTZhNiIvPjxzdG9wIG9mZnNldD0iMjYlIiBzdG9wLWNvbG9yPSIjN2Y3ZjdmIi8+PHN0b3Agb2Zmc2V0PSI4OCUiIHN0b3AtY29sb3I9IiNiNWI1YjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NTU1NTUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(8%, #a6a6a6), color-stop(22%, #a6a6a6), color-stop(26%, #7f7f7f), color-stop(88%, #b5b5b5), color-stop(100%, #555555)); background-image: -moz-linear-gradient(top, #666666 0%, #a6a6a6 8%, #a6a6a6 22%, #7f7f7f 26%, #b5b5b5 88%, #555555 100%); background-image: -webkit-linear-gradient(top, #666666 0%, #a6a6a6 8%, #a6a6a6 22%, #7f7f7f 26%, #b5b5b5 88%, #555555 100%); background-image: linear-gradient(to bottom, #666666 0%, #a6a6a6 8%, #a6a6a6 22%, #7f7f7f 26%, #b5b5b5 88%, #555555 100%); height: 40px; width: 100%;
}
.screen { background-position: center center; display: block; min-height: 100%; position: absolute; width: 100%;
}
.image { background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 100%; position: absolute; width: 100%;
}
#screen-wrapper-1 .screen { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.6))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6)); background-size: 100% .5vh;
}
#screen-wrapper-1 .image { background-image: url("http://bryanjones.us/sites/default/files/space/space.jpg");
}
#screen-selector-1 { background-image: url("http://bryanjones.us/sites/default/files/space/space.jpg");
}
#screen-wrapper-2 .screen { background: linear-gradient(315deg, rgba(0, 0, 0, 0) 75%, rgba(255, 255, 255, 0) 0%) -5px 0, linear-gradient(45deg, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 0%) -5px 0, linear-gradient(135deg, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0) 0%) 0 0, linear-gradient(45deg, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 0%) 0 0 rgba(0, 0, 0, 0.2); background-size: 10px 10px;
}
#screen-wrapper-2 .image { background-image: url("http://bryanjones.us/sites/default/files/subway3.jpg");
}
#screen-selector-2 { background-image: url("http://bryanjones.us/sites/default/files/subway3.jpg");
}
#screen-wrapper-3 .screen { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.5) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.5) 75%); background-size: 4px 2px, 4px 2px, 100% 100%; background-position: 0px 0px, 2px 2px, 0px 0px;
}
#screen-wrapper-3 .image { background-image: url("http://bryanjones.us/sites/default/files/Whiskey3.png");
}
#screen-selector-3 { background-image: url("http://bryanjones.us/sites/default/files/Whiskey3.png");
}
#screen-wrapper-4 .screen { background-image: -moz-repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 10px, rgba(0, 0, 0, 0.2) 20px, rgba(0, 0, 0, 0.6) 20px); background-image: -webkit-repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 10px, rgba(0, 0, 0, 0.2) 20px, rgba(0, 0, 0, 0.6) 20px); background-image: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 10px, rgba(0, 0, 0, 0.2) 20px, rgba(0, 0, 0, 0.6) 20px); background-size: 0.8em 0.8em;
}
#screen-wrapper-4 .image { background-image: url("http://bryanjones.us/sites/default/files/corridor2.png");
}
#screen-selector-4 { background-image: url("http://bryanjones.us/sites/default/files/corridor2.png");
}

Screens - Script Codes JS Codes

/** * @file * Control page navigation and screen toggling. */
$(document).ready(function() { // Toggle the screen effect. $('#screen-toggle').unbind('click'); $('#screen-toggle').click(function() { $('.screen').toggle(); // Replace the text to hide/show screen. if ($('#screen-toggle').text() == "Hide Screen") { $('#screen-toggle').text('Show Screen'); } else { $('#screen-toggle').text('Hide Screen'); } }); // Scroll when a navigation image is clicked. $('.selector').click(function() { var anchor = $(this).attr('data-href'); anchor = $(anchor).offset().top; $('body, html').animate({scrollTop : anchor + 'px' }, 'slow'); return false; });
});
Screens - Script Codes
Screens - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 4
Size 5,328 Kb
Views 52,624
Do you need developer help for Screens?

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!

Bryan Jones (bartuc) Script Codes
Name
Cabin
Reflections
Solar System Maker
Particles
Lightbulb
Galaxy
Universe Zoom
Gravity
Light Switch
3D Saturn
Create amazing captions 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!