I have the picture below to which I would like to animate a diagonal split from the line cut through the logo from the top left to bottom right as shown below. The animation would split the picture on the X axis a few pixels apart.
https://i.ibb.co/fDzZ6Sc/Logo.png
I have made some progress so far, I used the same picture twice and laid them over each other and skewed on the X axis. However this split the picture apart from the top right to bottom left. I like it the other way around and can't figure it out.
I also could not figure out how to hover over the whole picture for the animation to execute for both of the sides.
body { background: gainsboro; }
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
overflow: hidden;
position: absolute;
/* arctan(27 / 40) = 34.01935deg
* need to skew by 90deg - 34.01935deg = 55.98065deg
*/
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
.option:hover {
left: -.8em;
transition: 1s;
}
<div class='pageOption'>
<a href='#' class='option'>
<img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
</a>
<a href='#' class='option'>
<img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
</a>
</div>
Essentially what I would like to happen is upon hovering on the whole picture, the two sides would split from the middle (cut from the line going from top left to bottom right), and when you move your mouse off, for the image to go back together.
You can consider clip-path and easily do this like below. The trick is to use two opposite polygon where the combination will make the full image.
.image {
width:340px;
height:230px;
background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
background-size:0;
position:relative;
}
.image:before,
.image:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
transition:1s;
}
.image:before {
clip-path:polygon(0 0, 15% 0, 97% 100%, 0 100%);
}
.image:after {
clip-path:polygon(100% 0, 15% 0, 97% 100%);
}
.image:hover::before{
transform:translate(-20px,-10px);
}
.image:hover::after{
transform:translate(20px,10px);
}
body {
background:pink;
}
<div class="image">
</div>
If you don't want to cut the The adjust the clip-path
.image {
width:340px;
height:230px;
background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
background-size:0;
position:relative;
}
.image:before,
.image:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
transition:1s;
}
.image:before {
clip-path:polygon(0 0, 32% 0 ,32% 19%, 97% 100%, 0 100%);
}
.image:after {
clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}
.image:hover::before{
transform:translate(-20px,-10px);
}
.image:hover::after{
transform:translate(20px,10px);
}
body {
background:pink;
}
<div class="image">
</div>
I'm making a static website, I fixed the navigation menu on the top
as a fixed header section.
The problem is arising that whatever content I add next to it is overlapping on the top of the menu.
Adding a relative position to the content acts in the same way.
Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable.
This is my CSS for the menu and i don't have really anything in the main CSS due this problem.
nav {
position: fixed;
top: 0;
background:none;
z-index:10000;
width:100%;
font-size:34px;
transition: all 0.5s;
}
nav.navScroll {
background: #013D5F;
font-size:20px;
transition: all 0.5s;
color: #fff;
}
img.logo {
float:left;
display:none;
transition: all 0.5s;
}
img.logoScroll {
display:inline;
width:50px;
padding:5px;
transition:all 0.5s;
}
div.menu {
text-align:center;
}
div.menuScroll {
float:right;
}
ul {
padding-left:0;
margin-left:0;
}
li.nav {
display:inline;
text-decoration:none;
padding-left:15px;
}
li.nav a {
list-style-type: none;
text-decoration:none;
color: white;
font-weight:400;
}
li.nav a:hover {
color: #FFD634;
transition: 1.2s;
}
.navScroll li.nav a {
color:#fff;
}
.navScroll li.nav a.selected {
color: #FFD634;
}
Jaromanda X correctly indicates that fixed position elements are taken out of flow. You must add a margin to the page body, or main container, equal to the height of your nav element. Your 'z-index:10000;' will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;)
Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.
I am attempting to build a Phonegap app that will allow the user to change the size of a two column layout by moving the middle divider.
I was able to get this working, but there is a huge UX problem: it's laggy. It's not terrible, but on the latest iPad it's even noticeable, which has me worrying.
Here's my JS that does the resizing:
$("div").on("touchmove", "#columnResizeIcon", function(e) {
e.preventDefault();
var left = e.originalEvent.touches[0].pageX;
var right = $("#columnContainer").width() - left;
$("#leftColumn").css({
"width":left - 1 + "px",
"right":"auto",
});
$("#rightColumn").css({
"width":right - 1 + "px",
"left":"auto",
});
$("#columnResize").css({
"-webkit-transform":"translate3d(" + left + "px" + ", 0, 0)",
"left":"auto",
});
$("#columnResizeIcon").css({
"-webkit-transform":"translate3d(" + left + "px" + ", 0, 0)",
"left":"auto",
});
});
You'll notice that I take advantage of translate3d() to change the "left" value of the elements, as that is hardware accelerated. I believe the lag is being produced from changing the widths of the left and right column, which is what I need to be hardware accelerated.
A possible solution that I thought might work would be to use -webkit-transform:translate3d(50%, 0, 0) to push the right column over half the page, and then just changing that value, hoping that it would only stretch until it reached the parent. It continues, however, and goes 50% of the page, not 50% of the parent.
My HTML markup looks like this:
<div id="columnContainer">
<div id="columnResize"></div>
<div id="columnResizeIcon"></div>
<div id="leftColumn">
<div class="header">Left Header</div>
<div class="content"></div>
</div>
<div id="rightColumn">
<div class="header">Right Header</div>
<div class="content"></div>
</div>
</div>
And my CSS:
body{
background-color:#000;
}
#columnContainer{
position: absolute;
bottom:0;
top:0;
right:0;
left:0;
background-color:#000;
}
#leftColumn{
position: absolute;
top:0;
left:0;
right:50%;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-right: 1px;
}
#rightColumn{
position: absolute;
top:0;
left:50%;
right:0;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-left: 1px;
}
.header{
position: absolute;
left:0;
right:0;
height:33px;
z-index: 5;
background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 17px;
font-family: Helvetica;
font-weight: bold;
letter-spacing: .2px;
text-align: center;
padding-top:9px;
color:#71787F;
text-shadow: 0 1px 0 #E3E5E9;
}
.content{
position: absolute;
left:0;
right: 0;
top:42px;
bottom: 0;
}
#leftColumn .content{
background-color:#F5F5F5;
}
#rightColumn .content{
background-color:#fff;
}
#columnResize{
position: absolute;
width:2px;
top:0;
bottom: 0;
left:50%;
margin-left:-1px;
background-color:#000;
z-index: 2;
}
#columnResizeIcon{
position: absolute;
z-index: 3;
width:10px;
height:30px;
top:50%;
bottom:50%;
margin-top:-15px;
left:50%;
margin-left:-7px;
border-left:2px solid #000;
border-right:2px solid #000;
}
I finally figured out a solution that works a lot better than what I had. Basically, I animate the container, and I hide the content when I'm resizing. Then, when the resizing is done, I show the content again. I used an animations to make it look pretty when hiding/showing. The code will explain it better than I will:
The almighty fiddle
1 http://jsfiddle.net/charlescarver/hnQHH/134/
My explanation
When the slider is tapped, it pushes all the text elements off the page with a translate3d() transform, then hides the div. This is because the lag returns if I try to update the width while the elements are shown. So, once the divs are hidden, I then just move the columns left or right with the translate3d() transform once again. I can do this without having the width of each element stop short because I set the left or right values to a value that can never be reached so it's extended far enough beyond the page. That way, I can simply shift it without worrying that it will cut off prematurely.
Weirdness
There are parts of this that are probably redundant, but I'll clean those up soon. You'll also probably notice some weird things going on, such as (1) cornerLeft, (2) dummy, (3) shadow, and in the JS, (4) minimum:
When I resize the page, the dummy nav bar extends the entire width of the left and right columns, which means it goes 1000% of the width. That means that I can't set a border-radius on the nav for the left and right sides of each column, as it would be so far off the screen that it wouldn't be visible. So, I made a simple corner to mask each side of the window, making it look pretty.
I hide .contentLeft and .contentRight when I resize as it causes lag when it's shown. I don't want to get rid of the nav bar though, so I make a dummy one that is always there on the page, and is simply revealed when the resize is about to happen. I think this reduces the lag as I don't have to add the element in, since it's always there.
One problem with that, however, is that when the normal nav overlays the dummy nav, the box-shadow's overlap, causing it to become darker for 200ms. I don't like this. So, I put in a shadow that is always on top of the nav, regardless of what nav is showing.
I can now easily set a bound that the draggable columns can reach before stopping. Convenient, right?
Code
HTML:
<div id="container">
<div class="cornerLeft"></div>
<div class="cornerRight"></div>
<div class="shadow"></div>
<div class="left">
<div class="contentLeft">
<div class="header"></div>
<div class="headerbehind"></div>
<div class="text textLeft">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
</div>
<div class="dummy"></div>
<div class="dummybg"></div>
</div>
<div class="divider"></div>
<div class="right">
<div class="contentRight">
<div class="header"></div>
<div class="headerbehind"></div>
<div class="text textRight">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
</div>
<div class="dummy"></div>
<div class="dummybg"></div>
</div>
</div>
CSS:
* {
-webkit-text-size-adjust:none;
}
#container {
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
background-color:#000;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
}
.left {
-webkit-transform:translate3d(0, 0, 0);
position:absolute;
left:-3000px;
right:50%;
top:0;
bottom:0;
border-right:1px solid #000;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.right {
-webkit-transform:translate3d(0, 0, 0);
position:absolute;
left:50%;
right:-3000px;
top:0;
bottom:0;
border-left:1px solid #000;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.divider {
width:24px;
height:40px;
border-left:2px solid #000;
border-right:2px solid #000;
position:absolute;
left:50%;
z-index:3;
margin-left:-14px;
margin-top:-20px;
top:50%;
-webkit-transform:translate3d(0, 0, 0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.contentLeft {
position:absolute;
right:0;
bottom:0;
top:0;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.contentRight {
position:absolute;
left:0;
bottom:0;
top:0;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.cornerLeft:after {
content:"";
height:5px;
position:absolute;
left:0;
width:5px;
background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
z-index:700;
border-top-left-radius:5px;
box-shadow:inset 0 1px 0 #fff;
}
.cornerLeft {
position:absolute;
z-index:700;
left:0;
width:5px;
height:5px;
background-color:#000;
}
.cornerRight:after {
content:"";
height:5px;
position:absolute;
right:0;
width:5px;
background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
z-index:700;
border-top-right-radius:5px;
box-shadow:inset 0 1px 0 #fff;
}
.cornerRight {
position:absolute;
z-index:700;
right:0;
width:5px;
height:5px;
background-color:#000;
}
.header, .dummy {
position: absolute;
left:0;
right:0;
height:35px;
background: -webkit-linear-gradient(top, #f4f5f7 0%, #a7abb7 100%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 17px;
font-family: Helvetica;
font-weight: bold;
letter-spacing: .2px;
text-align: center;
padding-top:9px;
color:#71787F;
text-shadow: 0 1px 0 #E3E5E9;
word-break: break-all;
box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090;
}
.shadow {
height:44px;
position:absolute;
left:0;
right:0;
box-shadow:0 1px 2px rgba(0, 0, 0, .2);
z-index:600;
}
.header {
z-index:500;
}
.dummy {
z-index:100;
}
.headerbehind {
position:absolute;
background-color:#000;
left:0;
right:0;
height:44px;
z-index:499;
}
.text, .dummybg {
margin-top:44px;
background-color:#fff;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.text {
z-index:2;
padding:20px 40px;
-webkit-animation-duration:200ms;
-webkit-animation-timing-function:ease;
}
.contentLeft, .contentRight {
z-index:300;
}
.leftOut {
-webkit-transform:translate3d(-100%, 0, 0);
-webkit-animation-name:leftOut;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.leftIn {
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation-name:leftIn;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#-webkit-keyframes leftOut {
0% {
-webkit-transform:translate3d(0, 0, 0);
}
100% {
-webkit-transform:translate3d(-100%, 0, 0);
}
}
#-webkit-keyframes leftIn {
0% {
-webkit-transform:translate3d(-100%, 0, 0);
}
100% {
-webkit-transform:translate3d(0, 0, 0);
}
}
.rightOut {
-webkit-transform:translate3d(100%, 0, 0);
-webkit-animation-name:rightOut;
}
.rightIn {
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation-name:rightIn;
}
#-webkit-keyframes rightOut {
0% {
-webkit-transform:translate3d(0, 0, 0);
}
100% {
-webkit-transform:translate3d(100%, 0, 0);
}
}
#-webkit-keyframes rightIn {
0% {
-webkit-transform:translate3d(100%, 0, 0);
}
100% {
-webkit-transform:translate3d(0, 0, 0);
}
}
JS:
minimum = 100;
$(".contentLeft").css("width", ($("#container").width() / 2) - 1);
$(".contentRight").css("width", ($("#container").width() / 2) - 1);
$("div").on("touchstart", ".divider", function (e) {
$(".textLeft").removeClass("leftIn");
$(".textLeft").addClass("leftOut");
$(".textRight").removeClass("rightIn");
$(".textRight").addClass("rightOut");
setTimeout(function () {
$(".contentLeft, .contentRight").hide();
}, 200);
});
$("div").on("touchmove", ".divider", function (e) {
e.preventDefault();
if ($(".contentLeft").css("display", "none")) {
var page = $("#container").width();
var left = e.originalEvent.touches[0].pageX;
var right = page - left;
updateWidth(page, left, right);
}
});
//$(".contentLeft, .contentRight").hide();
$("div").on("touchend", ".divider", function (e) {
setTimeout(function () {
$(".textLeft").removeClass("leftOut");
$(".textLeft").addClass("leftIn");
$(".textRight").removeClass("rightOut");
$(".textRight").addClass("rightIn");
$(".contentLeft, .contentRight").show();
}, 200);
});
$(window).on('orientationchange', function (e) {
var page = $("#container").width();
var leftWidth = $(".contentLeft").width();
var rightWidth = $(".contentRight").width();
var previousWidth = (leftWidth + rightWidth);
if (leftWidth + rightWidth + 2 < page) {
var left = (page / 2) - (previousWidth / 2) + leftWidth;
} else if (leftWidth + rightWidth + 2 > page) {
var left = leftWidth - ((previousWidth / 2) - (page / 2));
}
var right = page - left;
updateWidth(page, left, right);
});
function updateWidth(page, left, right) {
if (left < minimum) {
var finalLeft = minimum;
var finalRight = (-1 * (page - minimum));
var finalRightWidth = (page - minimum);
} else if (right < minimum) {
var finalLeft = (page - minimum);
var finalRight = (-1 * minimum);
var finalRightWidth = minimum;
} else {
var finalLeft = (left);
var finalRight = (0 - right);
var finalRightWidth = (right);
}
$(".divider").css({
"-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
"left": "auto",
});
$(".left").css({
"-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
"right": "100%",
});
$(".right").css({
"-webkit-transform": "translate3d(" + finalRight + "px, 0, 0)",
"left": "100%",
});
$(".contentLeft").css("width", finalLeft);
$(".contentRight").css("width", finalRightWidth);
}
1 Yes, it took me 134 tries.
I had some success by pushing the two elements into question in the hardware-accelerated stack:
#leftColumn,
#rightColumn {
-webkit-transform: translate3d(0,0,0);
}
Seems to be resizing much more smoothly. It's not that changing width itself is optimized, rather the elements themselves are re-rendered much more quickly.
I set up a plunk here: http://plnkr.co/edit/5RMtCl1Sql8f3CmQLHFz
Here is an example of what I want to achieve - http://home.mcafee.com/default.aspx
I would like to know how to get the feedback tab/button to the right of the page to slightly open not completely slide out. And then on clicking, I would like to open a page (not a jquery form, but a page).
Any help?
Thanks in advance.
CSS3 transitions
#feedback {
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback:hover
{
width:50px;
}
Try this http://jsfiddle.net/heera/q5Nu2/5 and you have to use a background image to show a vertical button.
CSS
#feedback{
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback img{width:100%;height:70px;border:solid black 1px;}
HTML
JS
$('a#feedback').hover(function(e){
$(this).animate({'right':'-1px'}, 500);
},
function(e){
$(this).animate({'right':'-10px'}, 500);
});