A banner rotate3d loop with "on transitionend" - javascript

http://jsfiddle.net/CA4C5/
I am trying to make a 3d banner rotation.
First i had build 4 sides of it and then noticed that I probably only need 2:
/ Front side is visible and has Banner1 on it
/ it rotates down and makes Banner2 visible
/ once that is completed (on transitionend) it has to do 2 things simultaneously: 1. rotate back to the previous state in 0ms and change image 1 for 2 and 2 for 3 -> that works
/ upon reaching the last banner (var anzahlbanner) it should basically start over with number 1 (which seems tricky because when the last one slides into place and flips back it needs to show the last (f.e. 6 on the front) and banner1 on the hidden side.
But I dont even get so far because this function seems to fire twice, namely on the smooth transition and then on the flip back transition.
$("#eins").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
You will see that when you activate line 31 in the javascript.
How can I get my counter go up the way I need it to?
Edit: It actually seems that the function is not called twice but one additional time for each turn: 1, 2, 3, 4, 5, 6, 7 times etc.

I think that I can simplify your javascript a little.
The only issue is that I changed your images for divs, with the image set in the background.
Now, your HTML is:
<div id="container">
<div id="eins">
<div></div>
</div>
<div id="zwei">
<div></div>
</div>
</div>
your CSS is
#container {
width: 1269px;
height: 294px;
}
#eins, #zwei {
position:absolute;
top:0px;
left:0px;
}
#eins {
width: 1269px;
height:294px;
z-index:150;
-ms-transform-origin: 50% 50% 147px;
-moz-transform-origin: 50% 50% 147px;
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
-webkit-animation-delay: -2s;
}
#zwei {
background:red;
width: 1269px;
height:294px;
z-index:70;
-ms-transform-origin: 50% 50% 147px;
-ms-transform: rotate3d(1, 0, 0, -90deg);
-ms-transition: 1s;
-ms-transition-timing-function: ease;
-moz-transform-origin: 50% 50% 147px;
-moz-transform: rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
}
#eins div, #zwei div {
height:294px;
}
#eins div {
-webkit-animation: imageseins 8s infinite;
-webkit-animation-delay: -2s;
}
#zwei div {
-webkit-animation: imageszwei 8s infinite;
}
#-webkit-keyframes rotate {
0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}
#-webkit-keyframes imageseins {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
#-webkit-keyframes imageszwei {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}
And, as promised, your javascript is much easier (none)
fiddle
The trick is to set an animation on the images, that is changing the image when the div is not visible.

Related

CSS animation of plane flying onto page and landing

I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method?
.plane-animation{
animation: animationFrames linear 3s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 3s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 3s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 3s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
10% {
transform: translate(90%,-30px) rotate(5deg) ;
}
20% {
transform: translate(80%,-40px) rotate(15deg) ;
}
30% {
transform: translate(70%,-50px) rotate(10deg) ;
}
40% {
transform: translate(60%,-60px) rotate(5deg) ;
}
50% {
transform: translate(50%,-70px) rotate(0deg) ;
}
60% {
transform: translate(40%,-60px) rotate(-5deg) ;
}
70% {
transform: translate(30%,-50px) rotate(-10deg) ;
}
80% {
transform: translate(20%,-40px) rotate(-15deg) ;
}
90% {
transform: translate(10%,-30px) rotate(-10deg) ;
}
100% {
transform: translate(0%,0px) rotate(0deg) ;
}
}
<img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" />
It seems like you're on the right track, and CSS animations should be perfect for the task you're solving. A few quick pointers:
You've made prefixed animation calls like -webkit-, -moz-, -o- and -ms-. However, you've not made any prefixed keyframes. This makes the first part wasted. If you want full browser compatibility you also need prefixed keyframes and prefixed transforms.
Like this:
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
transform: translate(100%,-20px) rotate(0deg) ;
}
}
#-webkit-keyframes animationFrames{
0% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
}
....
and so on.
The other part is more esthetic, but I suggest trying to work on one property at a time. Try drawing your animation in lines on a piece of paper first, figure out the axis and vectors that it's moving on and code one at a time. I'm afraid no-one on here can give you a finished piece of code, but with enough practice, I'm sure you will get the hang of animating.

How to get keyframes animation to stop on last animation

I'm looking to stop my animation on my 100% keyframe.
Here it is, jQuery is shown at bottom. What I'm trying to figure out completely is how to animate these boxes so that if you click on whichever one is on the top, it moves to the bottom, and then the bottom one moves to the top. Any ideas?
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#keyframes active {
0% {
transform: translateX(0px);
}
33% {
transform: translateX(105px);
}
66% {
transform: rotateY(180deg) translateY(210px);
}
100% {
transform: rotateY(0deg) translateY(210px);
}
}
.all-wrap {border: 1px solid black;
}
.container {width:100px;height:100px;background-color:red;
perspective:400px;perspective-origin:50% 100px;
margin-right:auto;
display: block;
border: 2px solid purple;
animation-fill-mode: forwards;
background-repeat: no-repeat;
}
.containerActive {
animation: active 3s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-style: preserve-3d;
animation-direction: normal;
}
</style>
</head>
<body>
<div class="all-wrap">
<div class="container">
</div>
<div class="container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/rotate.js"></script>
</body>
</html>
/* Here is the jQuery: */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});
Stopping on the 100% keyframe should be fulfilled with this code:
animation-fill-mode: forwards;
This has been previously addressed here:
Stopping a CSS3 Animation on last frame
I've solved it. Everything was perfect besides my key frames. Since I had it rotating 180 degrees at first, that means that it is going to rotate another 180 degrees at 100% to get back to it's original orientation. I can't declare it at 100% because I need 100% to have the correct translation. So I came up with a clever idea, how about making the rotation degrees half of what I want it to be? This would give it the appearance of a full turn.
Key frames:
#keyframes active {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, 105px);}
75% {transform: rotateY(90deg) translate(-105px, 105px);}
100% {transform: translate(0px, 105px);}
}
#keyframes active2 {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, -105px);}
75% {transform: rotateY(90deg) translate(-105px, -105px);}
100% {transform: translate(0px, -105px);}
}

how to trigger animation when the user scrolls to page section

I'm using a simple animate.css animation on a div on my website.
It all works fine however I want to trigger the animation when the user scrolls to that particular section on the site, rather than what it does currently which is running as soon as the website loads.
https://jsfiddle.net/u4ff2tfk/6/
This is the code so far:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
#keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
<div data-anchor="intro-section-1" class="section intro-section-1">
<div class="float-left ">
<div id="executive-nav">
<p onclick="openSideNavBlue()" class="nav-section-title">Executive Summary</p>
</div>
<div class="intro-text animated bounce">
<p>It’s our sixth annual report and as the years go by, each iteration becomes an increasingly useful snapshot that captures the IT landscape both as it was over the last 12 months, and in transition from the years before it.
<br>
<br>There are 48 fewer respondents in this year’s survey than in 2015, although the number of respondents vary between large, medium and small organisations has stayed relatively consistent.
</div>
</div>
<div class="float-right">
<p class="intro-title">Welcome to
<br>the 2016
<br>Databarracks
<br>Data Health
<br>Check</p>
<a href="#intro-section-2">
<img class="blue-arrow" src="img/blue-arrow.svg">
</a>
</div>
</div>
See this fiddle http://jsfiddle.net/apaul34208/ozww5cvj/18/
The basic idea is to create a container. Within that container give some specifications of where exactly you want the animation to be I.E
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
You want to loop through this and then have an if statement checking the boundary conditions. If it is indeed within the boundary, you can add a class which will have the necessary info for the transformation. I added the working fiddle on top.
I'm not the best at css, but maybe you could try using jQuery to do the animation? It could then be basically whatever animation you'd prefer like maybe slideIn, fadeIn etc, and you could easily define it with an if statement.

Repeat animation every 3 seconds

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?
My html:
<img src="images/fork.png" class="fork wow rubberBand" >
My CSS class:
.fork {
position: absolute;
top: 38%;
left: 81%;
max-width: 110px;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-delay: 5s;
}
The solution can be in JS or CSS3.
With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.
In the below snippet, the following is what is being done:
The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(0px);}
75% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
animation-delay: 3s;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
LIke this
html
<div class="halo halo-robford-animate"></div>
css
body{
background: black;
}
.halo{
width: 263px;
height: 77px;
background: url('http://i.imgur.com/3M05lmj.png');
}
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5
}
100% {
opacity: 1;
}
}
jsfiddle

CSS3 animation change background-image without sliding

This is the current code I have
.jack_hitting{
-moz-animation: jackhitting 0.5s infinite;
}
#-moz-keyframes jackhitting {
0% {
background-position: -8px -108px;
}
20% {
background-position: -41px -108px;
}
40% {
background-position: -73px -108px;
}
60% {
background-position: -105px -108px;
}
80% {
background-position: -137px -108px;
}
100% {
background-position: -8px -108px;
}
}
and this cycles through the background image sliding to the next one, but i would rather have it not slide, so that it basically works like the following js code:
document.getElementById('id').style.backgroundPosition='-8px -108px';
Is there an effect that can do what I would like?
Thanks in advance :)
I think I found it: step-start (I think it's one of multiple that could do this in the animation-timing-function category)
animation: jackhitting 10s step-start infinite;
Long-form would be
animation-name: jackhitting;
animation-duration: 10s;
animation-timing-function: step-start;
animation-iteration-count: infinite;
Unfortunately, you'll have to prefix this for each browser for now.
Here's a fiddle to test it out:
http://jsfiddle.net/Ym6b5/4/
(The div is much too big. I wanted you to see the background image move and see if it's what you were after)
The animation-duration is the total amount of time it'll take to go through your keyframes. The animation-delay that I thought was the delay between steps is the delay before the animation should start.
http://dev.w3.org/csswg/css3-animations
Hope it's what you were looking for.
Cheers,
iso

Categories