Just as a quick overview - I have purchased a theme for WordPress that has custom in-built animations for it's main menu (starts off large and transparent, and then on scroll, it becomes thinner with a solid colour background).
I've been trying for the past few days to simply set the scroll menu as the permanent menu and get rid of the animation, but I'm not having all that much luck with it, so any help would be really appreciated.
Css:
/* 2. Header
===============================================================*/
.wsmenucontainer header.topheader {
background: #222;
}
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.wsmenucontainer header.topheader .header-image {
background: #222;
height: 100%;
left: 0;
opacity: 1;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
header.topheader.scroll {
background: #222;
padding: 0;
}
header.topheader.scroll .header-image img {
opacity: 0;
}
.noHeadImage header.topheader {
padding: 1rem 0;
background:transparent;
}
.noHeadImage .header-image {
display:none;
}
.noHeadImage header.topheader.scroll {
background: #222;
padding: 0;
}
main section {
padding: 8rem 0;
}
main section#single-class{
padding: 0;
}
Jordy i help you, can you provide a Theme preview link?
You can either remove or comment transition css. Hope it gelps
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
//comment this area to remove transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
//comment this area to remove image transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
To fix it, you can add a custom css in your theme (css custom area) or via plugin (https://it.wordpress.org/plugins/wp-add-custom-css/)
Your custom code:
.wsmenucontainer header.topheader{
transition: none; */
-moz-transition: none;
/* -webkit-transition: none; */
-o-transition: none;
}
Related
I'm trying to make it zoom in from center rather than from top-left corner.
I've tried transform: scale(2,2), and transform: translateX(-25%) translateY(-25%), as per here, neither seem to do anything at all.
Is there any alternative to scale? It doesn't seem to be working in Chrome.
Maybe it has something to do with the container that it's in? I'm not sure. I tried changing the top and left coordinates to account for the movement of the center when the animation plays, but that also didn't help.
.box2 {
position: relative;
width: 40em;
height: 20em;
}
.box2 > .content {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1.0;
margin: 0;
}
.box2.inactive > .content {
opacity: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: green;
opacity: 1;
}
.circle.circle1 {
top: 4em;
left: 6em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle.circle2 {
top: 10em;
left: 20em;
width: 3em;
height: 3em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html>
<div class="box2">
<div class="circle circle1"></div>
</div>
</html>
Looks like this in Microsoft Edge with scale(2,2) and doesn't animate at all in Chrome:
You can set transform: translate(-50%, -50%); for .circle - it shifts the circle left and up relatively to its starting point and thus the point set in the center of circle.
.circle {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
background: green;
opacity: 1;
}
.circle.circle1 {
top: 8em;
left: 12em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html><div class="circle circle1"></div></html>
I set the width of two separate divs (circle_bg_l and circle_bg_r) both to 7vh, however one of them appears to be bigger. Here is the code:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}
#headbar_left {
position: fixed;
left: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 100% -50%;
-o-transform-origin: 100% -50%;
-moz-transform-origin: 100% -50%;
-webkit-transform-origin: 100% -50%;
-ms-transform-origin: 100% -50%;
}
#headbar_right {
position: fixed;
right: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
}
#circle_bg_l {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
left: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
#circle_bg_r {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
right: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.show {
background-color: #8704ff !important;
}
#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
background-image: url(html-logo.png);
background-size: 100%;
}
.l_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: left;
}
.l_menu:hover {
color: #161616;
background-color: #8704ff;
}
.r_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: right;
}
.r_menu:hover {
color: #161616;
background-color: #8704ff;
}
.spin {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.collapse {
transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
}
.move_left {
transform: translateX(calc(7vh - 50vw));
-o-transform: translateX(calc(7vh - 50vw));
-moz-transform: translateX(calc(7vh - 50vw));
-webkit-transform: translateX(calc(7vh - 50vw));
-ms-transform: translateX(calc(7vh - 50vw));
}
.move_fast {
transition: all 0.2s ease-in-out !important;
-o-transition: all 0.2s ease-in-out !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
-ms-transition: all 0.2s ease-in-out !important;
}
#circle_logo:hover {
transition: all 0.15s ease-in-out !important;
-o-transition: all 0.15s ease-in-out !important;
-moz-transition: all 0.15s ease-in-out !important;
-webkit-transition: all 0.15s ease-in-out !important;
-ms-transition: all 0.15s ease-in-out !important;
border-radius: 0;
}
#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Impact";
font-size: 10vh;
padding-top: 21vh;
}
#t_s {
font-size: 2vh;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left">
<div class="l_menu">FIRST</div>
<div class="l_menu">SECOND</div>
<div id="l_mid" class="l_menu">THIRD</div>
</div>
<div id="headbar_right">
<div class="r_menu">SIXTH</div>
<div class="r_menu">FIFTH</div>
<div id="r_mid" class="r_menu">FOURTH</div>
</div>
<div id="circle_bg_l"></div><div id="circle_logo"></div><div id="circle_bg_r"></div>
<div id="body_content"><center>WHAT IS THIS PAGE?<p id="t_s">no one knows</center></div>
</body>
<script>
var a = 1;
function remove() {
if (a === 0) {
$("#circle_logo").removeClass('move_left');
setTimeout(function() {
$("#circle_logo").removeClass('move_fast');
$("#circle_logo").removeClass('spin');
$("#headbar_left, #headbar_right").removeClass('collapse');
$("#circle_logo").css("background-image", "url(html-logo.png)");
$("a").attr("href", "uh.html");
}, 300);
a = 1;
}
}
function add() {
if (a === 1) {
$("#circle_logo").addClass('spin');
$("#headbar_left, #headbar_right").addClass('collapse');
setTimeout(function() {
$("#circle_logo").addClass('move_left');
$("#circle_logo").addClass('move_fast');
$("#circle_logo").css("background-image", "url(up-arrow.png)");
$("a").attr("href", "#top");
}, 400);
a = 0;
}
}
$(document).scroll(function() {
if($(window).scrollTop() > 0) {
add();
}
else {
remove();
}
});
$("#l_mid").mouseover(function() {
$("#circle_bg_l").addClass("show");
});
$("#l_mid").mouseout(function() {
$("#circle_bg_l").removeClass("show");
});
$("#r_mid").mouseover(function() {
$("#circle_bg_r").addClass("show");
});
$("#r_mid").mouseout(function() {
$("#circle_bg_r").removeClass("show");
});
</script>
</html>
I also just noticed after running the snippet that the divs do not line up the same way they do when I open the webpage in a browser. Any idea how to fix these problems? Thanks!
They are the same size in firefox, chrome and safari (latest versions on OS X) - according to the snippet you posted. They also appear to my eyes the same size.
That said, your browser or device might be showing some differences, one possibility is your use of VW. You have 2 header portions, each using 51VW next to each other. That's roughly the equivalent of having 2 sections use 51% of the width, and not add to 100vw.
I would try changing those to 50VW each and test again.
I'm working on an app that seems to be using CSS overlays. I have a basic understanding of CSS but not an expert.
In the style.css I see two classes:
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 0;
visibility: hidden; }
I'm using this in a React app and I need help with closing the overlay.
I simply render a component and set its isShown property to true and I'm able to open up the overlay.
However, I'm not sure about how to close it. Even if I set the isShown value to false in my redux store, the overlay still sits there.
I'd appreciate some help with closing the overlay. Thanks.
hope it helps!
.modal-wrapper.hide {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
I suggest setting your z-index to -1 or something lower, as the overlay will sit-on-top of other elements.
.modal-wrapper.hide {
opacity: 0;
visibility: hidden;
z-index: -1;
}
Please try this code
HTML
<div class="modal-wrapper"></div>
<div class="modal-wrapper hide"></div>
CSS
.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }
.modal-wrapper.hide {
opacity: 1;
visibility: visible;
width: 20px;
cursor:pointer;
background-color: transparent;
margin: 10px 20px;
height: 20px;
}
.modal-wrapper.hide:after, .modal-wrapper.hide:before {
content: "";
width: 2px;
height: 20px;
background: #fff;
display: inline-block;
transform: translatex(-1px) rotate(45deg);
}
.modal-wrapper.hide:before{
transform: translatex(0) rotate(-45deg);
}
Jsfiddle
I am trying to slide up an element on a button click with css property transfrom: translate3d(0,-100px,0); but the element below having relative position is no sliding up with that element leaving some space.
First Container CSS Properties:
.setupContainer {
position: relative;
display: inline-block;
width: 100%;
height: 100px;
text-align: center;
background-color: rgba(23, 29, 97, 0.9);
color: #FFF;
cursor: default;
z-index: 1;
-webkit-transform: translate3d(0,-100px,0);
-moz-transform: translate3d(0,-100px,0);
-ms-transform: translate3d(0,-100px,0);
-o-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
Second Container Css Properties:
.top_header {
position: relative;
width: 98%;
height: 165px;
background: #FFF;
margin: 0 auto;
float: none;
clear: both;
top: 1%;
text-align: center;
margin-bottom: 3px;
border-bottom: 2px solid #8CC5A7;
}
I'm trying to create a CSS animation that when the user clicks the burger menu it transforms to an x (step 1), then when the user clicks it again it animates back to the burger menu (step 2).
Step 1 works but I don’t know how to reverse the animation.
Thanks for your help!
http://jsfiddle.net/aX6Cf/
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
#-webkit-keyframes rotate-plus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(45deg);
}
}
#-webkit-keyframes rotate-minus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(-45deg);
}
}
#-webkit-keyframes transition-1 {
from {
top: -6;
transition: all .2s ease-out;
}
to {
top: 0;
transition: all .2s ease-out;
}
}
#-webkit-keyframes transition-2 {
from {
bottom: -6;
transition: all .2s ease-out;
}
to {
bottom: 0;
transition: all .2s ease-out;
}
}
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span:before {
top: -6px;
}
#mobile-menu span:after {
bottom: -6px;
}
#mobile-menu.active span {
background-color: transparent;
}
#mobile-menu.active span:before {
-webkit-animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
}
#mobile-menu.active span:after {
-webkit-animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
}
jQuery
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});
I take back what I said in my comment above. Looks like it is possible to do this with plain CSS, after all... The trick is to use transition delays properly.
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span {
transition: background-color .3s ease .3s;
-webkit-transition: background-color .3s ease .3s;
}
#mobile-menu span:before {
top: -6px;
transition: top .2s ease .2s, transform .2s ease;
-webkit-transition: top .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu span:after {
bottom: -6px;
transition: bottom .2s ease .2s, transform .2s ease;
-webkit-transition: bottom .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu.active span {
background-color: transparent;
transition: background-color .3s ease;
-webkit-transition: background-color .3s ease;
}
#mobile-menu.active span:before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: top .2s ease .1s, transform .2s ease .3s;
-webkit-transition: top .2s ease .1s, -webkit-transform .2s ease .3s;
}
#mobile-menu.active span:after {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: bottom .2s ease .1s, transform .2s ease .3s;
-webkit-transition: bottom .2s ease .1s, -webkit-transform .2s ease .3s;
}
jQuery
$(function() {
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});
})
Online Demo
Check out this JSfiddle which I tweaked a little bit (to much your code) from the original one in this awesome Codepen.
HTML
<a id="mobile-menu" href="#">
<span></span>
</a>
CSS
a#mobile-menu {
display: inline-block;
width:30px;
height:18px;
cursor: pointer;
text-decoration: none;
}
a#mobile-menu span {
position: relative;
display: inline-block;
width: 30px;
height: 3px;
color:#252525;
font:bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent:-55px;
background: #252525;
transition:all .2s ease-out;
}
a#mobile-menu span::before, a#mobile-menu span::after {
content:'';
width: 30px;
height: 3px;
background: #252525;
position: absolute;
left:0;
transition:all .2s ease-out;
}
a#mobile-menu span::before {
top: -7px;
}
a#mobile-menu span::after {
bottom: -7px;
}
a#mobile-menu.active span {
background: #fff;
}
a#mobile-menu.active span::before {
top:0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
a#mobile-menu.active span::after {
bottom:0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
a#mobile-menu {
position: absolute;
left:50%;
margin-left:-9px;
top:50%;
margin-top:-9px;
}
jQuery
$('a').click(function() {
$(this).toggleClass('active');
});
As I said all credit goes to this codepen