I'm hunting around for an endless jQuery "ticker"/slider that will work with images of various widths.
I've tried FlexSlider, and even spoken to the developers, but apparently it only works with items of a fixed width. This is a pretty common constraint, as the parent HTML element usually needs a predefined width.
I found a CSS only solution (http://jsfiddle.net/Hyg3C/4289/) but it's a bit of a hack because it only uses one very long background image (plus it jumps).
#images {
background: url(http://cl.ly/9BJG/collage.jpg);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 5s linear infinite;
-moz-animation: slideshow 5s linear infinite;
}
#-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
#moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
Is there a way to do this using lots of images of variable widths?
Related
The text that should be on the picture and follow it
<h1>Enter</h1>
the picture itself
I was told to try "position relative" but nothing worked does anyone have any suggestions on how to do this?
Animations
Syncing to animated images
Quickly skimming through the spec I didn't find anything to whether animated images (e.g. animated GIFs) should be in sync with CSS. Therefore I presume that animated images may or may not be in sync, depending on the implementation.
Not only is this (presumably) not defined, images' actual presentation may be deferred. We can specify sync, async or auto (default) for attribute decoding, but that is just a hint which the browser may not honour.
This means while we can try to sync CSS with animated images, this may not actually work due to technical reasons.
Here is my approach to getting the CSS animation to sync with the animated image. Note that while it may look synchronous for the first 1 or 2 cycles, it quickly gets out of sync due to me being off by a tiny bit:
#keyframes gif-anim {
0% {top: 40%}
50% {top: 30%}
}
.wrapper {position: relative}
.wrapper img {width: 100%}
.wrapper h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation: .715s normal .14s gif-anim infinite backwards steps(1);
}
<div class="wrapper">
<img src=https://i.stack.imgur.com/I62VF.gif>
<h1>Enter</h1>
</div>
Syncing with CSS Animations
If we had the individual images that make up the animated image, we could synchronize it with CSS #keyframes.
It is significantly easier to synchronize if the frames are evenly spaced across the animation cycle. Example:
#keyframes img-anim {
0% {background-image: url(https://picsum.photos/id/1/300/200)}
50% {background-image: url(https://picsum.photos/id/2/300/200)}
}
#keyframes text-anim {
0% {left: 0%}
50% {left: 50%}
}
.wrapper {
position: relative;
width: 300px;
overflow: hidden;
}
.wrapper::before {
content: "";
width: 300px;
height: 200px;
display: block;
background-image: url(https://picsum.photos/id/1/300/200);
animation: img-anim 1s infinite steps(1);
}
.wrapper>h1 {
position: relative;
left: 0%;
display: inline-block;
animation: text-anim 1s infinite steps(1);
}
<div class="wrapper">
<h1>Enter</h1>
</div>
jQuery( ".button" ).click(function() {
// STOP BOUNCING SMOOTHLYY
$('.button').on('animationiteration webkitAnimationIteration', function () {
var $this = $(this);
$this.removeClass('loading');
})
});
.button{
position: absolute;
top: calc(50vh - 10px);
left: calc(50vw - 10px);
height: 100px;
width: 100px;
border-radius: 100%;
background-color: green;
display: inline-block;
cursor: pointer;
}
.loading{
animation: bouncing 1s ease infinite alternate;
animation-fill-mode: forwards;
}
#keyframes bouncing{
from {transform: translateY(0);}
to {transform: translateY(-100px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button loading"></div>
A bouncing ball animated with css alternate animation (transform: translateY). I want the ball to stop its movement when clicked and go back to its intial place (possibly with smooth easing).
Css doesn't seem to know where the animation is, then it is not able to move back to its original point. Do you have a different solution for achieving this?
You can use getComputedStyle(). In jQuery, you can do it through .css().
The .css() method is a convenient way to get a style property from the
first matched element, especially in light of the different ways
browsers access most of those properties (the getComputedStyle()
method in standards-based browsers versus the currentStyle and
runtimeStyle properties in Internet Explorer) and the different terms
browsers use for certain properties.
For CSS, let's modify it a little bit. Make the default behaviour to be paused (animation-play-state: paused) and for .loading, set it to run. The paused moment is when you get the computed style to deal with it.
In jQuery, the animation will be paused, then the CSS transform (that is a matrix()) will be stored and applied to the element, next to a transition and the animation that will be set to none Finally, after some delay, it will run a function to apply a transform in order to bring the element back to the starting position.
jQuery( ".button" ).click(function() {
$this = $(this);
$this.removeClass('loading');
computedTransform = $this.css("transform");
$this.css({"transform": computedTransform, "transition": "0.86s", "animation": "none"}).delay(20).queue(function() {
$this.css("transform", "matrix(1, 0, 0, 1, 0, 0)")
});
});
.button{
position: absolute;
top: calc(50vh - 10px);
left: calc(50vw - 10px);
height: 100px;
width: 100px;
border-radius: 100%;
background-color: green;
display: inline-block;
cursor: pointer;
animation: bouncing 1s ease infinite alternate forwards paused;
}
.loading {
animation-play-state: running;
}
#keyframes bouncing{
from {transform: translateY(0);}
to {transform: translateY(-100px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button loading"></div>
okay so I have this right here:
html:
<div class="object">
<img src="https://www.direktorenhaus.com/wp-content/uploads/2018/03/Kabali-After-Puja-6-1-800x533.jpg" alt="pic">
</div>
css:
.object {
animation: MoveLeftRight 10s linear infinite;
position: absolute;
top: 0;
right: 0;
}
#keyframes MoveLeftRight {
0%, 100% {
right: 0;
}
50% {
right: 300px;
}
}
demo: https://jsfiddle.net/kte1ar3p/
but instead of it moving left and right, right to left all the time, i want to to like go through... i.e when it goes from e.g right to left, it will come out again from right to left. i dont know if this makes sense as I am explaining...
like moving a big picture into a small frame.
EDIT:
I got this so far, which should do with a little bit of playing around. thank you. https://jsfiddle.net/rgsnwb79/
Change CSS
.object{
position: relative;
width: 300px;
height: 280px;
overflow: hidden;
}
.object img {
animation: MoveLeftRight 10s linear infinite;
position: absolute;
top: 0;
right: 0;
}
#keyframes MoveLeftRight {
0%, 100% {
right: 0;
}
50% {
right: -50%;
}
}
https://jsfiddle.net/kte1ar3p/2/
Considering you want to repeat the display of the image and its movement... What if you animated it like sliding the image off of itself (like a deck of cards)?
HTML
<div class="object">
<img class="slide" src="https://images.freecreatives.com/wp-content/uploads/2016/04/Abstract-Patterns-For-Free.jpg" alt="pic">
</div>
CSS
body {
margin: 0;
}
.object {
background-image: url("https://images.freecreatives.com/wp-content/uploads/2016/04/Abstract-Patterns-For-Free.jpg");
width: 100vw;
height: 100vh;
}
.slide {
animation: MoveLeftRight 3s linear infinite;
position: absolute;
top: 0;
left: 0;
}
#keyframes MoveLeftRight {
0% { left: 0; }
50% { left: 50%; }
100% { left: 100%; }
}
https://jsfiddle.net/mittenmoon72/kte1ar3p/27/
If you're wanting a carousel, I'd just use one of the many JavaScript carousel libraries out there.
I have a spinning wheel which works great on PC but it changes its size, position, and almost everything when I'm trying it on my phone.
Also, there is an image in the center of the spinning wheel which should stay there on phones too.
Here is the spinning wheel:
Here is the code:
.image {
position: absolute;
left: 30%;
width: 300px;
height: 300px;
-webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
animation-play-state:paused;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(1770deg); }
}
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(1770deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(1770deg); transform:rotate(1770deg); } }
<h1 id='pas'>Pasul 3: Incercati-va norocul la ruleta cu cadouri! </h1>
<h2> Aflati instant ce ati castigat invartind roata!</h2>
<br>
<br>
<br>
<div style='position: relative; left: 0; top: 0;'>
<img class='image' src='images/ruleta.png' alt='' id='rlt' width='120' height='120'> </img>//this is the wheel
<img id='schimba' src='images/iph.png' width='64px' height='64px' style='position: absolute; top: 117px; left: 45%;'></img><img id='arrow' src='images/arrow.png' width='70px' height='70px' style='position: absolute; top: 300px; left: 48%;'></img>
</div> //this is the image in center of the wheel
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
This is a good candidate for using flexbox to keep items centered, but basically the issue is that you want to make the containing div the size of the wheel and center it (using flexbox or margin: 0 auto and then center the the center the images on top of each other inside using absolute positioning. here is a working flexbox example http://codepen.io/JustH/pen/rLYgQX
For what it's worth, you also should avoid using <br> tags for layout. Use margins or position to achieve the spacing you want.
I have a div with a width of 800 and a height of 300 pixels.
I also have an .svg image that's set as the background-image of this div, and using css3 animations I make this image scroll left to right, indefinitely (it's a landscape) and wrapping.
I would like to put a circle in the middle of this div, and make the inside of this circle "zoom" the background. I'd love to have this pure CSS.
I've tried some masking and clipping, but nothing seemed to do the trick.
Is this possible with the current CSS specifications? A JavaScript solution would also be acceptable.
Here's an image showing what I mean:
If you look closely, you can see a circle in the middle, which should zoom the clouds behind it, as if looking through a magnifying glass.
Trying to get it reusing the same animation, without extra elements:
CSS
.test {
position: absolute;
width: 600px;
height: 400px;
left: 0px;
background-image: url(http://placekitten.com/1000/400);
background-size: 1000px;
-webkit-animation: base linear 20s infinite;
background-position-x: 0px;
background-position-y: 50%;
}
.test:after {
content: "";
position: absolute;
left: 200px;
width: 200px;
top: 100px;
height: 200px;
border-radius: 50%;
background: inherit;
-webkit-transform: scale(1.1);
-webkit-animation: inherit;
-webkit-animation-delay: -4s;
}
#-webkit-keyframes base {
0% { background-position-x: 0px; }
100% { background-position-x: -1000px; }
}
The trick is to set the animation in sync delaying it; just calculate the equivalence in time of the x offset.
fiddle
throw your zoom div into the pic div and give it a background image of a larger version of the same image.