How to make image move in a frame infinitely? - javascript

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.

Related

CSS Keyframe animation on an image in React

I' trying to implement this straight-forward keyframe animation. But nothing moves.
The Waves component is in its own file, and the component is called from of a Grid component. Could this cause the trouble?
-src/App.js <-- Grid.js called here
-src/animations/Waves.js
-src/components/Grid.js <-- Waves.js called here
-public/index.css
React component looks like this:
const Waves = () => {
return (
<section>
<div className='singleWave waveAnimation'>
<Image src={wave}></Image>
</div>
</section>
)
}
css-file here:
.singleWave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("../src/pics/wave.png");
background-size: "1000px, 100px";
top: 0.7vh;
opacity: 0.7;
}
.waveAnimation {
animation: "animate 30s linear infinite";
z-index: 1000;
opacity: 0.8;
animation-delay: 0s;
bottom: 0;
}
#keyframes animate {
0% {
background-position-x: 0;
}
100% {
background-position-x: 1000px;
}
}
#keyframes animate2
{
0% {
background-position-x: 0;
}
100% {
background-position-x: -1000px;
}
}
Sure, its unnecessary to declare the image twice (imported in the component and in the css-file). But the animation seems to work with neither of the two.

problem on onclick() event for more than one clicks done on a div

i have an html page where,when hovered over the first image a second image fades in/is shown.The first image has an onclick() event which performs a transition of rotating the image and scaling it by some number.During the transition, the first image disappears and some text appears on the same place(area of the div tag of the first image).I perform the transition through javascript and the hovering animation using css. Now when i click on the text(or the area of the div tag) the transition must reverse back i.e., the div area must be as it was before clicking(even with the hovering working.). I would like to know the answer through pure javascript please.
Thank you in advance.
timesclicked = 0;
document.getElementById("hoverImage").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
As much as i know, I think the second clicking event is not happening because the eventlistener is on the hoverImage. I need a way to run the else part of the code somehow.
It looks like there are a few problems with your code, and you're going to have some debugging to do. That said, try this for a strategy:
Put your on-click event on the #container.
Put all the styling and transitioning details in the css. Your javascript will just add and remove a class from the #container.
Don't track the number of clicks unless you need it for something else. Have your if statement check for the presence or absence of the class you're toggling. (Or use an explicit toggle instead of an if-else block.)
Don't add and remove the text and background in the javascript, put them both in the HTML and control their visibility using the CSS.
edit:
People asked for examples and clarification. I'm stealing some of this from other people's answers.
I'm not completely sure I've understood OP's intentions correctly, and there are some rough-around-the-edgues details (like the cursor when you hover before clicking), but I think this should serve as an example:
let container = document.getElementById("container");
container.addEventListener("click", function(){
container.classList.toggle("selected");
});
#mainImage, #hoverImage, #selectedText {
width: 300px;
height: 300px;
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage {
opacity: 0;
transition: opacity 0.4s 0.1s;
}
#container:hover > #hoverImage {
opacity: 1;
}
#container {
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
transition: all 1.5s ease-in-out;
}
#container.selected {
transform: rotateZ(-360deg) scale(1.4);
}
#container:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
#selectedText {
font-size:16px;
font-family: monospace;
font-weight:bold;
text-align:center;
background: url(https://picsum.photos/300?text);
background-size: cover;
opacity: 0;
transition: opacity 0.1s 0.5s;
}
#container.selected > #selectedText {
opacity: 1;
transition: opacity 0.1s 1.3s;
}
<div id="container">
<img id="mainImage" src="https://picsum.photos/300?main">
<img id="hoverImage" src="https://picsum.photos/300?hover">
<div id="selectedText">
My Hero Academia, abbreviated as HeroAca is a Japanese superhero
manga series written and illustrated by Kōhei Horikoshi. It has been
serialized in Weekly Shōnen Jump since July 2014, and, as of
February 2019, 22 volumes have been collected in tankōbon format.
</div>
</div>
you can add the click event listener on the container div.
timesclicked = 0;
document.getElementById("container").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
</style>
if I understand your problem correctly, I think you just need to move the transition styles into your CSS
x.style.transition = 'all 1.5s ease-in-out';

How to implement popping out and back in effect on setInterval for an image

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>

How change keyframes position on element

<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.

How to make a permanent change background-position in js?

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>

Categories

Resources