I am trying to create a paper-folding effect through CSS and Javascript like it has to interact with the mouse but I tried to do this but didn't figure it out. And I also surfed on the internet but there is no trace of how to do this. The effect must be like this Netrix Digital.
So can anyone tell me how to do this and if you paste the answer please make sure to explain it.
Here is my code
body {
background-color: #ccc;
text-align: center;
margin-top: 100px;
}
.bgcolor {
background-color: black;
color: rgba(255, 255, 255, 0.8);
}
.fold{
width:500px;
height: 350px;
background: #eee;
margin: 0 auto;
}
.fold h1{
line-height:350px;
font-family: sans-serif;
}
<!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>Document</title>
</head>
<body>
<div class="fold">
<h1>Folding effect</h1>
</div>
</body>
</html>
Thanks for helping in advance :)
Hope this helps ->
CodePen Link to Paper Folding Effect
HTML ->
<div class="fold"></div>
CSS ->
body {
background: #344;
padding: 25px
}
/* paper */
.fold {
postion: relative;
height: 200px;
padding: 25px;
background: #fff
}
/* folding */
.fold::before {
content:"";
position: absolute;
top: 32px;
right: 32px;
border-style: solid;
border-width: 0 100px 100px 0;
border-color: #ddd #344;
transition: all ease 0.5s;
}
.fold:hover::before {
border-width: 0 150px 150px 0;
border-color: #eee #344
}
Related
Please how can make a search box that on click on the search icon should open another page for the search box Facebook search bar. Thanks in advance.
I tried to create it using HTML and CSS only
here the result:
body {
margin: 0;
}
nav {
background-color: rgba(0, 0, 255, 0.172);
border-bottom: 1px solid blue;
padding: 0.5em 0;
display: grid;
place-items: center;
}
nav input[type="text"] {
font-size: 1.5em;
border-radius: 2em;
border: none;
color: white;
width: 1.5em;
transition-duration: 0.5s;
}
nav input[type="text"]:hover,
nav input[type="text"]:focus {
width: calc(90vw - 2em);
color: rgb(0, 51, 255);
border-radius: 0.2em;
transition-duration: 1s;
padding: 0 2em 0 0;
}
input[type="text"]:hover~svg,
input[type="text"]:focus~svg {
right: 10px;
}
nav #content {
display: grid;
grid-auto-flow: column;
place-items: center;
}
#content svg {
width: 1.5em;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
z-index: 1;
}
#content {
position: relative;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div id="content">
<input type="text">
<!--search icon-->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z" class="style-scope yt-icon"></path></g></svg>
</div>
</nav>
</body>
</html>
Auxiliary line
How to draw the blue dashed reference lines with css like the one in firefox development?
I finally build references line like this : to make the parent div's top,left, width,height variables, and calc them to lines.
<!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>Document</title>
<style>
body {
margin: 0;
}
:root {
--left: 30px;
--top: 20px;
--width: 100px;
--height: 60px;
}
.mydiv {
width: var(--width);
height: var(--height);
left: var(--left);
top: var(--top);
position: relative;
background-color: black;
}
.up {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
line-height: 1px;
width: 100vw;
}
.down {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
top: var(--height);
width: 100vw;
}
.left {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
height: 100vh;
}
.right {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
left: var(--width);
height: 100vh;
}
.v-line {
position: absolute;
}
</style>
</head>
<body>
<div class="mydiv">
<span class="v-line up"></span>
<span class="v-line down"></span>
<span class="v-line left"></span>
<span class="v-line right"></span>
</div>
</body>
</html>
If you have more good idea pleace leave your answer.
The vertical scroll bar has become inactive. The strange thing about this code is that it is running fine from where I copied it but for me, the scrollbar is there but it is not clickable(it is more like transparent). I can move it with the arrow keys but not with the mouse. Why is this so?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/a54d2cbf95.js"></script>
<link rel="stylesheet" href="style.css">
<title>Back To Top</title>
</head>
<style>
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
</style>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script >
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
</script>
</body>
</html>
To make the scrollbar active is my main problem. I am actually trying to change the style of the scroll bar
I'll be very grateful if you fix my code. All I want is to be able to scroll with my mouse.
I tried a couple of things but it didn't help.
thank you
Instead of trying to fixed current code try to create a new scroll bar..scroll bar code is given below ...
just copy past it customize it and enjoy
/**************** scroll bar *******************/
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
background-image: -webkit-linear-gradient(160deg, rgb(68, 67, 67),rgb(129, 127, 127), rgb(68, 67, 67));
}
/**************** /scroll bar ********************/
I think it's because overflow-y: auto;
It should be scroll or visible
The arrow icon problem is with your fontawesome kit. You can look into that otherwise you can use fontawesome cdn. I added some css for scrollbar now It will work perfectly fine.
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<title>Document</title>
</head>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
</body>
</html>
My goal is to animate the addition/removal of a class in real time depending on the scroll position. In this Fiddle the red box with the blue border changes to the yellow box with the purple border when the scroll bar reaches the bottom of the page. I like that but what I want to happen is for that transition to be linked to the scroll position and to happen in real time as the scroll bar is moved down. So it will be a fade effect whose speed and position is determined by the scroll bar position. How does one do this? I would appreciate any help. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST SITE ONE</title>
<meta name="description" content="Test Site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
display: block;
}
.box1{
position: fixed;
height: 100vh;
width: 100vw;
max-width: 100%;
background-color: red;
border: 2vw solid blue;
}
.box1add{
background-color: gold;
border: 2vw solid purple;
}
.box2{
position: absolute;
height: 200vh;
width: 25vw;
background-color: orange;
border: 2vw solid green;
margin-left: 37.5vw;
margin-right: 37.5vw;
}
</style>
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= $(window).height()) {
//console.log('a');
$(".box1").addClass("box1add");
} else {
//console.log('a');
$(".box1").removeClass("box1add");
}
});
</script>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
I want auto-adjust and auto-center a div of one game that I am working (HTML5), I have tried some css combinations, the perfect combination is it:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This centers the game great on all moment, but I cant click after use the "centered" class, I dont know whats the problem and its difficult find a solution searching on the net, anybody can help me with this?
The main .html file (with style and js) is there:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta charset="utf-8"/>
<!-- Set the title bar of the page -->
<title></title>
<!-- Set the background colour of the document -->
<style>
body {
background: #000000;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
-ms-touch-action: none;
margin: 0px;
padding: 0px;
border: 0px;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class
{
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login
{
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
float: right;
}
div.gm4html5_login_button
{
float: left;
}
div.gm4html5_login_header
{
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="gm4html5_div_class centered" id="gm4html5_div_id">
<img src="html5game/splash.png" id="GM4HTML5_loadingscreen" alt="Loading screen" style="display:none;"/>
<!-- Create the canvas element the game draws to -->
<canvas id="canvas" width="1024" height="600">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
</div>
<!-- Run the game code -->
<script type="text/javascript" src="html5game/SaveTheCity.js?LGLZB=1822663509"></script>
</body>