The problem is I can't figure out how to disable kind of scrolling effect to make each picture occupy whole space of box. To create kind of gif image, using only sprit-sheet and CSS.
JSFIDDLE
<title>Hey</title>
<link rel="stylesheet" href="learn.css">
<body>
<div class="animation"></div>
</body>
.animation {
width: 128px;
height: 128px;
margin: 2% auto;
background: url('http://s16.postimg.org/8f5770kpx/sprite.png') center;
animatio-play-state: paused;
animation: play 5s steps(10) infinite;
transorm: translateZ(0);
}
#keyframes play {
100% { background-position: 100px; }
}
This should do the trick:
.animation {
width: 128px;
height: 128px;
margin: 2% auto;
background: url('http://s16.postimg.org/8f5770kpx/sprite.png');
background-position:0px 0px;
animation-play-state: paused;
animation: play 5s steps(10) infinite;
transorm: translateZ(0);
}
#keyframes play {
from { background-position:0px 0px; }
to { background-position:1280px 0px; }
}
DEMO: http://jsfiddle.net/Hyg3C/4421/
So, from-to are actually 'steps', we move background position in 10 steps. If you remove steps parameter from animation - you can get nice infinite scrolling, btw, but this provides 'gif-like' behavior...
Related
I have an image which I need to zoom a specific point depending on which input is focused
Here's a fiddle so far
I used the attributes transform and transform-origin. It's working fine on Firefox (notice how it's moving toward the point while zooming at same time).
However on Chrome, the scale/zoom is done first, then it teleports the point. It's actually very confusing
Any idea how to make this work on Chrome ?
I experimented with putting both the transform and the transform-origin into a CSS animation and it seemed to manage to do them both at once, so avoiding the 2 step problem you saw on Chrome (tested on Edge):
#keyframes focusin {
0% {
transform: scale(1);
transform-origin: 0% 0%;
}
100% {
transform: scale(3);
transform-origin: 25% 75%;
}
}
Here's a snippet. I've put the animation time to 10s so you can see the 'journey' the paper takes when focus is on input1. It seems to be smooth, so a bit of an improvement, but it isn't 'direct' on Edge/Chrome which I guess (and it is only a guess) is to do with how the browser animates (or doesn't) transform-origin.
$("#input1").focus(function(e) {
/* $("#image").css({
"transform": "scale(3)",
"transform-origin": "25% 75%"
});*/
document.getElementById('image').style.animationName = 'focusin';
});
$("#input2").focus(function(e) {
$("#image").css({
"transform": "scale(3)",
"transform-origin": "75% 25%"
});
});
$("#input1, #input2").focusout(function(e) {
$("#image").css({
"transform": "scale(1)"
});
});
#wrapper {
width: 400px;
height: 267px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position: center;
/* transition: all 1s ease; */
width: 100%;
height: 100%;
/* transform: scale(1); */
position: relative;
left: 0;
top: 0;
animation-duration: 10s;
animation-iteration-count: 1;
animation-name: none;
animation-fill-mode: forwards;
}
#keyframes focusin {
0% {
transform-origin: 0% 0%;
transform: scale(1);
}
100% {
transform-origin: 25% 75%;
transform: scale(3);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">
<div id='wrapper'>
<div id='image'></div>
</div>
I made a sort of header with an animated information banner (on 3 lines)
starting at each end. (ex: for the 1st and 3rd line, from left to right and for the 2nd line from right to left). What I would like is to take a break of a few seconds when the 3 bands are
all aligned (in the center) then continue the animation.
I would prefer a solution without using javascript but unfortunately I think it seems impossible?
Problem: The 1st and 3rd banner always start to appear before the 2nd and therefore when they are aligned, they are never in the center.
<!DOCTYPE html>
<HTML>
<head>
<title> VIDEO LIBRARY </title>
<meta charset="utf-8"/>
<style type="text/css">
.bandeau
{
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26,133,230);
}
#keyframes defilement {
from {
left: 0;
}
to {
left: 1000px;
}
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top:0;
right:0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite ;
}
</style>
</head>
<body>
<div class="bandeau" >
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
</body>
</HTML>
Instead of using from and to in your keyframes, you can set steps using percentages.
In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:
#keyframes defilement {
0% {left: 0;}
45% {left: 500px;}
55% {left: 500px;}
100% {left: 1000px;}
}
Responsive solution: blocks will stop in the centre an any size screen.
If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.
However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!
Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.
#keyframes defilement {
0% { left: -250px;}
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%;}
}
Working example:
.bandeau {
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26, 133, 230);
}
#keyframes defilement {
0% { left: -250px; }
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%; }
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top: 0;
right: 0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite;
}
<div class="bandeau">
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
For more information on keyframes, take a look at Mozilla MDN Docs for CSS3 Keyframes
See the code in this jsfiddle: https://jsfiddle.net/frpL3yr1/
The idea is that I want a bar of images at the top of the screen. The img-wrapper div will later be animated via javascipt to move to the left when you mouse over. For an example of what I am ultimately attempting to accomplish, see this page. The difference is that in mine, the animation will only run when moused-over.
The issue is that in my jsfiddle and the linked example, the width of the div containing the images is hard-coded. In my case, the css hard-codes the width of img-wrapper to 200%. I need my page to support an arbitrary number of images, so I need its width to be equal to that of the contents. The way my jsfiddle is implemented, if there are more images that can fit in img-wrapper, they will wrap to a new line.
What is the best way to go about fixing this?
Approach using flexbox and animation:
html, body {
margin:0;
padding:0;
overflow: hidden;
}
.demo-ribbon {
width: 100%;
height: 70vmin;
margin-top: 2rem;
overflow: hidden;
}
.img-wrapper {
height: 70vmin;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
img {
flex: 1;
object-fit: content;
margin: 0 .2rem;
width: 100vmin;
height: 100%;
}
.lead {
animation: bannermove 12s linear 320ms infinite paused alternate;
}
.img-wrapper:hover .lead {
animation-play-state: running;
}
#keyframes "bannermove" {
0% {
margin-left: 0%;
}
100% {
margin-left: -230%;
}
}
You will need to add prefixes in order to work in all browsers especially animation
Further reading: https://devdocs.io/css/animation
working pen: https://codepen.io/manAbl/pen/KROvjx ;
Aspect Ratio: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp & https://css-tricks.com/aspect-ratio-boxes/
Hope helps! :)
Use flexbox and animation with translate :)
.demo-ribbon {
width: 100%;
overflow: hidden;
}
.demo-ribbon .img-wrapper {
display: flex;
justify-content: stretch;
margin-right: 0;
position: relative;
width: 100%;
}
.demo-ribbon .img-wrapper img {
transition: all 0.5s ease;
margin: 2px;
}
.demo-ribbon .img-wrapper img:first-child {
animation: lefttoRight 25s linear 320ms infinite paused alternate;
}
.demo-ribbon .img-wrapper img:hover {
transform: scale(1.1);
cursor: pointer;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.demo-ribbon .img-wrapper:hover img {
animation-play-state: running;
}
#keyframes lefttoRight {
0% {
margin-left: 0;
}
50% {
margin-left: -200%;
}
100% {
margin-left: 0%;
}
}
<html>
<body>
<div class="demo-ribbon">
<div class="img-wrapper">
<img class="lead" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
</div>
</div>
</body>
</html>
I am trying to make a fairly simple web page, having a banner image
and a simple animation (marquee emulation). I want to have a responsive image
in the page. The problem is that whenever the animation loop iterates, the image resize repeats itself.
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
background-color: red;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.fixed-ratio-resize{
height:auto;
max-width: 90%;
}
<img src="image.png" class="fixed-ratio-resize" alt="banner" />
<p class="marquee">
Do not use marquee tag for improve accessibility and readability.
</p>
I would like to "disengage" the animation from the image resize, ie to have the image resized only when the viewport is changed.
MTIA
If you need responsive image then you have to follow this code on your fixed-ratio-resize css. you can set width:90% if you want.
.fixed-ratio-resize {
height: auto;
width: 100%;
display: block;
margin: 0 auto;
}
Here is an example with marquee emulation. With 90% of image width. If you have any question ask me in comment.
#keyframes marquee {
0% { text-indent: 430px }
100% { text-indent: -485px }
}
#-webkit-keyframes marquee {
0% { text-indent: 430px }
100% { text-indent: -485px }
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
background-color: red;
}
.marquee:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.fixed-ratio-resize {
height: auto;
width: 90%; /*YOU CAN USE 100% if you want */
display: block;
margin: 0 auto;
}
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="fixed-ratio-resize" alt="banner ">
<p class="marquee">Do not use marquee tag for improve accessibility and readability.</p>
Please help me to resolve animation issue, here is a link and code:
https://fiddle.jshell.net/gvopk1qe/37/
Description of issue:
This 'train' is infinity but after once the yellow rectange is covered by blue rectangle. You see yellow, black, red, blue rectangle and then should be yellow again, black, red and blue but yellow is covered by blue.
Please help me to resolve this.
Thanks.
Exact problem : animation-delay property is used. It will delay by assigned time before starting animation each time. Therefore, first cycle is good but second cycle onward everything breaks.
Suggested Fix
I would say don't use animation-delay property instead arrange the div's so that they are next to each other and then animate them.
Example Snippet:
/* steps animation */
.steps-animation {
position: relative;
width: 1200px;
height: 250px;
float: left;
background: lightgrey;
border: 1px solid black;
overflow: hidden;
}
.steps-animation span {
display: inline-block;
position: relative;
top: 32%;
left: -100%;
width: 160px;
height: 80px;
margin-left: 100px;
-webkit-animation: stepmoveone 6s linear infinite;
animation: stepmoveone 6s linear infinite;
}
.steps-animation .step1 {
background: yellow;
}
.steps-animation .step2 {
background: black;
}
.steps-animation .step3 {
background: red;
}
.steps-animation .step4 {
background: blue;
}
#keyframes stepmoveone {
to {
left: 100%;
}
}
<div class="steps-animation">
<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
</div>
**Need to edit margin-left, height and width as per requirement.
The problem is in timming. I haven't worked too much with animations but I think I know what's the problem. The animation has a loop set on this line
animation: stepmoveone Xs linear infinite;
This will initially wait X seconds but will also show the animation in an X seconds interval. So it will take X seconds for the animation to complete.
In your code you set X to 18 seconds but this is the same time the last div (the blue one) will wait to be animated. So it will be animated exactly when a new cycle of the animation begins. But when this happens the yellow div will show up so the two of them will overlap. You can check this by changing the delay time for the yellow div to 1s.
To fix this you can change the animation time to 24 for example.
Here's the code but with the seconds changed:
/* steps animation */
.steps-animation {
position: relative;
width: 800px;
height: 250px;
float: left;
background: lightgrey;
border: 1px solid black;
overflow: hidden;
}
.steps-animation span {
display: block;
position: absolute;
top: 32%;
left: -100%;
width: 160px;
height: 80px;
-webkit-animation: stepmoveone 8s linear infinite;
animation: stepmoveone 8s linear infinite;
}
.steps-animation .step1 {
animation-delay: 0s;
background: yellow;
}
.steps-animation .step2 {
animation-delay: 2s;
background: black;
}
.steps-animation .step3 {
animation-delay: 4s;
background: red;
}
.steps-animation .step4 {
animation-delay: 6s;
background: blue;
}
#keyframes stepmoveone {
to {
left: 100%;
}
}
<div class="steps-animation">
<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
</div>
This code will leave a 2 seconds gap between each element.
Set .steps-animation width to 100% && .steps-animation span to negative of its width to hide from the frame
Check the fiddle