I'm trying to apply CSS transform property to two elements(Parent and child) But the problem is when i adding transform to parent then it affects child positioning.
An Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: 100%;
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>
When you add transform: translateY(0); to the topbar (Parent) then notifications panel(Child) positioning based on parent. I'm trying to prevent this behavior.
For smoother animations, I've used transform, of course, we can use CSS top. Any suggestion? Thank you for devoting your time.
You could set the height of .dropdown in viewport units (100vh - the height of the topbar)
Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: calc(100vh - 45px);
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>
Related
i use firefox as default browser and i never had problem with animations and css in general everything worked fine, but i noticed that in chrome if i have hover effect that has more than one animation, in chrome animations happen in order instead of simultaneously. how can i fix that problem? also the input slider i tried to make it vertical ( works fine in firefox but in chrome it doesn't work at all.
here is the github pages of the page
* {
box-sizing: border-box;
user-select: none;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #bf42f5;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
canvas {
opacity: 0;
touch-action: none;
animation: fade-in 1s ease 0.5s forwards;
}
.nav{
position: fixed;
opacity: 1;
z-index: 10;
top: 0px;
left: 0px;
min-width: 100%;
}
.nav-list{
list-style: none;
font-size: 1.6rem;
font-family: 'Courier New', Courier, monospace;
color: #f0f0f0;
display: flex;
justify-content: center;
padding: 0;
}
.nav-list>li{
padding-right: 10px;
opacity: 0.8;
}
.nav-list>li:hover{
transition: all 0.4s ease;
opacity: 1;
cursor: pointer;
scale: 1.11;
padding-bottom: 100px;
}
#media (max-width:480px) {
.nav-list{
flex-direction: column;
align-items: flex-end;
/* transform: translateX(1000px); */
}
.nav-list>li{
padding-left: 5px;
}
.nav-list>li:hover{
padding-top:5px;
padding-bottom:5px;
padding-left: 15px;
scale: 1.05;
}
}
/*slider*/
.boring-text{
position: fixed;
left: 5%;
top: 25%;
}
.boring-text>h1{
font-size: clamp(2rem, 10vw, 5rem);
font-family: 'Sono', sans-serif;
color: #ffffff9a;
pointer-events: none;
font-weight: 200;
max-width: 5ch;
}
.boring-text>h3{
font-family: 'Marhey', cursive;
color: #ffffff92;
position: fixed;
right: 10px;
bottom: 5%;
}
.boring-text>h4{
font-family: 'Sono', sans-serif;
color: #ffffffba;
}
.slider-wrapper{
position: fixed;
right: 20px;
bottom: 10%;
}
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
-webkit-appearance: none;
width: 5px;
height: 255px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
/*slider*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Marhey:wght#300;400&family=Sono:wght#200;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>LandingPAGE</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class='nav'>
<div class='nav-wrapper'>
<ul class='nav-list'>
<li>Shop</li>
<li>Work</li>
<li>
apple{/* <FontAwesomeIcon icon="apple" /> */}
</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class='boring-text'>
<h1> boring landing pages</h1>
<h3> phones: {val}</h3>
<h4> React - Three</h4>
<div class='slider-wrapper'>
<input type="range" orient="vertical" min="1" max="50" value='10' class='slider' />
</div>
</div>
</div>
</body>
</html>
About the slider you can check this answer, it may help you.
About the animations I'm waiting for further information as I reproduce it on your snippet I'm seeing it working well and concurrently.
I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
-> please update css into your css file
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
overflow: hidden;
transition: transform .2s;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
Use a background-image:inherit on the inner div and leverage background-size on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
width: 860px;
height: 480px;
background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
;
}
.zoomer {
width: 80%;
height: 80%;
background: inherit;
border: 3px solid blue;
background-size: 125% 125%;
transition: background-size .5s ease;
background-position: center center;
}
.zoomer:hover {
background-size: 150% 150%;
}
<div class="map">
<div class="zoomer"></div>
</div>
I have a overlay problem. I would like to show a text if my overlay is on. If the user clicks then the overlay should go off and the body content should be seen.
But how can I make a text or a picture over the overlay?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
-webkit-filter:blur(4px);
filter:blur(4px);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
Basically, you just need to change the color of the overlay text to make it visible. But then you have the problem that blur will also apply to your child elements and the text is not readable.
In order to make it work you need to create a child element which holds the blur to make sure it does not apply to the overlay text.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#blur {
width: 100%;
height: 100%;
-webkit-filter:blur(4px);
filter:blur(4px);
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="background"></div>
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
Is there any way to add line spinner (from spin.js - https://spin.js.org) using plain css animation without using javascript (example: https://www.w3schools.com/howto/howto_css_loader.asp)?
Yes, you can, thanks for this article: click to see
For simpliest understanding, here is code snippet:
/**
* (C)Leanest CSS spinner ever
*/
#keyframes spin {
to { transform: rotate(1turn); }
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
transform: rotate(-135deg);
background: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="progress"><div>Loading…</div></div>
</body>
</html>
And jsFiddle
I'm using some (seemingly) basic css inside of a bootstrap frame, and for some reason once I placed my code into bootstrap it started spazzing out and not displaying images or transforming.
If you go here on Chrome/FF/(Even IE) you can see the images load and transform on mouseover. If you load it up on Safari though it just sits there and only displays what should be the back of the card.
I've been tearing my hair out about this for hours, any advice would be greatly appreciated!
Thanks :)
My code is:
<!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">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dickshit.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="f2_container">
<div id="f2_card" class="shadow">
<div class="front face">
<img src="/cardbacks/default.png" height="359" width="241"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS is:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
}
You are using some CSS that is "not supported" by Safari. What you need to do to fix the problem is to add -webkit- in front of some of them (as specified in the W3schools pages linked below):
transform (http://www.w3schools.com/css/css3_2dtransforms.asp)
transform-style (http://www.w3schools.com/cssref/css3_pr_transform-style.asp)
transition (http://www.w3schools.com/css/css3_transitions.asp)
perspective (http://www.w3schools.com/cssref/css3_pr_perspective.asp)
backface-visibility (http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp)
Once you add the extra code in for those styles, the result will look fine in Safari too (I tested in Safari 5.1.7), and the CSS will be like this:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000px;
-webkit-perspective:1000px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
try adding
.face {-webkit-backface-visibility: hidden; backface-visibility: hidden;}