So I'm trying to do a pop-out menu, and I have a bit of an issue.
I've applied:
.menu-side, .menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu is set to the body, and menu-side to the pop-out menu. The left of both the menu and body is changed when the pop-out menu is loaded. But for some reason it isn't easing correctly?
The problem is that the initial value of left property is auto.
Therefore, the browser doesn't know how to do the transition from auto to 180px.
To fix it, you must set it to 0 initially:
.menu {
left: 0px;
transition: left 0.2s ease;
}
.menu-open {
left: 180px;
}
.menu {
left: 0px;
transition: left 0.2s ease;
background: red;
position: relative;
height: 200px;
}
:checked ~ .menu { /* .menu-open */
left: 180px;
}
<input id="toggler" type="checkbox" />
<label for="toggler">Toggle</label>
<div class="menu"></div>
Personally I would never animate the body element itself. You should always use a wrapper, the body has some special properties and doesn't always act you would expect a div to act. However, If you manually set left: 0 on the body the transition will work.
body {
left: 0;
}
Related
I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.
Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>
I have transform css applied to a line of text (font-size), but it animates from the left side, I want it to animate from the center. I am using Bootstrap framework so the div is vert/horiz centred.
HTML
<article class="col-md-12">
<div class="lg-indx-img">
<div class="cat-icn">
<?php the_title(); ?>
</div>
</div>
</article>
CSS
article {
position: relative;
margin-bottom: 10px;
width: 100%;
}
.linkage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.lg-indx-img { padding: 20% 0; }
.cat-icn {
position: absolute;
z-index: 9;
left: 50%;
top: 50%;
opacity: 0;
font-size: 15px;
color: #fff;
text-align: center;
transform-origin: 50% 50%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.linkage:hover + .cat-icn {
opacity: 1;
font-size: 25px;
}
when .linkage is hovered the title in .cat-icn increases in size. I don't know the length of the text line since it's generated by Wordpress post.
EDIT - The top picture is what it does now, the bottom picture is what I want it to do
Instead of setting a new font size, you can try using the transform property, which should do the right thing since you have transform-origin already set to the center.
.linkage:hover + .cat-icn {
transform: scale(1.5);
}
Try this out.
http://codepen.io/Chevex/pen/bdRvvJ
.linkage:hover + .cat-icn {
opacity: 1;
transform: scale(3);
}
Instead of animating the font size, animate the transform property instead. Then in your hover rule use the transform property to adjust the scale of the element.
My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}
I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/
+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>
I dont have any idea how to make it work
Css:
.name
{
width: 270px;
height: 77px;
position: absolute;
top: 0px;
left: 600px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
.name:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
.photo
{
width: 270px;
height: 310px;
position: absolute;
top: 77px;
left: 600px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
.photo:hover,
{
top: 100px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
I want when i hold the mouse over the .name which is an image to activate the .photo hover effect and vice versa, any idea?
/* What you want the thing being hovered over to look like */
.name:hover {
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
/* What you want the thing being hovered over to look like */
.name:hover ~ * {
/* Some styles */
}
In order for this to work, the items that you want to style need to be siblings of the .name element being hovered over. The ~ is a css sibling selector.
I would make a class like
.photo:hover, .photo.hover {
/* CSS */
}
Then toggle class hover on the photo element.
This woul be a javascript solution, not just CSS.
You can try this:
JS
$('.name').hover(function () {
$('.photo').addClass('hover');
}, function () {
$('.photo').removeClass('hover');
});
$('.photo').hover(function () {
$('.name').addClass('hover');
}, function () {
$('.name').removeClass('hover');
});
CSS
.name:hover, .name.hover
.photo:hover, .photo.hover
demo
I have following markup for my nav-menu and menu icon to toggle it.
☰
<nav id="navigation">
Blog
Projects
Showcase
Social
About
×
</nav>
In which all menu items stack up vertically when viewing in Smartphone in portrait mode (I use CSS media queries).
Following is the initial style of menu items.
nav {
position: fixed;
top: 0;
padding-top: 60px;
}
nav .nav-item {
display: table;
margin-top: 10px;
padding: 2px 10px 2px 10px;
width: auto;
font-size: 2.5em;
text-align: left;
margin-left: -230px; /* Keep menu items off-screen by default. */
z-index: 1000;
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
/* Show Menu on :target or via JS */
nav:target .nav-item,
nav.open .nav-item {
margin-left: 0;
transition: margin-left 0.2s ease;
}
And now I toggle open class on nav-menu upon click of a.toggle-menu, this works fine and as expected in Chrome Canary 34 (DevTools device emulator) on Desktop, Firefox 26 running on Android 4.2, but it is giving unexpected behaviours in Chrome 31 on Android, as well as any other browser on Android (that uses WebView).
What's happening is when page is loaded for first time, and I tap on Menu icon, it shows Nav-menu with transition, and tapping again on Close hides it, but when I tap again the same menu icon, it doesn't show up, but if I double-tap on page (which usually zooms-in the page 1 level), nav-menu appears (without any transition, like it was already present there), and then tapping on close hides it, and this behaviour continues until I reload the page again.
Note that I'm currently using jQuery 2.0.3 for event handlers, and this problem persists with both ways of showing/hiding of menu, with JS, without JS.
Any help will be appreciated.
Try:
nav {
position: absolute;
top: 0;
padding-top: 60px;
}
nav .nav-item {
display: block;
margin-top: 10px;
padding: 2px 10px 2px 10px;
width: auto;
font-size: 2.5em;
text-align: left;
margin-left: -230px; /* Keep menu items off-screen by default. */
z-index: 1000;
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
/* Show Menu on :target or via JS */
nav:target .nav-item,
nav.open .nav-item {
margin-left: 0 !important;
}
So after lot of tinkering over the issue, I found that real problem with WebKit, was that I had position: fixed; given to parent nav, ideally it should work, but somehow it didn't, neither in Chrome for Android or any other WebKit-based Browser running on Android.
So I simply removed position from parent nav and instead gave it to .nav-items which are actual menu items, obviously I had to give different top values for each nav-item but it worked like a charm! So updated CSS looks something like below;
/* This is no longer needed */
/*
nav {
position: fixed;
top: 0;
padding-top: 60px;
}
*/
nav .nav-item {
position: fixed;
display: table;
padding: 2px 10px 2px 10px;
width: auto;
font-size: 2.5em;
text-align: left;
margin-left: -230px; /* Keep menu items off-screen by default. */
z-index: 1000;
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
/* Need all this madness just for WebKit. */
.nav-item.nav-blog {
top: 70px;
}
.nav-item.nav-projects {
top: 140px;
}
.nav-item.nav-showcase {
top: 210px;
}
.nav-item.nav-social {
top: 280px;
}
.nav-item.nav-about {
top: 350px;
}
.nav-item.nav-close {
top: 420px;
}
/* Show Menu on :target or via JS */
nav:target .nav-item,
nav.open .nav-item {
margin-left: 0;
}