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.
Related
Does anyone have an idea on how I can rotate a DIV Cube on a mobile Device, like a Smartphone, by touch the screen and moving a finger?
Take a look at the following example:
https://codepen.io/tsluga/pen/mjMpVa
As you can see, I currently have an animation with the following piece of code:
<pre>
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: myAnimation;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes myAnimation {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(0,1, 0, 360deg);
;
}
}
</pre>
How could I implement a touchevent? If someone presses the screen and slides over the screen/cube, I want to rotate the cube instead of the animation currently implemented.
Thanks for any Feedback
I'm not sure if this is a duplicate or not, so forgive me.
Question
Is it possible to change the animation-duration without resetting the animation? If not, is it possible to wait until the final keyframe is completed before removing the animation and re-adding it to start the animation at the slower speed (or even wait until any keyframe is complete)?
Background
I'm making an app that allows people to create groups. I work at a church, and different groups are for different demographics (e.g. children, men, women, all adults, etc). Groups may be for a single demographic or many. Groups may also specify whether childcare is handled by the group or if the parent must take care of it.
We've found that when creating a group intended for adults but that provides childcare at the house the group meets at, people select "Children" which indicates to us that the group is for children, which it is not.
I only have 570px by 456px to work with (against my objections, the group submission page is loaded in a popup iframe), so I had to get creative with layout. Previously (ie, before bootstrap), I had an ugly layout with smaller inputs, and an ugly message explaining that, in the case described above, they should not select children, and it worked to a degree.
Now, I have a blue info button that uses a bootstrap popover to display the message.
This works to a lesser degree, as I suspect people are not clicking the button, as "Who's invited?" seems fairly self explanatory.
My solution is to make the info-sign bounce if they select more than one demographic, and bounce twice as fast if one of the selected checkboxes is "Children".
Code
I've created the classes and added the (simplified) JavaScript to do this.
var iGlyph = $("#glyphInfo");
var btnBounce = $("#btnToggleBounce");
var btnFast = $("#btnToggleFast");
var spanDur = $("#spanDuration");
var spanClass = $("#spanClass");
function updateText() {
spanDur.text(iGlyph.css("animation-duration"));
spanClass.text(iGlyph.prop("class"));
}
$(function() {
btnBounce.click(function() {
iGlyph.toggleClass("bounce");
updateText();
});
btnFast.click(function() {
iGlyph.toggleClass("bounce-fast");
updateText();
});
updateText();
});
/* LESS-generated CSS */
.bounce {
-webkit-animation: bounceKeyframe infinite;
-o-animation: bounceKeyframe infinite;
animation: bounceKeyframe infinite;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
}
.bounce.bounce-fast {
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
}
#keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-webkit-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
#-moz-keyframes bounceKeyframe {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
35% {
-webkit-transform: translate(0, -0.9em);
-ms-transform: translate(0, -0.9em);
-o-transform: translate(0, -0.9em);
transform: translate(0, -0.9em);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
70% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align: center; margin-top: 5%">
<div class="btn btn-info">
<span id="glyphInfo" class="glyphicon glyphicon-info-sign" style="line-height: 22px"></span>
</div>
</div>
<div style="text-align: center">
animation-duration: <span id="spanDuration"></span>
</div>
<div style="text-align: center">
classes: <span id="spanClass"></span>
</div>
<div style="text-align: center; margin-top: 15px">
<div class="btn btn-default" id="btnToggleBounce">Toggle Bounce</div>
<div class="btn btn-default" id="btnToggleFast">Toggle Fast</div>
</div>
This works in Firefox, though when you toggle .bounce-fast, the animation restarts (skips). Not surprisingly, Internet Explorer bounces the icon completely off screen (looks like it doesn't like using both em and px units), but animation-duration-wise, it acts the same as Chrome, which uses whatever animation-duration was set to when the animation rule was set, and never overrides it until the animation rule is unset.
Problem
So, ideally, I would be able to set the animation-duration somehow without having to reset the animation completely. I want a smooth transition from one speed to the other, without the icon jumping.
Is this possible?
Unfortunately there is no way to do this with pure CSS animations. The nature of CSS animations is that the calculations for the transition only have to happen once (when the animation is called) in order to speed them up.
If you want to change speed of animations you'll need to use Javascript (which is nearly as fast, sometimes faster than, CSS animations)
I particularly like Greensock and Velocity
So I am making a website and can make the CSS animation work for when the page is first called but I want it to call everytime the AJAX function is called. Here is the javascript XML call which works
function XML(infoId)
{
var xmlHttp = xmlHttpObjCreate();
if (!xmlHttp) {
alert("The browser doesn't support this action.");
return;
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
elemObj = document.getElementById('textbox');
elemObj.innerHTML = xmlHttp.responseText;
elemObj.className = "bounceInUp";
}
}
// Append GET data to identify which quote we want
var reqURL = "FILE_NAME_HERE_?infoId=" + infoId;
xmlHttp.open("GET", reqURL, true);
xmlHttp.send();
}
Here is an example of what calls the function
Here is the CSS animation code which is named is "bounceInUp"
#textbox {
width: 100%;
background-color: transparent;
height: 200px;
color: #0000FF;
font-weight: bold;
font-size: 22px;
overflow: auto;
padding: 10;
-webkit-animation: bounceInUp 1200ms ease-out;
-moz-animation: bounceInUp 1200ms ease-out;
-o-animation: bounceInUp 1200ms ease-out;
animation: bounceInUp 1200ms ease-out;
}
#-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
I apologize for all the code but I want to make sure everything is here that someone may need to help me. So as of right now the css animation only runs when the page is first loaded not when the XML function is called.
It looks like you are already attaching the animation via the #textbox CSS selector. And your AJAX call adds a class name that appears to have the exact same animation properties that are already applied to the textbox via the #textbox rule.
In order to get your animation to fire again, I suspect you need to clear the animation CSS property off of your #textbox before the AJAX call is sent, then your AJAX call will reapply the animation. You can do this a variety of ways, one off the top of my head would be to create a separate class that clears the animation and apply that classname to #textbox before you do your xmlHttp.send(), that way the textbox is back to a non-animated state before your success handler from the AJAX call reapplies the animation.
To simplify it, you may just want to remove the animation properties from the #textbox CSS rule and just apply and remove the .bounceInUp class name to the element when you want the animation to run. I think that's a cleaner approach.
You can use classList:
this.classList.remove('bounceInUp');
this.classList.add('bounceInUp');
That will re-apply the class and make the bounce happen again. It is simpler and more readable than setTimeout. You're fine with classList since you're using keyframes - each will work on IE10 and above.
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.
I am trying to work around this bug: http://code.google.com/p/chromium/issues/detail?id=20574 thinking of performing the transform, and then afterwards removing it while positioning the element in its end position via JavaScript.
I tried
document.getElementById('popover').style.setProperty("-webkit-transform", "translate3d(0,0,0)")
and
document.getElementById('popover').style.setProperty("-webkit-transform", "none")
None seem to have any effect.
If I remove the transforms and position the elements manually the fixed element does behave as it should.
Here are the transforms themselves:
#popover.open {
display: block;
position: relative;
-webkit-animation: openpopup 0.2s 1;
-webkit-animation-fill-mode: forwards;
}
#popover.closed {
-webkit-animation: closepopup 0.2s 1;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes openpopup {
from {
-webkit-transform: translate3d(0, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0%, 0);
}
}
#-webkit-keyframes closepopup {
from {
-webkit-transform: translate3d(0, 0%, 0);
}
to {
-webkit-transform: translate3d(0, 100%, 0);
}
}
Javascript had a different name for the css property you are trying to change. It's called WebkitTransform.
document.getElementById('popover').style.setProperty("WebkitTransform", "none"); Should work.