The Class "anim" needs to fade in from top to bottom
HTML code
<div class="col-xs-6" style="position:relative;">
<img src="<?= site_url('assets/image/right_bg.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
<img class="anim" src="<?= site_url('assets/image/right_cover_1-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_2-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_3-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_4-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_5-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_6-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_7-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_8-11.png'); ?>">
<img class="anim" src="<?= site_url('assets/image/right_cover_9-11.png'); ?>">
<img src="<?= site_url('assets/image/right_bg_mid.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
</div>
CSS code
.anim {
display:none;
width:100%;
position:absolute;
top:-100px;
left:0;
}
I would like to work with show() and top:0px in jquery animation, thanks a lot for helping
The CSS way:
Create a costum animation
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Then, apply to the divs you want to fade
.anim {
display:none;
width:100%;
position:absolute;
top:-100px;
left:0;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
if you want the divs to fade in from top to bottom, you can give each of the divs a unique class name and then create a selector for each of them with the animation css command (the last five lines in the selector above) . The only thing you change is the argument of the seconds. The top should fade the fastest (suppose 0.2s) and then increase it until the last (all the code here should be in one cssfile)
The jQuery way
Put all the divs in an array and then animate each of the while increasing the delay
$(document).ready(function() {
$(".anim").each(function(index, value) {
$(value).fadeTo(index * 1000, 1);
});
});
While you can play with the fading time (suppose, add index*2000 instead of 1000) Make sure opacity is 0 before fading
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments