Full Page 3D Effect Search

Size
4,753 Kb
Views
16,192

How do I make an full page 3d effect search?

Click on the fixed position search icon to rotate the page content out and bring in the search box.. What is a full page 3d effect search? How do you make a full page 3d effect search? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

Full Page 3D Effect Search Previews

Full Page 3D Effect Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Page 3D Effect Search</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> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="page-wrap">
<div id="hero"> <h1>hello</h1>
</div>
<div class="container"> <div class="left-body-column"> <h2>Text</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="right-aside-column"> <h2>Aside</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </div>
</div>
<footer> <div class="container"> &copy; someday, somebody </div>
</footer>
</div>
<div id="search-launcher"> <i class="fa fa-search"></i>
</div>
</div>
<div id="search-box"> <form> <input type="text" /> <button type="submit">search</button> </form>
<div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full Page 3D Effect Search - Script Codes CSS Codes

/* Intentionall long time to highlight effect */
@import url(https://fonts.googleapis.com/css?family=Bitter:700);
* { margin: 0; padding: 0; box-sizing: border-box;
}
html, body { height: 100%; width: 100%; position: relative;
}
body { font-size: 24px; line-height: 140%; color: #121013;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Bitter', serif; font-weight: 700; margin: 24px 0; color: #121013;
}
#page-wrap { -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center right; -moz-transform-origin: center right; -ms-transform-origin: center right; -o-transform-origin: center right; transform-origin: center right; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#page-wrap.flipped { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg);
}
#hero { background-image: url(https://31.media.tumblr.com/ba7758a52675589e05dc931572be9688/tumblr_n7ygur3NV91st5lhmo1_1280.jpg); width: 100%; height: 350px; background-size: cover; background-position: bottom left; background-origin: 200px 0;
}
#hero h1 { color: rgba(242, 242, 242, 0.8); text-align: center; margin: 0; padding-top: 100px; font-size: 92px;
}
.container { width: 960px; margin: 0 auto;
}
.container::after { clear: both; content: ""; display: table;
}
.container div { float: left; padding: 48px 20px;
}
.left-body-column { width: 65%; margin-right: 5%;
}
.right-aside-column { width: 30%;
}
footer { background: #121013;
}
footer .container { color: #666; padding: 48px 0;
}
#search-launcher { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; cursor: pointer; position: fixed; bottom: 40px; right: 40px; background: rgba(0, 0, 0, 0.8); width: 40px; height: 40px; text-align: center;
}
#search-launcher:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);
}
#search-launcher i { color: #FFF; font-size: 24px; line-height: 40px;
}
#search-box { -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center left; -moz-transform-origin: center left; -ms-transform-origin: center left; -o-transform-origin: center left; transform-origin: center left; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: fixed; top: 0; left: 0; height: 100%; width: 0; background: #121013;
}
#search-box.flipped { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); width: 100%;
}
#search-box form { position: absolute; left: 10%; top: 50%; width: 80%;
}
#search-box form:hover input, #search-box form:hover button { border-color: #204d68;
}
#search-box form:hover button { background: #204d68;
}
#search-box input { border: 0; border: 5px solid #143041; color: #121013; display: inline-block; width: 70%; height: 80px; outline: 0; font-size: 36px; vertical-align: bottom; padding: 10px; font-family: 'Bitter', serif; font-weight: 700;
}
#search-box button { display: inline-block; border: 0; width: 30%; margin-left: -6px; height: 80px; background: #143041; font-size: 36px; color: #F2F2F2; font-family: 'Bitter', serif; font-weight: 700;
}

Full Page 3D Effect Search - Script Codes JS Codes

var $searchBox = $('#search-box');
var $pageWrap = $('#page-wrap');
$("#search-launcher").on('click', function(){ $("#search-box").addClass("flipped"); $("#page-wrap").addClass("flipped"); $("#search-box").find("input").focus();
});
$searchBox.on('click', function(){ $searchBox.removeClass('flipped'); $pageWrap.removeClass('flipped');
});
/* * If you wanted to have the search actually * ... you know, search, you would wire * that up here. */
$searchBox.find('form').on('submit', function(e){ e.preventDefault(); $searchBox.removeClass('flipped'); $pageWrap.removeClass('flipped');
});
Full Page 3D Effect Search - Script Codes
Full Page 3D Effect Search - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 3
Size 4,753 Kb
Views 16,192
Do you need developer help for Full Page 3D Effect Search?

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!

Joseph Martucci (jjmartucci) Script Codes
Create amazing art & images 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!