I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>
JavaScript
$(window).scroll(function() {
$('.animation-test').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideRight");
}
});
});
$('.element-to-hide').css('visibility', 'hidden');
JSFiddle
Something like this should work.
Working Example
$(window).scroll(function () {
$('.animation-test').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).addClass("slideRight");
} else {
$(this).removeClass("slideRight");
}
});
});
Basically its just using an if statement to find whether the element is within the view port and adding and removing the class. You can toggle the visibility of the element by using:
.element-to-hide{
visibility:hidden;
}
.slideRight {
visibility: visible;
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
Related
I have a few pages on my website and i made a header animation (pulldown). So, i need to reverse my animation (pullUp) when the other one page is clicked. Is there any option to do that ? Or is there any option to make the second animation (pullup) active when the other page is selleced
header{
background-color:black;
height:80px;
text-align:center;
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
There are a few options I can recommend:
Use CSS's :active selector to bind to the hash of the "pulldown" item:
```
second-page:active ~ .drawer {
animation: "pullUp" 1s linear;
}
```
So that when the user clicks on the url to your second page (#second-page), the animation will trigger, thus hiding the drawer itself.
Use Javascript to toggle classes:
(jQuery)
var $drawer = $(".drawer");
var $drawerToggle = $(".drawer-toggle").on("click", function() {
$drawer.toggle("fast");
}
Use an input[type="checkbox"] 'hack':
.drawer-toggle:checked ~ .drawer {
animation: "pullDown" 1s linear;
}
.drawer-toggle ~ .drawer {
animation: "pullUp" 1s linear;
}
Here is my code http://codepen.io/anon/pen/zrXrXM but as i told, when i click on <a> element, page transition is instantly. Is there any possible way to stop transition for a few seccond ?
This is exactly what I want to achieve (animation starts when I hover and reveses after I hover off). I just do not want the animation start until I hover over the object. In code the animation starts right after refreshing.
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
#-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
You can get rid of the animations and just add transform and transition properties directly on the class like this:
.class {
transform: rotate(0deg);
transition: transform 2s;
}
.class:hover {
transform: rotate(360deg);
transition: transform 5s;
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
I print success message using PHP like this :
<div class='alert alert-success'>Success!!</div>
I have this CSS3 Animate:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Now, I need to remove success message with my CSS Animate (fadeOutUp) after 5 seconds using jQuery. How do can i create this?!
You can create a hide a class which hide your element setting the opacity to 0 with a transition and add this class to your div with JavaScript.
CSS
.hide {
opacity: 0;
transition: opacity 1000ms;
}
JS
function fadeOut(el){
el.classList.add('hide');
}
div = document.getElementById('yourDiv');
setTimeout(function(){
fadeOut(div);
}, 5000);
HTML
<div id='yourDiv' class='alert alert-success'>Success!!</div>
Checkout this codepen.
Is this what you are looking for?
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}
or update your .fadeOutUp CSS to
.fadeOutUp {
-webkit-animation: fadeOutUp 5s infinite;
animation: fadeOutUp 5s infinite;
}
Then you can do
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").addClass("fadeOutUp");
}
JSFiddle
I've been trying to create a fadein/fadeout effect for my pages in my Ruby on Rails app. I found a website, https://coderwall.com/p/t5ghhw/animated-page-transitions-in-rails-4-apps, that seemed to offer a reasonable guide, but it isn't working.
In each of my html files (except for application.html.erb), I have a div that encloses all of the content with a class called "primary-content." Then I have a css file, animate.css(adapted from http://daneden.github.io/animate.css/), with the following code:
.animated {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
This css file is in my assets/css folder, and is called in the header of my application.html.erb file.
Then there's the javascript, in a file in the assets/javascripts folder. It's required in application.js and called in the header of application.html.erb--and, when it wasn't working, I also called it at the bottom of each view. The code reads:
document.addEventListener('page:change', function() {
document.getElementById('primary-content').className += 'animated fadeInUp';
});
document.addEventListener('page:fetch', function() {
document.getElementById('primary-content').className += 'animated fadeOutUp';
});
I'm aiming for the existing page to fade out upward, and the new page to fade in upward. Does anyone see what I'm missing? I don't have any experience with keyframes, or with using -webkit in css, but that's all borrowed from the animate.css site.
Thanks!
I need to override the default slide effect to dissolve effect.
When changePage function is called I need to slowly dissolve the current page to new page.
I tried with following CSS
#keyframes dissolve {
0% { opacity:1; }
5% { opacity:0.9;}
15% { opacity:0.7;}
25% { opacity:0.5;}
35% { opacity:0.3;}
45% { opacity:0;}
55% { opacity:0.2;}
65% { opacity:0.4;}
75% { opacity:0.6;}
85% { opacity:0.8;}
95% { opacity:0.9;}
100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
-webkit-animation-name: dissolve;
-moz-animation-name: dissolve;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 350ms
}
I have created a fiddle with above css.
The page transistion is not smooth with above code.
How to correct page transistion to run smoothly?
you need also vendor prefixes in #keyframes: #-webkit-keyframes and so on ..
I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile.
Please add #-webkit-keyframes ,#-moz-keyframes, and #-o-keyframes in CSS like #keyframes added below.
#keyframes dissolve-out {
0% { opacity: 1; }
20% { opacity: 0.5; }
40% { opacity: 0.2; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes dissolve-in {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0; }
60% { opacity: 0.2; }
80% { opacity: 0.6; }
100% { opacity: 1; }
}
.slideup.in, .slide.in, .slide.in.reverse {
-webkit-animation: dissolve-in;
-moz-animation: dissolve-in;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
-webkit-transform: translateX(0%);
-webkit-animation: dissolve-out;
-moz-transform: translateX(0%);
-moz-animation: dissolve-out;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
Please see the demo.
Above CSS will give you a dissolve effect with overriding the default slide effect of page transistion in jQuery Mobile.