<div id="slider">
<figure>
<img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/a.png" />
<img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/b.png" />
<img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/c.png" />
<img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/d.png" />
<img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/e.png" />
</figure>
</div>
<style>
#keyframes slidy {
0% { left: 0%; }
25% { left: -100%; }
50% { left: -200%; }
75% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
.css-slider-mask{
width:300px;
height:300px;
}
</style>
how change position current image ?
I tried
document.querySelector('figure').getBoundingClientRect()
ClientRect {top: 0, right: 930.609375, bottom: 0, left: -569.390625, width: 1500…}
but when i change
document.querySelector('figure').style.position.left = '-110px'
no change in view ! Why ?
I want to change the position of the animation .Javascript has access to the keyframe object ?
Properties set in keyframe animations take precedence over everything else while they are active. Since the figure has an infinitely running animation that affects its left property, changing the property directly will have no visible effect.
What do you want to happen to the animation once you pick a specific left value?
If you want to jump to the given position and stop there, simply disable the animation by also setting animation: none;
If you want "pause" the animation at the given position and resume it later, you'll need to control the animation much more explicitly using Javascript. CSS animations always start from 0% (or 100% if running in reverse) when activated; they cannot "resume" from an arbitrary point in the middle after they have been disabled.
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>
I am trying to make a marquee animation, but i can't manage to make it perfect.
As you can see when a logo goes out of the page it do not get back from the otherside directly.
I would like that when a logo get out from left it has to get back from right instantly.
.logos {
display: flex;
width: 100%;
justify-content: space-evenly;
img {
height: 25px;
margin: 0 20px;
animation: defile 3s infinite linear;
position: relative;
}
}
#keyframes defile {
25% {left: 0%;}
50% {left: 100%;}
75% {right: 100%;}
100% {right: 0%;}
}
<div className="logos pt-5" >
<img src="static/img/logos/NEXTJS.png" />
<img src="static/img/logos/SOCKET.IO.png" />
<img src="static/img/logos/NODEJS.png" />
<img src="static/img/logos/JS.png" />
<img src="static/img/logos/GIT.png" />
<img src="static/img/logos/NANTES-TECH.png" />
<img src="static/img/logos/FRENCHTECH.png" />
<img src="static/img/logos/ANGULAR.png" />
<img src="static/img/logos/S.png" />
<img src="static/img/logos/DOCKER.png" />
<img src="static/img/logos/REACT.png" />
<img src="static/img/logos/REACT-ROUTER.png" />
</div>
Have you tried doing something like:
#keyframes defile {
0% { left: 0% }
50% { left: 100% }
51% { right: 100%; }
100% { right: 0%; }
}
The main issue with what you have for me right now is that it takes 25% of the animation to change from left: 100% to right: 100%; I think this might be what's not working for you.
UPDATE
I checked for some other option and maybe this script could do the trick for you.
I found that project https://github.com/mxmzb/react-marquee-slider.
Which allow me to do what I exactly wanted
Here is the result https://cargouet.com/
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 an image
<div id="container">
<section id="intro">
<img id="egg" src="img/egg.png">
</section>
Css for this is
#egg {
height: 130px;
width: 140px;
position: absolute;
top: 160px;
left: 90px;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
jQuery implementation
$(document).ready (function (){
function animate (){
$("#egg").toggle({effect:"scale", percent:80});
$("#egg").toggle({effect:"scale", percent:100});
}
setInterval(animate ,2000);
});
Now I want to implement a pop out and backing animation on the egg such that on a time delay of 0.4 secs the image pops out to scale to 100 percent for a duration of 1 sec and then again scales down to some 60 to 80 percent and again the same cycle after a delay of 0.4 sec. How can I do this using Javascript or jQuery?
This jQuery implementation scales it down to zero that is the egg becomes invisible and then back to 100 percent. I want from 60 percent to 100 percent and continue the loop. Secondly the center is at the top left of the egg for scaling. I want it to be at the center of the image so that it evenly scales to 60% back to 100% to give a popping out and backin effect with origin at center
Note : The scaling should be to the center of the image. Not to the top left which is the default
Rohit have a look at this.. Hope you expecting this output
https://plnkr.co/edit/5BbG255CqJVXkOLfa7gM?p=preview
setInterval(function(){
$("#egg").animate({width: '80%', height: '80%'}, 1000)
.animate({width: '100%', height: '100%'}, 1000)
}, 2000);
Variant with css-animation
#intro {
width: 100%;
}
#egg {
height: 130px;
width: 140px;
position: absolute;
top: 160px;
left: 90px;
overflow:hidden;
animation: eggMove 9s infinite;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
min-height: 700px;
}
#keyframes eggMove {
0% { transform: scale(1); }
49% { transform: scale(0.8); }
51% { transform: scale(0.8); }
100% { transform: scale(1); }
}
<div id="container">
<section id="intro">
<img id="egg" src="http://worldartsme.com/images/egg-clipart-1.jpg" />
</section>
</div>
I know how to run the animation from point A to point B, so to speak, but do not know how to run continuously in a circle. Below is a small code prepared:
.bg {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg) top left/30%;
animation: bg 2s cubic-bezier(0, -0.02, 1, 0.99);
}
#keyframes bg {
0% {
background-position: left -100px;
}
100% {
background-position: left 0px;
}
}
<div class="bg"></div>
help with script
If by:
run continuously in a circle
You mean run animation in a loop, then you can add the infinite animation-iteration-count property. In the shortcode you can just add infinite to your animation property. See demo:
.bg {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg) top left/30%;
animation: bg 2s cubic-bezier(0, -0.02, 1, 0.99) infinite;
}
#keyframes bg {
0% {
background-position: left -100px;
}
100% {
background-position: left 0px;
}
}
<div class="bg"></div>
Edit: jQuery Solution
With jQuery you can use the animate() function to achieve the same effect.
// bg animation function
function bgAnimate(speed) {
// define bg div
var el = $('.bg');
// get current background y-axis position and convert to integer (strips `px`)
var posY = parseInt(el.css("background-position-y"));
// animate element
el.animate({
'background-position-y': posY + 100 // add 100px
},{
duration: speed,
easing: 'linear',
complete: function() {
bgAnimate(speed); // repeat aniamtion (loop)
}
});
}
bgAnimate(1000); // call function
html, body {padding: 0;margin: 0;}
.bg {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>