This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 1 year ago.
I have a screen that includes a button on the left and a picture on the right and soon as I click the button CLICK, I want the image on the left to display none with animation. Later on, another box which was displayed none before, should display block.
function calculate() {
document.getElementById('body-mass-image').classList.add('body-mass-over');
var el = document.getElementById('body-mass-result-box');
if (el) {
el.className += el.className ? '__show' : '__show';
}
}
.calculate__content__result { display: none; }
..calculate__content__result__show { display: block; }
#body-mass-image {
transition: all 1s linear;
display: block;
opacity: 1;
}
#body-mass-image.body-mass-over {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<div class="form-group">
<div class="calorie__button__area">
<button type="submit" class="button-secondary button__calculate" onclick="calculate()">CLICK</button>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content" id="body-mass-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBwAo9q5FtWQKO_hKSmgkKkrMZZtirYph9xg&usqp=CAU" alt="Weight Calculation Image"/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result" id="body-mass-result-box">
<div class="row">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="result__box">
<div class="title">Vücut Kitle End.:</div>
<div class="calorie">33.9</div>
<div class="title">Durum:</div>
<div class="calorie">Şişman/Obez</div>
</div>
</div>
<div class="col-lg-2 col-md-12 col-sm-12"></div>
</div>
</div>
So, I display none the image and display block the result__box, but the thing is there i no animation.
If I can understand you clearly, you're trying to make the image disappear slowly using display none on transition which for a very technical reason will never work.
Transition will work perfectly on opacity because opacity has value count down ranging from value 0, 0.1, 0.2, 0.3 till 1.0, so it is possible that within the 1 second you gave, it will translate through those values... But display has no count down, it's either it display or it doesn't
I fear, transition can not work on display, if you want the image to disappear, consider using opacity combine with height and width.
.weight__calculations #body-mass-image {
transition: all 1s linear;
width: // the initial width;
height: //the initial height;
opacity: 1;
}
.weight__calculations #body-mass-image.body-mass-over {
transition: opacity 1s ease-out;
height: 0;
width: 0;
opacity: 0;
}
But if you actually need to use display none, then consider using setTimeout in JavaScript to display the image to none after 1 second, by then your your animation has finished with the opacity.
But again, you're trying to make a result_box appear and image to disappear on click with some transition implementation... Transition should not be used at this situation, but you need animation because transition needs action like "hover" before implementing, but animation implements on it's own... You will have to set up an appear and disappear css for both image and result_box:
example
. result_box_appearance{
opacity: 0;
height:0;
width:0;
animation: 1s linear;
animation-name: result_box_appearance;
}
#keyframes result_box_appearance{
0%{
opacity: 0;
height:0;
width:0;
}
100%{
opacity: 1;
height: 70px;
width: 90px;
}
}
So when you click the button, you can now assign the second className to the result_box.
result_box.className = "result_box result_box_appearance";
and you will have to do the same to disappear for both result_box and image
Instead of using display block, you can use max-height: 0; and to display it use max-height: 999px if this the height is big enough for you.
const button1 = document.getElementById('show');
button1.addEventListener('click', () => {
const image = document.getElementById('image');
const text = document.getElementById('text');
if (image.classList.contains('show')) {
image.classList.remove('show');
text.classList.add('show');
return;
}
image.classList.add('show');
text.classList.remove('show');
});
.block {
overflow: hidden;
height: 100px;
width: 100px;
transition: 0.3s all ease;
opacity: 0;
max-width: 0;
max-height: 0;
}
.block.show {
opacity: 1;
max-width: 100px;
max-height: 100px;
}
img {
max-width: 100%;
}
<button type="button" id="show">
toggle
</button>
<div id="image" class="block show">
<img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" alt="some title" />
</div>
<div id="text" class="block">
some text
</div>
Related
I want to make an auto scrolling image. Here is what I've tried.
Scrolling image
Here is my code.
<style>
.scroll_container {
width: 100%;
height: 200px;
/* background-color: #ddd; */
overflow: hidden;
}
.ads_box_holder {
width: 100%;
white-space: nowrap;
min-width:100%;
width: auto !important;
width: 100%;
}
.ads_box {
display: inline-block;
position: relative;
top: 0;
left: 0;
width: 190px;
height: 200px;
padding: 10px 10px;
margin-right: 10px;
}
.ads_box img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: slide 20s infinite;
}
#keyframes slide {
0%{ transform:translateX(0px) }
10%{ transform:translateX(-200px) }
20%{ transform:translateX(-400px) }
30%{ transform:translateX(-600px) }
40%{ transform:translateX(-800px) }
50%{ transform:translateX(-1000px) }
60%{ transform:translateX(-1200px) }
70%{ transform:translateX(-1400px) }
80%{ transform:translateX(-1600px) }
90%{ transform:translateX(-1800px) }
100%{ transform:translateX(0px) }
}
<style>
<div class="scroll_container">
<div class="ads_box_holder">
<div class="ads_box"><img src="images/ads.png"></div>
<div class="ads_box"><img src="images/blur.jpg"></div>
<div class="ads_box"><img src="images/foot.jpg"></div>
<div class="ads_box"><img src="images/body.jpg"></div>
<div class="ads_box"><img src="images/s.png"></div>
<div class="ads_box"><img src="images/menu.jpg"></div>
<div class="ads_box"><img src="images/face.jpg"></div>
<div class="ads_box"><img src="images/c.jpeg"></div>
<div class="ads_box"><img src="images/foot2.jpg"></div>
<div class="ads_box"><img src="images/b.jpg"></div>
</div>
</div>
Now, I used keyframe css. So, when images move to left one after another, there has empty space in the right side as shown in below
---------
| |
| image | empty space are left here
| |
---------
In the reality, I want to add my images dynamically and images may be over 20 images. So, I'm not sure this keyframes is ok or not when images add dynamically.
I want to replace that empty space to the all of the images inside this box.
So, there is no empty space left and images are always scroll one after another.
But, I don't know how to replace images when space found inside ads_box_holder div.
And I remove css animation and also tried with javascript like this.
<script>
$(document).ready(function(){
var childCount = $(".ads_box_holder :visible").children().length;
var move = 0;
var hideImageTime = 0;
window.setInterval(function(){
hideImageTime += 1;
move += 200;
$(".ads_box_holder").css({
"margin-left":-move+"px",
});
if(hideImageTime > childCount) {
jQuery('.ads_box_holder .ads_box').each(function(){
var next = jQuery(this).next();
count += 1;
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
});
}
},2000);
});
</script>
But it is the same result when I use keyframe css.
NOTE: The image moving style is ok but I just want to place all images when empty space found inside ads_box_holder.
I have no idea how to achieve what I want. I'm really appreciate for any suggestion.
Finally I got what I want. Clone first child and append at last of ads_box_holder and remove first child.
$(document).ready(function(){
function animation() {
$('.ads_box_holder').children(':first').clone().appendTo(".ads_box_holder");
$('.ads_box_holder').children(':first').css({
"margin-left":"-204px",
"-webkit-transition": "all 0.7s ease-out",
"-moz-transition": "all 0.7s ease-out",
"-ms-transition": "all 0.7s ease-out",
"-o-transition": "all 0.7s ease-out",
"transition": "all 0.7s ease-out"
});
setTimeout(function(){$('.ads_box_holder').children(':first').remove()},1500);
}
window.setInterval(animation,2000);
});
I hope it will help for someone.
I am trying to do a simple parallax effect with jQuery and CSS.
I have 2 long divs, one is 2000px and the other is 1000px each one of those divs have a child div with text inside.
I would like to have these child divs to be centered in the middle of the visible window (not the div which is 2000px high, just the visible window) and to stay centered and in the middle while I scroll down, then fade out at a certain point before reaching the next div.
At the moment, I managed to create the html layout and the css, and made the divs to fade out on click using jQuery.
But I am unable to center them in the middle of the window and keep them fixed while I scroll down and fade them out before reaching the next div.
Maybe I can use Waypoint.js to trigger events at certain points in the scroll but how do I keep the div centered and visible to achieve the parallax effect?
DEMO https://jsfiddle.net/fmub10pv/4/
EDIT Are there any plugins (with demo) that can achieve what I want?
EDIT 2 The desired effect is something like this http://davegamache.com/parallax/
HTML
<div class="container" id="firstContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="firstDiv" class="animate text-center">
<h1>First Div</h1>
</div>
</div>
</div>
</div>
<div class="container" id="secondContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="secondDiv" class="animate text-center">
<h1>Second Div</h1>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #16191b;
color: white;
}
#firstContainer {
height: 2000px;
margin-top: 80px;
background: darkslategrey;
}
#secondContainer {
height: 1000px;
background: darkslateblue;
}
.animate {
padding: 20px;
background: mediumseagreen;
}
#firstDiv {
opacity: 1;
-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;
}
#secondDiv {
opacity: 1;
-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;
}
Javascript
$(document).ready(function() {
var current = $(window).scrollTop();
var winHeight = $(window).height();
var total = winHeight - current;
$('#firstDiv').on('click', function() {
if ($('#firstDiv').css('opacity') == 0) $('#firstDiv').css('opacity', 1);
else $('#firstDiv').css('opacity', 0);
});
$('#secondDiv').on('click', function() {
if ($('#secondDiv').css('opacity') == 0) $('#secondDiv').css('opacity', 1);
else $('#secondDiv').css('opacity', 0);
});
});
The following will check if you've passed a certain waypoint and update the opacity for how much further you scroll thereafter.
Do you mind jQuery?
$(window).scroll(function() {
waypoint = 400
if ($(document).scrollTop() > waypoint) {
alpha = 1 - (($(document).scrollTop() - waypoint) / 260) // 260 is an arbitrary number, the size determines how quickly it will fade out (reach 0)
} else {
alpha = 1
}
$("#fade").css({
"opacity": alpha
});
});
https://jsfiddle.net/mqk9xux6/
This can be achieved by creating a class that makes use of the fixed position, which then gets applied to the target element based on scroll offset. Note that the fixed position is not a block-level element, so you will need to give it a width of 95% as well to match the original design:
CSS:
.fixed {
position: fixed;
width: 95%;
}
jQuery:
$(window).scroll(function() {
if ($(document).scrollTop() > 2000) {
$('#firstDiv').removeClass('fixed');
} else if ($(document).scrollTop() <= 2000) {
$('#firstDiv').addClass('fixed');
}
});
In the above example, I've used an offset of 2000px. This means that the first DIV will stay fixed until it overlaps exactly with the second DIV. Scrolling up the page, the first DIV will stay fixed again. Hopefully this is the sort of effect you're looking for.
I've created a fiddle showcasing this here.
Hope this helps! :)
Add fade-in class to the first div initially
<div id="firstDiv" class="animate text-center fade-in">
To center the divs
#firstDiv,
#secondDiv {
position: fixed;
top: 20%;
left: 0;
right: 0;
margin : 0 auto;
height : 500px;
width : 500px;
transition: opacity 0.5s ease;
opacity:0;
}
To fade them out on scroll
$(window).scroll(function (){
var scrollPos = $(this).scrollTop();
if(scrollPos >= 2000)
$("#firstDiv").removeClass("fade-in");
if(scrollPos >= 2200)
$("#secondDiv").addClass("fade-in");
}).scroll();
When a user mouses over a picture, I want to slideUp a description, so that new text will appear. When the user mouses out, the description will slideDown.
This is what I've tried so far:
$pic1.hover(function () {
var text1 = $("<div>Price1:$100</div>").hide();
text1.appendTo($('.this')).slideUp("slow");
},function () {
$(this).slideDown();
}
);
Unfortunately, this doesn't work. I googled around, but couldn't find anything. Is it possible to use slideUp and slideDown to show and hide the text?
A better approach would be to use CSS transitions. They're lightweight and easy to do. You can read the specification on transitions here. Here is a quick guide on the matter.
fiddle
HTML
<div class="imageDiv">
<img src="http://placekitten.com/g/200/300" />
<div class="imageDescription">
What a lovely kitty kat!
</div>
</div>
CSS
.imageDiv {
display: block;
float: left;
overflow: hidden;
position: relative;
width: 200px;
}
.imageDescription {
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
background: rgba(0, 0, 0, 0.4);
color: #f7f7f7;
left: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 100%;
width: 100%;
}
.imageDiv:hover .imageDescription {
display: block;
top: 93%;
}
There a few key things that make this work. First, a CSS transition is used. Transitions are written in the following form:
transition: [property] [duration] [timing-function] [delay];
As can be seen in the example above, I used a transition that targeted the top attribute. I gave it a 0.5s duration and an ease effect. However, this alone wouldn't produce the effect, as the description would just sit below the image and move up on hover. We don't want to see the description until the user hovers over the image!
To address this, you need to add overflow: hidden; to the parent div.imageDiv. This hides the image description, until the transition, when it will be slide up, causing it to no longer overflow.
http://jsfiddle.net/qvbgb/3/
HTML
<div class="imgcontainer">
<div class="image">
<img src="link.jpg" />
</div>
<div class="text">
<h3>Product name</h3>
<p>Description</p>
</div>
</div>
Jquery
$(document).ready(function(){
$('.text').hide();
$('.container').hover(
function () {
$(this).find('.image').slideUp();
$(this).find('.text').slideDown();
},function () {
$(this).find('.text').slideUp();
$(this).find('.image').slideDown();
}
);
})
CSS
.container{
min-width : 150px;
min-height : 150px;
width : 150px;
height : 150px;
cursor : pointer;
display : block;
}
.image img{
width : 150px;
height : 150px;
}
slideUp() will only hide an element, and slideDown() will only show an element. If you want to show an element with slideUp effect or hide with slideDown effect, you have to explicitly call it:
$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);
I have been going through tutorials and past questions, trying to figure out where my code is going wrong for applying an animation to the transition of the images I am trying to display.
ng-show works effectively to only show the selected picture, but the transition of pictures doesn't pick up the effects I try to apply to it.
<!-- Image Buttons -->
<div class="content">
<div ng-repeat='image in images' class="{{image.cls}}"
ng-click="showThis($index)" value="{{image.set}}">
<label>{{image.title}}</label>
</div>
</div>
<!-- Display Image -->
<div id="imgHolder" ng-view class="slidedown">
<img ng-repeat="image in images" ng-src="{{image.url}}"
alt="{{image.id}}" ng-show="nowShowing==$index">
</div>
I realize that I should probably display the images using the same ng-repeat; currently the css to make that happen needs to be adjusted, so that will come later.
Here is .slidedown, containing the animation css:
.slidedown {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slidedown.ng-enter,
.slidedown.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.slidedown.ng-enter {
opacity: 0;
}
.slidedown.ng-enter-active {
opacity: 1;
}
.slidedown.ng-leave {
opacity: 1;
}
.slidedown.ng-leave-active {
opacity: 1;
}
Can anyone provide any tips, errors, directions to head in?
just put the class="slidedown" on the img not the div
<div id="imgHolder" ng-view>
<img ng-repeat="image in images" ng-src="{{image.url}}" class="slidedown"
alt="{{image.id}}" ng-show="nowShowing==$index">
</div>
<div id='container'>
<div id="animate"></div>
</div>
I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .
This should do it
$('#small').hover(function () {
$('#animate').show();
}, function () {
$('#animate').hide();
});
Try:
CSS:
#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}
Script:
$(function(){
$('#container').mouseenter(function(){
$('#animate').fadeTo(1000,0)
.mouseenter(function(){$(this).fadeTo(1000,1)});
}); // use 750 in place of 1000 to animate it fast
});
Docs http://api.jquery.com/mouseenter/
HTML:
<div id='container'>
<div id="animate"> </div>
</div>
Fiddle: http://jsfiddle.net/aZmfz/4/
HTML:
<div id='container'>
<div id="animate">HI!</div>
</div>
CSS:
#container{
width: 100px;
height: 200px;
background-color: black;
}
#animate{
height: 50px;
width: 100px;
background-color: white;
opacity: 0;
}
jQuery:
$("#animate").hover(
function(){
$(this).stop().animate({
opacity: 1
}, 1000);
},
function(){
$(this).stop().animate({
opacity: 0
}, 1000);
}
);
EXAMPLE
You may not want to do a strict show/hide, because the element will have no height/width to hover over when it's hidden. Instead, you may prefer to set the opacity to 0 (to hide) or 1 (to show) and let the animate function transition between the two. You'll also notice that I used the .stop() function. This is because if you hover back and forth over the element it will continue to call the queued up animations. Calling stop first will prevent this.
You can achieve the same effect with pure CSS:
#animate {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#container:hover #animate {
opacity: 0;
}
#container #animate:hover {
opacity: 1;
}
Demo: http://jsfiddle.net/gXz2A/