I am trying to figure out how to make a container that is overflowing with components start scrolling through them and infinitely repeating (When moving outside of the container, reappearing at the top).
Example of the component:
<template>
<div class="grid grid-cols-2 mt-5 text-3xl">
<div class="flex">
<img class="h-20 w-20 rounded-full object-cover object-top" :src="absentee.employee.image" alt="../../assets/silhuett.png">
<span class="ml-4 font-bold mt-auto mb-auto">{{absentee.employee.name}}</span>
</div>
<span class="ml-2 m-auto mb-auto text-4xl">{{absentee.reason}}</span>
</div>
</template>
Components are added like this:
<div class="grid-item row-start-3 row-span-1 overflow-y-hidden">
<font-awesome-icon
class="text-blue-800 text-5xl"
:icon="['fas', 'house-user']"
/>
<span class="ml-5 text-5xl">Frånvaro</span>
<div class="autoscrolling">
<div v-for="absentee in store.dashboard.aftersales.absentees" :key="absentee._id">
<OneAbsentee :absentee="absentee" />
</div>
</div>
</div>
I tried to use css animations but I cant get them to reappear at the top while moving out of view, they just scroll out of view then, Pop!, the reappear at the top again and restarts.
.autoscrolling {
position: relative;
top: 270px;
/* Starting position */
-moz-transform:translateY(-80%);
-webkit-transform:translateY(-80%);
transform:translateY(-80%);
/* Apply animation to this element */
-moz-animation: autoscrolling 15s linear infinite;
-webkit-animation: autoscrolling 15s linear infinite;
animation: autoscrolling 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes autoscrolling {
0% { -moz-transform: translateY(-80%); }
100% { -moz-transform: translateY(80%); }
}
#-webkit-keyframes autoscrolling {
0% { -webkit-transform: translateY(-80%); }
100% { -webkit-transform: translateY(80%); }
}
#keyframes autoscrolling {
0% {
-moz-transform: translateY(-80%); /* Firefox bug fix */
-webkit-transform: translateY(-80%); /* Firefox bug fix */
transform: translateY(-80%);
}
100% {
-moz-transform: translateY(80%); /* Firefox bug fix */
-webkit-transform: translateY(80%); /* Firefox bug fix */
transform: translateY(80%);
}
}
Related
How can I trigger CSS class to start my logo animation when scrolling/changing slide with fullpage.js?
I have this (it works alright) for animating my SVG wheel logo:
.logo-img:hover #wheel {
-webkit-animation: in 1s;
transform-origin: 49% 50%;
}
#wheel {
-webkit-animation: out 1s;
transform-origin: 49% 50%;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
It's a simple animation of spinning wheel 360deg., now I want it to spin when scrolling and use "in/out" keyframes depending on sliding page up or down.
I'm using fullpage.js and jquery v2.2.4
I hope It makes sense.
Thanks
Use the fullpage.js state classes.
So you can do:
.fp-viewing-section1-slide1 .myItem{
/*Whatever */
}
See my video tutorial here:
https://www.youtube.com/watch?v=qiCVPpI9l3M&t=5s
I created this animated fidget spinner for a project.
https://jsfiddle.net/e2tt2mao/450/
Right now i am simply rotating the object by using CSS keyframes.
However I was wondering how I would make the speed change more randomly? For example times where its spinning at a slower rate vs times where it spins at a fast rate.
Here is an example of the type of spin animation i would like: https://68.media.tumblr.com/6b689487196da8bea9d540e203f7cd2e/tumblr_oqapg6uMXW1s5laego1_500.gif
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
One posibility is to nest several containers, and set a different animation for each one - but you can reuse the keyframes between them.
Play with the timing and so and you can get different effects:
div {
display: inline-block;
}
.inner {
width: 200px;
height: 200px;
background-color: tomato;
}
.container {
margin: 30px;
animation: rotate 3s ease-in-out infinite;
}
.container2 {
animation: rotate 5s ease-in-out infinite;
}
.container3 {
animation: rotate 7s ease-in-out infinite;
animation-direction: alternate-reverse;
}
#keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="container">
<div class="container2">
<div class="container3">
<div class="inner">
</div>
</div>
</div>
</div>
I have an angular2 app with typescript that uses SystemJS; I used the following seed app.
When on desktop, you can see the loading text in between the tags (e.g. Loading...).
On my index page, I have a small loading div to show my apps being slow on first-time load.
But this div doesn't ever show on mobile.
Index Code
<app>
<header>
<nav>
<div class="container col-sm-10 col-sm-offset-1">
<div class="navbar-header">
<a class="navbar-brand col-xs-3 col-xs-offset-1">
<img src="./assets/logo.png" />
</a>
</div>
</div>
</nav>
</header>
<div class="bounceInDown animated">
<div class="loading-wrapper animated fadeIn">
<p class="loading-text">Hold on!<br />We're unpacking...</p>
<div class="loading-icon preload"></div>
</div>
</div>
</app>
Let me know if you need any more code examples.
I basically want this div inside the app tags to show on mobile; I'm open to any jQuery mobile tricks, too.
It seems to be the keyframe. Can you let me know whats wrong?
CSS and keyframe Code
.loading-icon {
animation: scaleout 1.0s infinite ease-in-out;
background-color: #ffffff;
border-radius: 100%;
display: inline-block;
height: 40px;
margin: 100px auto;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
width: 40px;
}
}
#-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
#keyframes scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
Safari is picky on keyframe animations, if nothing is showing try removing the bounceInDown class and then try to re-add the animation features one by one and see what breaks.
EDIT: first try to move the bounceInDown -class in your css to before the
#-webkit-keyframes bounceInDown
I'm trying to get content to move across the screen but I was having trouble moving text with Bootstrap's carousel.
I have an animation working, but the divs sit on top of each other so they animate in and out of their own positions, not in and out of the same position.
Here's the CSS
/* Home and about pages */
#about-page {
transform: translateX(200%);
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
.slideInLeft {
transform: translateX(-200%);
animation: slideInLeft 1s forwards;
}
.slideOutRight{
transform: translateX(200%);
animation: slideOutRight 1s forwards;
}
.slideInRight {
animation: slideInRight 1s forwards;
}
/* Slide in from the left */
#keyframes slideOutLeft {
0% { transform: translateX(0%); }
100% { transform: translateX(-200%); }
}
#keyframes slideInLeft {
0% { transform: translateX(-200%); }
100% { transform: translateX(0%); }
}
#keyframes slideOutRight {
0% { transform: translateX(0%); }
100% { transform: translateX(200%); }
}
#keyframes slideInRight {
0% { transform: translateX(200%); }
100% { transform: translateX(0%); }
}
which is triggered by the following JavaScript
$(function() {
// Go to home
$("#home-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#about-link').removeClass('active');
// Slide in homepage
$('#home-page').removeClass('slideOutLeft');
$('#home-page').addClass('slideInLeft');
// Slide out about page
$('#about-page').removeClass('slideInRight');
$('#about-page').addClass('slideOutRight');
$('#about-page').addClass('hidden');
});
// Go to about slide
$("#about-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#home-link').removeClass('active');
// Slide out homepage
$('#home-page').removeClass('slideInLeft');
$('#home-page').addClass('slideOutLeft');
$('#home-page').addClass('hidden');
// Slide in about page
$('#about-page').removeClass('slideOutRight');
$('#about-page').addClass('slideInRight');
});
});
You can see the problem at testing version of the site here.
Thanks for all of your help and advice.
First add a class item in your page containers
<div class="inner cover">
<div id="home-page" class="item">
<!-- content -->
</div>
<div id="about-page" class="item">
<!-- content -->
</div>
</div>
Add this block in your css
.inner.cover {
position: relative;
overflow: hidden;
height: 200px;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I'm trying to show infinitely rotating image after some event in js.
Works perfectly in Chrome 26, Firefox 19, but fails in Opera 12 (latest).
I use initial image with style="display: none" like this:
<img src="http://example.com/img.png" id="test" style="display: none">
Then I show the image (remove display: none):
$('#test').show();
Expected behavior: see rotating image. Rotation does not happen in Opera.
Is this an Opera bug? I know I can start animation by applying it with class after image is shown, but I want to figure out how to trigger it when image has animation set initially.
Animation works fine when the initial image is shown (display: block).
Here is jsFiddle example: http://jsfiddle.net/vdJLL/
CSS which I use for rotation:
#test {
-webkit-animation: rotate 5s linear 0s infinite normal;
-moz-animation: rotate 5s linear 0s infinite normal;
-o-animation: rotate 5s linear 0s infinite normal;
-ms-animation: rotate 5s linear 0s infinite normal;
animation: rotate 5s linear 0s infinite normal;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
I've just ran into the similar problem - I've been trying to js display:none other div (that wasn't even affecting the animation) and got on Opera animation freezed (which, what's even more funny, could be unfreezed by entering dragonfly and re-enabling animation part of style) - so it sounds indeed like an Opera bug.
Anyways, I just learned a workaround - instead of display:none, it'll work with
visibility:hidden; height: 0px;
See also your jsfiddle updated http://jsfiddle.net/vdJLL/3/