I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?
I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}
Related
Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>
one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ
I am using a bootstrap slider with a burger menu at the top, and i want to show it in every slide except for the first one. Do i have to use this burger class in every slide except for the first one? Or there is simpler way to do that? Any kind of help would be much appreciated
HTML:
<body>
<div class="navigation">
<div class="burger_deluxe">
<span class="burger_global top_bun"></span>
<span class="burger_global patty"></span>
<span class="burger_global bottom_bun"></span>
</div>
</div>
<div class="carousel-item first_slide">
</div>
<div class="carousel-item second_slide">
</div>
<div class="carousel-item third_slide">
</div>
</body>
CSS:
.navigation {
width: 100%;
height: 60px;
z-index: 400;
position: absolute;
}
.burger_deluxe {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
width: 34px;
height: 40px;
z-index: 3;
}
.burger_deluxe .burger_global {
position: absolute;
border-top: 5px solid white;
width: 100%;
}
.burger_deluxe .burger_global.top_bun {
top: 0;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe .burger_global.patty {
top: 12px;
border-radius: 20px;
transition: opacity 500ms ease;
}
.burger_deluxe .burger_global.bottom_bun {
top: 24px;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe.open span {
border-color: white;
}
.burger_deluxe.open .top_bun {
transform: rotate(45deg);
}
.burger_deluxe.open .patty {
opacity: 0;
}
.burger_deluxe.open .bottom_bun {
transform: rotate(-45deg);
}
I am using this style to change the appearence of a checkbox:
th .checkbox label::before,th .checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
th .checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -21px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
this works perfectly for before and after but the interdeterminate style in chrome do not have the correct position. So i tried it with:
th .checkbox label::indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
but it does not work :(. how could I fix this and give the indeterminate at least a left: -21px; style.
thank you in advance!
indeterminate is a pseudo class so it starts with : while before and after are pseudo elements and start with ::
th .checkbox label:indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
and https://developer.mozilla.org/en-US/docs/Web/CSS/::before
I am trying to add banner after page load. I am using code below, in JSFiddle "CLOSE" button is working, but on my website it's not. It says "$('.close').on is not a function". I think it's because I don't use external jQuery file, because it's ruin my page. It's possible to do it without external jQuery? Or just with JS only?
$( document ).ready(function() {
$('.open').fadeIn();
$('.close').on('click', function(event) {
event.preventDefault();
/* Act on the event */
$('.open').fadeOut();
});
});
.open {position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; display: none; opacity: 1; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in;width: 561px; height: 274px; margin: auto}
.close {background: #000; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px}
.close:hover {background: #fff; color: #000}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popup" class="open">
<img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" />
<a class="close" title="Zavřít" href="#close">X</a>
</div>
Use it like this without jquery
document.getElementById("popup").style.display = "block";
document.getElementById("closeBtn").addEventListener("click", closeDialog);
function closeDialog () {
document.getElementById("popup").style.display = "none";
}
document.getElementById("popup").style.display = "block";
document.getElementById("closeBtn").addEventListener("click", closeDialog);
function closeDialog () {
document.getElementById("popup").style.display = "none";
}
.open {position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; display: none; opacity: 1; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in;width: 561px; height: 274px; margin: auto}
.close {background: #000; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px}
.close:hover {background: #fff; color: #000}
<div id="popup" class="open">
<img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" />
<a class="close" title="Zavřít" href="#close" id="closeBtn">X</a>
</div>
For transititon effects do it like this
setTimeout(function() {
document.getElementById("popup").style.opacity = 1;
}, 0);
function closeDialog() {
document.getElementById("popup").style.opacity = 0;
}
#popup.open {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 99999;
display: block;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
width: 561px;
height: 274px;
margin: auto
}
.close {
background: #000;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px
}
.close:hover {
background: #fff;
color: #000;
}
<div id="popup" class="open">
<img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" />
<a class="close" title="Zavřít" href="#close" onclick="closeDialog()">X</a>
</div>
Please see attached codepen example. I am trying to fly a div called .mail-content into view, which I have positioned absolutely out of view. I am trying to fly it in by clicking on .super-btn, and then I want to send it back out-from-view by clicking on .close-btn-mail. The JS is not working for me. Any advice?
Updated Code Pen
$('.super-btn').on('click', function(){
$('.mail-content').css({"transform":"translate(100%,100%)"});
});
$('.close-btn-mail').on('click', function(){
$('.mail-content').css({"transform":"translate(-100%,-100%)"});
});
.mail-content{
background: rgb(0,0,0);
width: 100%;
height: 100%;
position: absolute;
top: -100%;
left: -100%;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mail-content h1{
font-size: 2em;
position: relative;
top: 10%;
color: #fff;
}
.mail-content p{
font-size: 1em;
position: relative;
top: 10%;
color: #fff;
}
.close-btn-mail{
background-color: red;
width: 100px;
height: 100px;
display: block;
position: absolute;
bottom: 80px;
right: 80px;
}
<a class="super-btn" href="#">Fly-in</a>
<div class="mail-content">
<h1>mail-content should fly in</h1>
<p>and then fly back to where it came from</p>
<a class="close-btn-mail" href="">Send Back</a>
</div>