I know this question has been asked before but I can't get mine working. I have a javascript array in the head of my html document which makes the images change to the next one in the array, but I can't make transitions work. I've tried using css properties and I've very briefly tried jquery but as I haven't used jquery before I don't know how to do anything with it.
I have this for javascript:
<script type="text/javascript">
image2 =new Array("images/product1_thumb.png", "images/product2_thumb.png", "images/product3_thumb.png"
, "images/product4_thumb.png")
num =0;
imgNum =image2.length;
function rotate()
{
if(document.images)
{
if(num ==imgNum)
{
num = 0;
}
}
document.getElementById('image2').src = image2[num];
num++;
setTimeout("rotate()",4000);
}
</script>
This is the html:
<section id="right">
<img src="images/product1_thumb.png" ID="image2" alt="" title="" />
</section>
And this css is what I've used to try to make the transitions:
#image2{
margin-left:100px;
position:inherit;
-moz-transition: all 2s ease-in-out 2s;
-webkit-transition: all 2s ease-in-out 2s;
transition: all 2s ease-in-out 2s; /* opacity 5s ease-in-out; */
}
#right{
padding-top:10%;
margin-left:70%;
width:30%;
background-image:url('images/watermark50.png');
background-repeat:no-repeat;
background-position:center;
height:100%;
}
#right img{
margin-left: 30%;
}
I'd be grateful for any help but if it uses jquery you'd have to start at the beginning as I have no idea how it works.
Related
I am trying to make an animated loading text. But here my duration property is not working.
Here is the html code:
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Here is the CSS code:
.l1{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:1s;
animation-iteration-count:infinite ;
animation-delay:0.5s;
}
.l2{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:2s;
animation-iteration-count:infinite ;
animation-delay:1s;
}
.l3{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:3s;
animation-iteration-count:infinite ;
animation-delay:1.5s;
}
#keyframes dots{
from{visibility:hidden ;}
to{visibility:visible ;}
}
But the duration property is not working. The three dots are appearing one after another, but they stay constantly visible after appearing all the three dots.
But I want to make the all the three dots disappear again after appearing and to repeat it infinite time.
Thank you
.l1, .l2, .l3{
display:inline-block ;
opacity: 0;
color:red;
animation:dots 1.5s infinite ease;
animation-fill-mode: forwards;
}
.l1{
animation-delay:0.5s;
}
.l2{
animation-delay:1s;
}
.l3{
animation-delay:1.5s;
}
#keyframes dots{
0%{opacity:1 ;}
100%{opacity:0 ;}
}
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Instead of animating visibility, use opacity from opacity: 0 to opacity: 1
Remove visibility:hidden from all li classes
I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length.
Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings.
I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.
Here's an example on how to do something like this with pure CSS.
You can easily alter it to bring it to your needs.
$(document).ready(function() {
$('.myList img').each(function(i){
var item = $(this);
setTimeout(function() {
item.toggleClass('animate');
}, 150*i);
})
});
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myList img {
float: left;
margin: 5px;
visibility: hidden;
}
.myList img.animate {
visibility: visible;
animation: FadeIn 1s linear;
animation-fill-mode:both;
animation-delay: .5s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
</div>
I'm trying to create a fade in fade out effect to apply on page load and when leaving the page... But I need it to use only css. My boss wants this effect, but i don't want to use javascript (I'm afraid it won't always work, and it is not working properly...)
The javascript for this effect is this, does anybody know how to do this using only css?
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$(".link").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
I think the only possibility is apply css transition via a body class.
<style>
body.hide{
opacity: 0;
}
body.hidefast {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
opacity: 0;
}
body {
transition:All 2s ease;
-webkit-transition:All 2s ease;
-moz-transition:All 2s ease;
-o-transition:All 2s ease;
opacity: 1;
}
</style>
<body class="hide">
content content
<a class="link" href="http://http://stackoverflow.com/">LINK</a>
<script type="text/javascript">
var linklocation;
$(document).ready(function() {
//$("body").css("display", "none");
//$("body").fadeIn(2000);
$("body").removeClass("hide");
$(".link").click(function(event){
event.preventDefault();
linkLocation = this.href;
//$("body").fadeOut(1000, redirectPage);
$("body").addClass("hidefast");
setTimeout(redirectPage, 1000);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</body>
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices or anything to complex.
I am thinking I need to create a wrapper div with a overflow of hidden and a separate div with all the text that is position absolute in the wrapper. Then animate the .text div up or down to show the text. I have no experience with css animations.
Here is what I want to do but with css not javascript:
http://jsfiddle.net/trav5567/8ejqsywu/
Here is my javascript:
var quotes = $(".whoiam").find('h2');
var quoteIndex = -1;
quotes.hide();
function showNextQuote() {
++quoteIndex;
console.log(quoteIndex);
if(quoteIndex === quotes.length){
console.log($(this));
//console.log('index greater than or equal to h2 length');
//$(this).fadeIn('200');
}else{
console.log('Kepp going');
quotes.eq(quoteIndex % quotes.length)
.fadeIn(500)
.delay(500, checkIndex(quoteIndex,quotes.length))
.fadeOut(500, showNextQuote);
}
}showNextQuote();
function checkIndex(index, length){
var length = length-1
if(index === length){
console.log('check good');
end();
}
}
Here is my HTML:
<div id="splash-wrapper">
<div class="row">
<div class="small-12 columns">
<h1>Travis M. Heller</h1>
<div class='whoiam'>
<h2>Front End Developer</h2>
<h2>Illustrator</h2>
<h2>Web Master</h2>
<h2>Front End Developer</h2>//This value will be the last to show on loop.
</div>
<button class="btn center gotoPortfolio">ENTER</button>
</div>
</div>
</div>
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/
There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them!
#container{
overflow:hidden;
height:48px;
}
.whoiam{
-webkit-animation: move;
position:relative;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
#-webkit-keyframes move {
0% { margin-top: 0em; }
25% { margin-top: -48px; }
50% {margin-top: -96px;}
75% {margin-top: -144px; }
100% {margin-top: 0;}
}
h2{
-webkit-animation: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
I'm creating a form in angularjs in which there are two ngShow for error messages. Now, I want to crossfade these two messages placing them in the same spot. But, i'm not sure how to get it.
Here is the plunker link: http://plnkr.co/edit/EcT2oOmClz65WUgXgG4g?p=preview
I'm using 1.2.4 and linked the ng-animate lib. Right now the animation (fading in/out) is achieved using CSS not JS:
html:
<input type="email"
name="email"
class="form-control"
id="email"
placeholder="Email"
maxlength="100"
title="Company issued email address"
required
ng-class=""
ng-model="user.email"
ng-blur="buyContactForm.email.$blured = true" />
css:
.errAnimate {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
.errAnimate.ng-show{
opacity: 1;
}
.errAnimate.ng-show-add, .errAnimate.ng-show-remove {
display:none!important;
}
.errAnimate.ng-hide{
opacity: 0;
}
.errAnimate.ng-hide-add, .errAnimate.ng-hide-remove {
display:block!important;
}
JS:
myApp.controller('myCtrl', function($scope){
$scope.user={
email: ''
};
$scope.showFieldError = function(formField, error, blured){
if(blured){
return formField.$error[error] && !formField.$pristine && formField.$blured;
}else{
return formField.$error[error] && !formField.$pristine;
}
};
// set live validation function for view load mode
$scope.showError = $scope.showFieldError;
});
The way you can do it is by adding position: absolute to the container's style, like this:
.errAnimate {
position: absolute;
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
This will make both errors have the same position while fading, and thus overlapping (which is what I think you mean by crossfading)
I also had to change the width of the container because its width was making the error messages span several lines.
Here is a link to the edited plunker