We Keep Coding

Automatically scrolling repeating list of components Vue3

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%);
}
}

CSS: Wrapping Marquee

I am making a marquee in Javascript and CSS that displays various notifications.
Right now, I am using Javascript to update the transform: translateX() on a specified interval.
Here's a codepen of what I have working so far.
I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.
I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.

You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.
HTML
<div id="maindiv">
<div id="div1">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
<div id="div2">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
</div>
CSS
#maindiv{
border: 2px solid black;
overflow: hidden;
white-space: nowrap;
}
#div1 {
display: inline-block;
animation: marquee 10s linear infinite;
}
#div2 {
display: inline-block;
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
#keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
jQuery
$('#maindiv').width($('#div1').width());

How to make the div not dissapear when rotateY(90deg)

On my webpage I have a div. On that div I have "animation" that simulates the div being turned over (flipped).
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
I rotate the "wrapper" div with the jQuery plugin transit. What the plugin does is just apply the CSS;
transform: rotateY(180deg);
When the div is on rotateY(90deg), I have to load some new content in the #content div. This takes a minuscule amount of time, but in the animation you can see that the div is gone/hidden fore that time.
SEE DEMO FIDDLE
(note that I don't have the actual content loading in here)
Is it possible to have the dive not totally disappearing when rotateY(90)?
Unfortunately I have no control over the HTML itself because it is being generated.

Try to add thickness to it. Refer to something like this: want to show the thickness of an element while it rotate
But make the animation of the css:
0%: transform: rotateY(0deg);
50%:transform: rotateY(90deg);
100%:transform: rotateY(180deg);
Hope this helps.
Make sure the jQuery plugin has css files or look into it.
And also you could do this using basic css and jQuery.

Don't change the contents of the div, just create two sides:
<div id="wrapper">
<div class="side-a">
Some content
</div>
<div class="side-b">
Some content
</div>
</div>
CSS:
#wrapper{
transition: all 2s;
position: relative;
}
#wrapper.flip{
transform: rotateY(180deg);
}
.side-a{
z-index: 1;
opacity: 1;
position: absolute;
height: 100%;
transition-delay: 1s; //half the transition time of the wrapper
}
.side-b{
z-index: 0;
opacity: 0;
transform: rotateY(180deg);
position: absolute;
height: 100%;
transition-delay: 1s;
}
.flip side-a{
z-index: 0;
opacity: 0;
}
.flip side-b{
z-index: 1;
opacity: 1;
}
Javascript:
$('.next-slide').click(function(){
$('#wrapper').addClass('flip');
});
$('.prev-slide').click(function(){
$('#wrapper').removeClass('flip');
});

Blurryt text by transform: Rotate in Chrome

I have a list Hexagons In my web page like this
I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly
I searched a lot but there were no exact way.
I used this article to make these hexagons
http://www.queness.com/resources/html/css3-hexagon/index.html
and this is my html
<div class="hex hex-3">
<div class="inner">
<h4>Energy</h4>
<hr />
<p>
</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
and some part of css which I used transform:rotate in it
.hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
any idea how to fix it?

Have been busy and it took me a while to find out but following css solves the issue:
.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
backface-visibility: inherit !important;
}
I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.

Flipping multiple divs by clicking different buttons using CSS/Javascript

I'm really new to Javascript. I've been playing around a bit, and had managed to get multiple div's on a page to flip individually, using tutorials and some other help. Now, I want to see if I can flip those same div's using a button or a hyperlink instead.
I thought it would be as simple as moving the class that controls the flip to the button, but that doesn't seem to be the case. I've read that I need to adjust my Javascript to work from a passed id.
Problem is, I don't know how to do this. I've tried passing the button id through to my Javascript function on click (like so: <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>), but that doesn't work. I'm probably way off base here.
My fiddle is here. I've left the third div as I had it before, working, just to show you what I've started from.
Any help would be much appreciated.
HTML:
<p>some content above the flip card</p>
<h1>The CSS flip card:</h1>
<div class="large_box_main">
<div>
<div class="sm_box" id="card-1">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.catchat.org/images/ferals_block_2009.jpg" />
</div>
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
</div>
</div>
<div>
<div class="sm_box" id="card-2">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.petrescue.org.nz/files/animal/attachment/93/small_cats.h5.jpg" />
</div>
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
</div>
</div>
<div class="sm_box flip-it">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="https://s-media-cache-ak0.pinimg.com/236x/0f/4a/56/0f4a5681046ad10f36098451bf2128d2.jpg" />
</div>
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Front</p>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Back</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.large_box_main {
width:100%;
margin:0px 0px 10px;
float:left;
display:inline;
}
.sm_box {
width:180px;
/* The width of this element */
margin:10px 15px 20px;
border: 1px solid #e3d9ec;
border-radius: 10px;
float:left;
}
.sm_box:hover {
border: 1px solid #9975B9;
}
.sm_img_box {
width:165px;
margin:6px;
float:left;
display:inline;
}
.sm_info_box {
width:165px;
margin:8px;
background-color:#e3d9ec;
float:left;
display:inline;
text-align:center;
line-height:7px;
border-radius: 5px;
}
img.image {
display:block;
margin:0px auto;
}
.flipcard {
position: relative;
height: auto;
min-height: 0px;
/* Flip card styles: WebKit, FF, Opera */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s;
-moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s;
-o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s;
/* only height adjustment for IE here */
-ms-transition: min-height 1s ease-out 0s;
}
/* The class that flips the card: WebKit, FF, Opera */
.flipcard.card-flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flipcard .flipcard-front, .flipcard .flipcard-back, .front, .back {
top: 0;
left: 0;
width: 100%;
/* backface: all browsers */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/* Flip card styles: IE 10,11 */
-ms-perspective: 800px;
-ms-transform-style: flat;
-ms-transition: -ms-transform 1s ease-out 0.5s;
}
.flipcard .flipcard-front, .front, .back {
position: relative;
display: inline-block;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipcard .flipcard-back {
position: absolute;
display: none;
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
/* webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371,
You need this fix if you have any input tags on your back face */
-webkit-transform: rotateY(180deg) translateZ(1px);
}
/* The 2 classes that flip the faces instead of the card: IE 10,11 */
.flipcard .flipcard-front.ms-front-flipped {
-ms-transform: rotateY(180deg);
}
.flipcard .flipcard-back.ms-back-flipped {
-ms-transform: rotateY(0deg);
}
.info {
text-align:justify;
padding:0px 5px;
line-height:initial;
}
Javascript:
function flipThis() {
var $this = $(this);
var card = $this.find('.flipcard');
var front = $this.find('.flipcard-front');
var back = $this.find('.flipcard-back');
var tallerHight = Math.max(front.height(), back.height()) + 'px';
var visible = front.hasClass('ms-front-flipped') ? back : front;
var invisible = front.hasClass('ms-front-flipped') ? front : back;
var hasTransitioned = false;
var onTransitionEnded = function () {
hasTransitioned = true;
card.css({
'min-height': '0px'
});
visible.css({
display: 'none',
});
// setting focus is important for keyboard users who might otherwise
// interact with the back of the card once it is flipped.
invisible.css({
position: 'relative',
display: 'inline-block',
}).find('button:first-child,a:first-child').focus();
}
// this is bootstrap support, but you can listen to the browser-specific
// events directly as well
card.one($.support.transition.end, onTransitionEnded);
// for browsers that do not support transitions, like IE9
setTimeout(function () {
if (!hasTransitioned) {
onTransitionEnded.apply();
}
}, 2000);
invisible.css({
position: 'absolute',
display: 'inline-block'
});
card.css('min-height', tallerHight);
// the IE way: flip each face of the card
front.toggleClass('ms-front-flipped');
back.toggleClass('ms-back-flipped');
// the webkit/FF way: flip the card
card.toggleClass('card-flipped');
}
$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);
Cheers!
(Edited to show code)

I have created a modified function flipThis and removed the onclick actions from your html. jsfiddle
As I wrote in the comment, you have to recognize where you are currently in DOM. The code is self explanatory I suppose. And I also added a parameter to the flipThis function, so we know more precisely what we are working with. (not really needed, we could still work with $(this) but this is my way of doing things.
if($(e.currentTarget).prop('tagName')=="BUTTON")
$this = $(this).closest('.sm_box');
else
$this = $(this);