I have element with some of the animations made with CSS3. There is a link inside the block which opens modal window, but when the modal window is closed the animation element is left as in "hover" state.
Example in jsfiddle :
<style>
.item-wrap {
position: relative;
height: 200px;
width: 200px;
background-color: black;
overflow: hidden;
}
.item-wrap p {
color: #fff;
text-align: center;
}
.item-wrap::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
opacity: 0.5;
-webkit-transition: width 0s ease, background-color 0.5s ease;
-moz-transition: width 0s ease, background-color 0.5s ease;
-o-transition: width 0s ease, background-color 0.5s ease;
transition: width 0s ease, background-color 0.5s ease;
}
.item-wrap::after {
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 100%;
opacity: 0.5;
background-color: #fff;
transition: width 0.5s ease;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
}
.item-wrap:hover::before {
width: 100%;
background-color: #fff;
transition: width 0.5s ease;
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
}
.item-wrap:hover::after {
width: 100%;
background-color: transparent;
transition: all 0s ease;
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-ms-transition: all 0s ease;
-o-transition: all 0s ease;
}
.item-wrap:hover .cover {
bottom: 0;
}
.cover a {
color: #fff;
}
.link1 {
position: absolute;
left: 20px;
top: 50%;
right: 20px;
}
.link2 {
position: absolute;
top: 50%;
right: 20px;
}
.item-wrap .cover {
position: absolute;
right: 0;
left: 0;
bottom: -100%;
width: 100%;
height: 100%;
transition: bottom 0.3s linear;
-webkit-transition: bottom 0.3s linear;
-moz-transition: bottom 0.3s linear;
-ms-transition: bottom 0.3s linear;
-o-transition: bottom 0.3s linear;
z-index: 10;
}
</style>
<div class="item">
<div class="item-wrap">
<p>Main content blah blah</p>
<div class="cover">
Link1
Link2
</div><!-- /.cover -->
</div><!-- /.item-wrap -->
</div><!-- /.item -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Example ins jsfiddle : https://jsfiddle.net/9objpv9x/
Try to hover to see animation and modal links and then click the "Link1" and close modal to see what happens next.
I just don't know where to start digging.
Actually the "link1" is left at "focus" state and the outline is displayed due to default bootstrap css property:
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
To override it, Modify it in your css.
a#id:focus {
outline: 0px;
}
To remove the focus state after the modal close,
We need to trigger modal in jquery instead of having "data-target" in HTML.
Check out this jsfiddle link.
Updated Code Fix
Related
ive been trying to recreate the hover dual effect that is on https://andreas-demo.myportfolio.com/
However i cant seem to get both to align correctly and then i cannot get the affect that hovers over the entire section but that changes BOTH: 1- Darkening the image, 2 -inversing the colors.
I want to be able to get both affects to happen while hovering over the entire block, just like on the site above^.
Here's my code;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
On container:hover, set your container'background-color as black (default to white) and set the image opacity as 0.5.
Move the :hover pseudo-class to one of the 3 parent (wrapper) elements -
.container, .container > a, or .media element. This will have the effect of adding the overlay to both elements on :hover.
Like this:
.container {
font-family: Arial;
}
.container:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container__link {
display: flex;
text-decoration: none;
}
.media {
flex: 6;
background-color: #222222;
}
img {
display: block;
width: 100%;
height: 450px;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container:hover .media img {
opacity: 0.3;
}
.description {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color: #ffffff;
color: #222222;
}
.container:hover .description {
background-color: #222222;
color: #ffffff;
}
p {
padding: 0;
margin: 0;
}
<div class="container">
<a href="" class="container__link">
<div class="media">
<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<div class="description">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
I have following setup:
$('.home-cat-wrapper a').hover(function() {
var this_left = parseFloat($(this).find('.product-sticker-image').data('left'));
var this_right = parseFloat($(this).find('.product-sticker-image').data('right'));
var left = 0;
var right = 0;
if (this_left > 21) {
left = 2 * (this_left - 21);
} else {
left = 10;
}
if (this_right > 21) {
right = 2 * (this_right - 21);
} else {
right = 10;
}
$(this).find('.product-sticker-image').css({
'top': '0',
'left': left + '%',
'right': right + '%'
});
$(this).find('.home-page-category-hover').stop(true, false).fadeIn(200);
}, function() {
var this_top = $(this).find('.product-sticker-image').data('top');
var this_left = $(this).find('.product-sticker-image').data('left');
var this_right = $(this).find('.product-sticker-image').data('right');
$(this).find('.product-sticker-image').css({
'top': this_top,
'left': this_left,
'right': this_right
});
$(this).find('.home-page-category-hover').stop(true, false).fadeOut(200);
});
.col-xs-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.home-page-category-box {
padding: 0 20px;
text-align: center;
margin-bottom: 51px;
}
.home-cat-wrapper {
background-color: #f0f0f0;
}
.home-page-category-heading {
color: #ffffff;
font-size: 13.1px;
font-weight: 600;
background: #000000;
padding: 13px 0 10px;
}
.home-page-image-wrapper {
position: relative;
}
.home-page-category-hover {
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
}
.home-page-category-hover span {
color: #ffffff;
font-size: 12.44px;
background: url("../images/footer-background.jpg");
font-weight: 600;
padding: 13px 0;
display: inline-block;
width: 100%;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.category-image-wrapper {
width: 100%;
background: #f0f0f0;
padding: 45px 0 65px;
position: relative;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.category-sticker-container {
position: relative;
}
.product-sticker-image {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
}
.category-sticker-container > img {
width: 100%;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.product-sticker-image img {
padding: 0;
width: 100%;
}
.home-cat-wrapper a:hover .category-image-wrapper {
background: #ffffff;
}
.home-cat-wrapper a:hover .category-image-wrapper .category-sticker-container > img {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 home-page-right-container">
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-3">
<a href="http://weadmire.dx3webs.com/film.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Film</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/l/alfred-hitchcock.png" alt="Film-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Film">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: block; opacity: 1;"><span>63 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-4">
<a href="http://weadmire.dx3webs.com/design-architecture.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Design & Architecture</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/d/admire-rio.png" alt="Design & Architecture-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Design & Architecture">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: none; opacity: 1;"><span>17 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
</div>
When you hover the box you can see there is slight flicker, a blink appears in the t-shirt logo and after that same happens when hover out. I tried with back face visibility and other transform properties but no luck. How can I get rid of this flicker? Thanks.
fiddle
Just add z-index to .product-sticker-image class.
Check the demo
You should use transition: width 0.2s ease; on .category-sticker-container > img in this situation:
.category-sticker-container > img {
width: 100%;
-webkit-transition: width 0.2s ease;
-moz-transition: width 0.2s ease;
-ms-transition: width 0.2s ease;
-o-transition: width 0.2s ease;
transition: width 0.2s ease;
}
JSfiddle here
below is my code:
html:
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
css:
#wrapper {
width: 100vw;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #5F657C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
js:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
My problem is for the left side yellow div, the content inside will kinda squeeze together when the sidebar slide to the left.
I want to make it just hide underneath and don't want the content to be squeezed. Do you guys have any idea?
You could do it like this:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: -250px;
width: 250px;
height: 100%;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
The width is set default to 250px. In my snippet I'm playing with the offset left to hide/show the sidebar. Study my code and you'll see how it works.
I want to draw a border around my links on hover, with animation smth like this http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
Please give me some snippets or links.
Thank you
This is how i tried to animate it with jquery
$('a').on('hover', function() {
$(this).animate({ border: '1px' }, 'slow', 'linear');
$(this).animate({ border: 'solid' }, 'slow');
$(this).animate({ border: '#ccc' }, 'slow');
});
If you Have no Idea To like this:)
$("#block").mouseenter(function(){
$("#span1,#span2,#span3,#span4").show();
$("#span1").animate({
height: "50px"
}, 1500 );
$("#span2").animate({
width: "110px"
}, 1500 );
$("#span3").animate({
height: "55px",
top:"-5px"
}, 1500 );
$("#span4").animate({
width: "105px",
left:"-5px"
}, 1500 );
});
$("#block").mouseleave(function(){
$("#span1").animate({
height: "5px"
}, 1500 );
$("#span2").animate({
width: "5px"
}, 1500 );
$("#span3").animate({
height: "5px",
top:"50px"
}, 1500 );
$("#span4").animate({
width: "5px",
left:"100px"
}, 1500,function(){
$("#span1,#span2,#span3,#span4").hide();
});
});
See fiddle:Click me
OK, So i checked out the site, seems they are using a custom animation handler.
Here, this is the external js file that handles all the custom animation.
Custom Handler
Now what you have to do is create multiple divs for each line. Then customize it the way you want. If you want to have the exact same look-
For the horizontal divs,
position:absolute;
border-bottom: 1px;
width: 0px;
height: 0px;
border-bottom-color:#000;
border-bottom-style:solid;
For the vertical divs, just change border-bottom to border-left.
Now the jquery,I'll try to explain how the custom handler works, if you directly wan to copy paste,
Here you go .
First you define the div you want to animate, $fx('#theHeader1') then you add the parameters for making the animation work .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}), here-
type: Can be with,height,left,top that you want to change
from: Value to start from
to: Value up to
step: Describes speed (should be negative if going from greater value to smaller value)
delay: I guess its for smoothness.Without delay it appears buggy.
Just to say: Making that kind of animation will require a lot of time.
you can check this pen.the technique used is css transitions, no jquery involved
what you do need is like tannerjohn said, a div for each side of button
http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110
html:
<div class="main">
<div class="button">
enter
<div class="line-top"> </div>
<div class="line-right"> </div>
<div class="line-bottom"> </div>
<div class="line-left"> </div>
</div>
</div>
css:
.button{
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin: 70px 0 0 -60px;
border: 1px solid rgba(255,255,255,0.25);
}
.button .line-top{
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-right{
position: absolute;
bottom: 0;
right: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-bottom{
position: absolute;
bottom: -1px;
right: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-left{
position: absolute;
top: 0;
left: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-top{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-right{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-bottom{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-left{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
I am new to jquery.
The idea is to create two divs that when clicked on it, the clicked div will increase the size whereas the other decreases. These two divs will have an link when clicked, that div will flip independantly and not affecting the other div.
I am having two divs (say div1 and div2) which flip independently on clicking a link inside it. On clicking the div(say div1 here), I maximize it by adding a class maximize which I have defined in the css. and minimize the other class. I am able to achieve all.. but the events are happening one by one. which looks really wierd. I am posting the code below.
$('.recharge-panel').click(function (e) {
$(".search-panel .flipper").hide();
$('.recharge-panel').removeClass('minimized');
$('.recharge-panel').addClass('maximized');
$('.search-panel').addClass('minimized');
$('.search-panel').removeClass('flip');
$(".recharge-panel .flipper").show();
});
$('.search-panel').click(function (e) {
$(".recharge-panel .flipper").hide();
$('.search-panel').removeClass('minimized');
$('.search-panel').addClass('maximized');
$('.recharge-panel').addClass('minimized');
$('.recharge-panel').removeClass('flip');
$(".search-panel .flipper").show();
});
and the html goes like this
<div id="home-content-container4">
<div id="div-box-container">
<div id="recharge-panel" class="contact homepanel recharge-panel">
<div id="rechargefy" class="front">
<p>This is the front side</p>
<a class="flipper flipBack" href="#">Flip</a>
</div>
<div id="rechargefy" class="back">
<p>This is the back side</p>
<a class="flipper flipFront" href="#">Flip</a>
</div>
</div>
<div class="contact homepanel search-panel second-panel">
<div id="planSearch" class="front">
<p>This is the front side</p>
<a class="flipper flipBack" href="#">Flip</a>
</div>
<div id="planSearch" class="back">
<p>This is the back side</p>
<a class="flipper flipFront" href="#">Flip</a>
</div>
</div>
</div>
The css is as follows..
.maximized {
width: 500px;
height: 400px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}
.minimized {
width: 300px;
height: 200px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}
#div-box-container{
position: relative;
height: 600px;
width: 1024px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}
.homepanel {
float: left;
width: 400px;
height: 300px;
font-size: .8em;
margin-left: 10px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-perspective: 600px;
-moz-perspective: 600px;
font-family: "Lato","Lucida Grande","Lucida Sans Unicode","Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;
}
I know I have screwed up.. if anyone can help me out in this, it will be really great!!
Please let me know if you have other methods to achieve this effect.
visit http://www.hipmunk.com for the maximizing minimizing effect
and http://css3playground.com/flip-card.php for the flipping thing.
The reason for the divs to move to a new position and maximize or increase the size (looks like queuing, but it is not! )is because, I have animated the div completely by giving
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
instead, you just have to animate the top and left alone.
-o-transition: left 0.3s ease-out,top 0.3s ease-out;
-ms-transition: left 0.3s ease-out,top 0.3s ease-out;
-moz-transition: left 0.3s ease-out,top 0.3s ease-out;
-webkit-transition: left 0.3s ease-out,top 0.3s ease-out;
transition: left 0.3s ease-out,top 0.3s ease-out;