Develop Reference

CSS Check If Element Is Overflowing Then Animate Back And Forth

I have some short and long text in html with max-width and overflow styles.
i want to check if an element is overflowing then start back and forth animation to users can see all contents.
Please see this demo:
.animated {
position: relative;
white-space: nowrap;
max-width: 150px;
overflow: hidden;
background: #0c0c0c;
}
.text-animated{
color: #fff;
animation: backAndForth 5s linear infinite;
}
#keyframes backAndForth {
0% { transform: translateX(0); }
10% { transform: translateX(0); }
45% { transform: translateX(calc(100% - 340px)); }
55% { transform: translateX(calc(100% - 340px)); }
90% { transform: translateX(0); }
100% { transform: translateX(0); }
}
<div class="animated">
<h3 class="text-animated">
Some Short Text
</h3>
</div>
<span>Must be fixed</span>
<br><br><br>
<div class="animated">
<h3 class="text-animated">
Some Long And Bigger Text To Animate
</h3>
</div>
<span>Must be Animated to view all text</span>
Can anybody help me?
Thanks

Although a max width is set it is not being taken up on the smaller text - notice the widths of both examples are the same.
This snippet gives both the div and the h3 a position so that the widths are taken up and the div is set to have width fit-content (it will still obey the max-width).
The animation needs to take into account both the width of the container and the width of the text. It therefore uses left positioning and transition. For the shorter text they balance out so there is no movement. For the longer text the amount of movement is just the extra length of the text compared to the container.
.animated {
position: relative;
white-space: nowrap;
max-width: 200px;
overflow: hidden;
background: #0c0c0c;
display: inline-block;
width: fit-content;
position: relative;
}
.text-animated {
color: #fff;
animation: backAndForth 5s linear infinite;
display: inline-block;
position: relative;
}
#keyframes backAndForth {
0% {
transform: translateX(0);
left(0);
}
10% {
transform: translateX(0);
left: 0;
}
45% {
transform: translateX(calc(-100%));
left: 100%;
}
55% {
transform: translateX(calc(-100%));
left: 100%;
}
90% {
transform: translateX(0);
left: 0;
}
100% {
transform: translateX(0);
left: 0;
}
}
<div class="animated">
<h3 class="text-animated">
Some Short Text
</h3>
</div>
<span>Must be fixed</span>
<br><br><br>
<div class="animated">
<h3 class="text-animated">
Some Long And Bigger Text To Animate
</h3>
</div>
<span>Must be Animated to view all text</span>
UPDATE: a couple of additional requirements have been added (in the comments below).
The max-width needs to change from a fixed px width to be relative to container size. The snippet below demonstrates this by putting the divs in a container whose width depends on viewport size.
The text direction has changed from left to right to right to left. The settings for left and transform/translate therefore have to swap signs compared to tehe original code above:
.container {
width: 40vw;
position: relative;
}
.animated {
position: relative;
white-space: nowrap;
/* max-width: 200px; */
max-width: calc(100% - 5rem);
overflow: hidden;
background: #0c0c0c;
display: inline-block;
width: fit-content;
position: relative;
white-space: no-wrap;
direction: rtl;
}
.text-animated {
color: #fff;
animation: backAndForth 5s linear infinite;
display: inline-block;
position: relative;
direction: rtl;
}
#keyframes backAndForth {
0% {
transform: translateX(0);
left(0);
}
10% {
transform: translateX(0);
left: 0;
}
45% {
transform: translateX(calc(100%));
left: -100%;
}
55% {
transform: translateX(calc(100%));
left: -100%;
}
90% {
transform: translateX(0);
left: 0;
}
100% {
transform: translateX(0);
left: 0;
}
}
<div class="container">
<div class="animated">
<h3 class="text-animated">
Some Short Text
</h3>
</div>
<br><br><br>
<div class="animated">
<h3 class="text-animated">
Some Long And Bigger Text To Animate
</h3>
</div>
</div>

scrollWidth is the width of elements with also not showable content.
and offsetWidth is the only showable content width.
so if the scrollWidth is different than offsetWidth, this means that is overflowing!
if (childEl.scrollWidth > childEl.offsetWidth) {
childEl.classList.add("text-animated");
}
/* choose your parent element (that can be also a <body> if you want all elements) */
let parent = document.querySelectorAll(".animated");
parent.forEach((el) => {
/* get all h3 from parent (if you want all elements use "*" selector)*/
let childs = el.querySelectorAll("h3");
childs.forEach(childEl => {
/* if overflow then add class */
if (childEl.scrollWidth > childEl.offsetWidth) {
childEl.classList.add("text-animated");
}
});
});
.animated {
position: relative;
white-space: nowrap;
max-width: 150px;
overflow: hidden;
background: #0c0c0c;
}
.text-animated {
color: #fff;
animation: backAndForth 5s linear infinite;
}
#keyframes backAndForth {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
45% {
transform: translateX(calc(100% - 340px));
}
55% {
transform: translateX(calc(100% - 340px));
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
<!-- 1 -->
<div class="animated">
<h3>
Some Short Text
</h3>
</div>
<span>Must be fixed</span>
<br><br><br>
<!-- 2 -->
<div class="animated">
<h3>
Some Long And Bigger Text To Animate
</h3>
</div>
<span>Must be Animated to view all text</span>

HTML text-overflow ellipsis detection says you can detect if element has overflown content:
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}

CSS Transform Div with two background images

I have a couple of cards in a deck with a background-image with that of the deck, that when clicked, they do a flip animation and then change the background-image to the front-faced equivalent.
Each of these cards are a div.
My problem is, when the card is turned around after being clicked, the front-faced background image is also reversed. Any idea how I can solve this?
Here is the fiddle: https://jsfiddle.net/667nxfze/
Here is my HTML of one card:
<div id='pack_cont' data-deckimage="url('/image/decks/deck1.png')">
<div class='card init' data-image="url('/image/card/card1.png')"></div>
</div>
Here is the Javascript that reacts to it:
var card = $(this);
card.toggleClass('open');
setTimeout(function(){
card.toggleClass('opened');
},300);
if(card.hasClass('open')){
//Show that card image
card.css('background-image', card.data('image'));
}else{
//Show the Deck Image
card.css('background-image', card.parent().data('deckimage'));
}
Here are the CSS classes:
.card{
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open{
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.opened{
background-image: none;
}

It is better to keep a flipper(container) with front and back face and flip it over on click.
$(document).ready(function() {
$('.card-container .front').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('deckimage'));
});
$('.card-container .back').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('image'));
});
});
$('.card-container').click(function() {
var card = $(this);
card.toggleClass('open');
});
.card-container {
perspective: 1000px;
}
.card-container.open .flipper {
transform: rotateY(180deg);
}
.card-container, .front, .back {
width: 320px;
height: 480px;
background-size: contain;
background-repeat: no-repeat;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="card-container" data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')" data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')" >
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>

You can actually use another timeout of 300 milliseconds for the transition effect, like this :
$(document).ready(function() {
$('.card').each(function() {
$(this).css('background-image', $(this).parent().data('deckimage'));
});
});
$('.card').click(function() {
var card = $(this);
card.toggleClass('open');
setTimeout(function() {
card.toggleClass('opened');
}, 300);
if (card.hasClass('open')) {
//Show that card image
setTimeout (
function() {
card.css('background-image', card.data('image')); }
, 300)
} else {
//Show the Deck Image
setTimeout (
function() { card.css('background-image', card.parent().data('deckimage')); }
, 300)
}
});
.card {
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open {
-webkit-transform: rotateY( 180deg) scaleX(-1);;
transform: rotateY( 180deg) scaleX(-1);;
}
}
.card.opened {
background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='pack_cont' data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')">
<div class='card init' data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')"></div>
</div>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

i am suggesting that you use layers
<!DOCTYPE html>
<html>
<head>
<style>
img1 {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
img2 {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img1 src="/image/decks/deck1.png">
<img2 src="/image/decks/card1.png">
</body>
</html>
https://www.w3schools.com/cssref/pr_pos_z-index.asp

Create a folding animation of a simple square

I am trying to make this animation. This animation is quite complicated, but all I would like to do is fold a square in half showing the folding animation.
I have visited this website and I tried to use the skew function in order to create the animation.
This is the code I have used so far:
.elementLeft {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
font-size: 1px;
animation: shakeback 2s infinite;
animation-direction: alternate;
color: white;
}
.elementRight {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
/* transform: skew(20deg); */
font-size: 1px;
color: white;
animation: shake 2s infinite;
animation-direction: alternate;
}
#keyframes shake {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(45deg);
}
}
#keyframes shakeback {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(-45deg);
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<div class="elementLeft"></div>
<div class="elementRight">
</div>
However, this is not exactly what I want since the skew function also makes the square too long as I increase the degree. I have been thinking of another way to create this animation, but I am not sure what to do. I also would prefer that only one side folds in rather than both sides folding. This is like in the Google Calendar Icon animation posted above where the top half of the icon stays still whereas the bottom half folds upwards.
edit: I have also noticed that I can rotate a square upwards to form this effect. However, I am still having an issue as the animation does not look as smooth as I would like.
Any help is once again appreciated!
.element {
display: inline-block;
background-color: #000000;
height: 100px;
width: 100px;
}
.elementfold {
/* transform: rotateX(0deg); */
animation: foldup 5s;
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
}
#keyframes foldup {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(180deg) translate(0px, 100px);
}
}
<li>
<div class="element"></div>
</li>
<li>
<div class="elementfold"></div>
</li>

This may be useful. I haven't tried it myself, but I'd look into it.
http://anime-js.com/

Code:
#container {
width: 100px;
height: 100px;
perspective: 300px;
}
.square {
width: 100px;
height: 100px;
background-color: grey;
}
#animation {
animation: anim 2s linear 0s infinite alternate;
transform-origin: 50% 100%;
}
#keyframes anim {
from {transform: rotateX(0deg);}
to {transform: rotateX(-180deg);}
}
<div id="container">
<div class="square" id="animation"></div>
<div class="square"></div>
</div>
Using CSS3's rotateX property and animations, it's pretty easy to create folding squares.

Credit goes to Bálint for the animations!
The above method will need to be slightly tweaked the object is rounded. In the case that the folding animation needs to be applied to a circle or an oval, it can be done by breaking the shape into two shapes; more specifically, the circle would be broken into two semicircles.
The following code shows one solution for this using HTML and LESS (for this reason it will not load on stackoverflow):
#size: 200px;
.origin (#x;
#y) {
-webkit-transform-origin: #x #y;
-moz-transform-origin: #x #y;
-o-transform-origin: #x #y;
transform-origin: #x #y;
}
.red {
background-color: #f24235;
}
.green {
background-color: lightgreen;
}
.top-half {
width: #size;
height: (#size / 2);
border-radius: (#size / 2) (#size / 2) 0 0;
}
.bottom-half {
width: #size;
height: (#size / 2);
border-radius: 0 0 (#size / 2) (#size / 2);
.origin(0, 0);
}
#animation {
animation: anim 2s linear 0s infinite alternate;
// transform-origin: 50% 100%;
}
#container {
width: 100px;
height: 100px;
perspective: 300px;
}
#keyframes anim {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(180deg);
}
}
<div class "container">
<div class="top-half red"></div>
<div class="bottom-half green" id="animation"></div>
</div>
Please follow this link to see the animation. If there are any other efficent ways to do this with a variable size, but through either normal css or js please let me know!

Responsive image overlay with hover effect on another html element

1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it?
2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it?
I would be thanful for a javascript, bootstrap, css or a different answer!
Demo: http://jsfiddle.net/0qgcn2uu/9/
HTML:
<span class="point"></span>
<div class="caption">
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
</a>
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
background: rgba(248, 214, 215, .5);
}
*/
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}

To solve 1st problem you need to change:
.caption:hover .caption__overlay {
To:
.point:hover + .caption .caption__overlay {
And the 2nd problem is solved adding:
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
DEMO

Can't get div overflow to work properly

I'm hoping someone can help me with an issue I'm running into. I'm trying to set up a series of photos. That have this CSS/HTML property:
http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
I actually got the code from this site.
But there will be upwards of 30 photos, so I was hoping to put them inside a scrolling box/area about 400h x 700w px. When I add the scrolling box, either by HTML, or CSS the results are the same. There is a box, with no scrolling. And all photo's have been shrunken down to fit inside of the box.
Can anyone PLEASE help me with this?
Thanks.

What I've done is removed the CSS for the .container element, in case you want to keep that for a different purpose, and added a .scroller element as a wrapper around the images (within the .container). If you don't have another use for the .container, you can replace .scroller in the CSS with .container, and remove the .container I added to the HTML. A little wordy, so if you need an easier explanation let me know.
So the HTML changes in that there's a new <div> with class scroller surrounding the <article> elements.
The CSS adds the .scroller class, and another rule just to space the images apart a little bit:
.scroller{
margin:0px auto;
height:400px;
max-height:400px;
width:700px;
max-width:700px;
padding:10px 20px;
border:1px solid #aaa;
overflow-y:scroll;
}
.scroller article:not(:last-child){
margin-bottom:10px;
}
Fiddle: http://jsfiddle.net/435rx66s/

What is this scroll box / area?
You've given us this code that you referenced in your implementation, but where is your implementation for us to reference?
The given code works well if you are creating more articles within that container. Give the container a fixed height and set overflow to auto and there should be no problem with getting this content to sit within a scrolling box.
https://jsfiddle.net/i_like_robots/7GvV2/
.container {
height:200px;
overflow:auto;
position:relative;
margin: 0 auto;
max-width: 480px;
}

if you're open to a bit of jquery, there's quite a simple solution.
a short jquery function
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
will show your articles in turn.
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>