Solution to jQuery animation only in CSS3 - javascript

This is the fiddle animation in jQuery. How can this be made only with CSS considering different heights of the images?
The HTML:
<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg"/>
</div>
The CSS:
.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
max-width:100%;
min-width:100%;
}
The jQuery:
$(document).ready(function () {
move();
});
function move() {
$img = $(".image");
diff = $img.height()-$img.parent().height();
speed = diff * 50;
$img.animate({
bottom: -diff
}, speed, 'linear', function(){
$(this).animate({bottom:0}, speed, 'linear', move);
});
}

see this answer: CSS transition between left -> right and top -> bottom positions
which combined with your fiddle, gives you: http://jsfiddle.net/3n1gm4/dvqfs/
#-webkit-keyframes pan {
0% {
-webkit-transform: translate(0%,0%);
}
100% {
top: 100%;
-webkit-transform: translate(0%,-100%);
}
}
.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
top: 0;
max-width:100%;
min-width:100%;
-webkit-animation: pan 3s alternate infinite linear;
}

Related

animation like vertical scrolling div inside parallax

I am trying to do the animation, based on scroll, I already create float-animation in my keyframe. however it doesn't result to the same that I like. I wanted when scroll. then it will be like vertical carousel when scrolling. But the only difference I'm using keyframes and add that class whenever the scroll condition meet. I wanted when I scroll down then the .div1 will slide up and after the animation complete I wanted to show the .div2 .Then if the .div2 is current display when scroll up .div2 will animate slide down then when the animation done then .div1 will appear again just like in vertical carousel. Can someone help me. please
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("scrollTest");
let lastScrollTop = 0;
if (window.scrollY > elementTarget.offsetTop + 100) {
console.log("up 1");
$(".div2").show();
$(".div1").addClass("float-anim");
$(".div1").hide();
} else {
$(".div2").hide();
$(".div1").show();
}
});
body {
height: 200vh;
}
.div2 {
display: none;
}
.scrollTest {
position: fixed;
}
.float-anim {
position: relative;
-webkit-animation: floatBubble 9s;
animation: floatBubble 9s;
animation-fill-mode: forwards;
/*Safari and Chrome*/
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes floatBubble {
100% {
top: -100rem;
}
0% {
top: 0px;
}
}
#keyframes floatBubble {
100% {
top: -100rem;
}
0% {
top: 0px;
}
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="scrollTest" id="scrollTest">
<div class="div1">
<img src="https://i.pinimg.com/736x/f7/eb/d8/f7ebd86ff10d7d738d975f227a591600.jpg" width="50%" />
</div>
<div class="div2">
<img src="https://i.pinimg.com/736x/85/60/5a/85605a84fe1acc6e16ff5a84255b41ab.jpg" width="50%" />
</div>
</div>
</body>

How to stop and end a CSS transition with JavaScript using an image?

I have this problem where I am trying to implement a simple CSS transition with javascript, where when start button is pressed, it would move and stop depending on the duration of the keyframe and then when end is clicked, it would disappear and then again reappear when start is pressed with the same animation.
Does someone know what might be the issue here? And for some reason, when the transition is over, it jumps to the corner.
function add()
{
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove()
{
document.getElementById("myAnimation").classList.remove("run-animation");
}
body{
background-color: "#4287f5";
}
#myAnimation
{
position:relative;
height: 40px;
width: 40p;
}
.run-animation
{
-webkit-animation: move 6s;
animation: move 6s;
}
#-webkit-keyframes move
{
0% {left: -200px;}
25% {left: 200px;}
50% {left: 100px;}
}
#keyframes move
{
0% {left: -200px;}
25% {left: 200px;}
50% {left: 100px;}
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
You said you want a "transition" but are using an animation. If you want a transition, use a transition.
"Yeah but how do I make it go farther than the end point?" [someone might say.]
Use a custom bezier-curve timing function where the ordinate will be outside the [0, 1] range. Doing so this will create a bouncing effect.
From there, it's easy to control the two states of your element since you only have to change one value.
#myAnimation {
height: 40px;
width: 40px;
background: red;
transform: translate(-40px, 0);
transition: transform 1.5s cubic-bezier(0, 0, 0.5, 3);
}
:checked ~ #myAnimation {
transform: translate(100px, 0);
}
body{ margin:0; }
<input type="checkbox" id="check"><label for="check">show elem</label>
<div id="myAnimation"></div>
Note: In the above example I used transform instead of your original left because for performance reasons that should be the preferred way, but that will work with any animatable property.
Also, I used a simple checkbox as the control, but you can keep your button + js to toggle a class, that will do just the same.
That is probably because you are not defining how your element should look when it is not animated. You can set a display:none; on it by default and then a display:block; during the animation. Here is an example:
function add() {
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove() {
document.getElementById("myAnimation").classList.remove("run-animation");
}
body {
background-color: "#4287f5";
}
#myAnimation {
position: relative;
/*
Hide the element if it is not animated
*/
display: none;
height: 40px;
width: 40p;
}
#myAnimation.run-animation {
-webkit-animation: move 6s;
animation: move 6s;
/*
Show the element if it is animated
*/
display: block;
}
#-webkit-keyframes move {
0% {
left: -200px;
}
25% {
left: 200px;
}
50% {
left: 100px;
}
}
#keyframes move {
0% {
left: -200px;
}
25% {
left: 200px;
}
50% {
left: 100px;
}
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
maybe this can help
function add()
{
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove()
{
document.getElementById("myAnimation").classList.remove("run-animation");
}
body{
background-color: "#4287f5";
}
#myAnimation
{
position:relative;
height: 40px;
width: 40p;
left: 0;
opacity: 1;
}
.run-animation
{
-webkit-animation: move 6s;
animation: move 6s;
animation-fill-mode: forwards;
}
#-webkit-keyframes move
{
0% {left: 0;}
25% {left: 200px;opacity: 1;}
50% {left: 100px;opacity: 0;}
80% {left: 0; opacity: 0;}
100% {left: 0; opacity: 1;}
}
#keyframes move
{
0% {left: 0;}
25% {left: 200px;opacity: 1;}
50% {left: 100px;opacity: 0;}
80% {left: 0; opacity: 0;
100% {left: 0; opacity: 1;
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

Fade the same image in and out in one line of CSS automatically

I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".
What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>
You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>

JavaScript / CSS hover function

Would it be possible to create something like what I have in the code below with just vanilla JavaScript or CSS? I also want it to have the hover div stay open until a button click, which would then slide the original div back down. Anything helps, cheers!
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
.up-down {
overflow:hidden;
height:200px;
width:200px;
}
.slide {
width:200px;
height:200px;
}
.default {
background-color:#ccc;
}
.onhover {
background-color:#1DB7CB;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
Using your code as background, you can do it like this:
Remember Jquery is just a library of Javascript, anything you can do o Jquery you can do it on Javascript.
var updown = document.querySelector('.up-down');
var def = document.querySelector('.default');
var btn = document.querySelector('.clickMe');
updown.addEventListener('mouseover', function() {
def.style.height = '0px';
});
btn.addEventListener('click', function() {
def.style.height = '200px';
});
.up-down {
overflow:hidden;
height:200px;
width:200px;
}
.slide {
width:200px;
height:200px;
}
.default {
background-color:#ccc;
transition: height .2s linear;
}
.onhover {
background-color:#1DB7CB;
}
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"><button class="clickMe">
Click me
</button></div>
</div>
Are you looking for something like this?
.up-down {
height: 200px;
width: 200px;
}
.slide {
width: 100%;
height: 100%;
transition: all 0.5s;
}
.default {
background: blue;
}
.onhover {
background: green;
height: 0%;
}
.up-down:hover .default {
height: 0%;
}
.up-down:hover .onhover {
height: 100%;
}
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
Use CSS3 transition for height value of the div with onhoverclass attribute:
.up-down {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
}
.slide {
width: 200px;
height: 200px;
}
.default {
background-color: #ccc;
}
.onhover {
position: absolute;
bottom: 0;
height: 0;
background-color: #1DB7CB;
-webkit-transition: height 1s ease-out 0.5s;
-moz-transition: height 1s ease-out 0.5s;
-o-transition: height 1s ease-out 0.5s;
transition: height 1s ease-out 0.5s;
}
.up-down:hover .onhover {
height: 200px;
}
<div class="up-down">
<div class="slide onhover"></div>
<div class="slide default"></div>
</div>
To change effect direction use top: 0; instead of bottom: 0;
Would it be possible to create something like what I have in the code below with just vanilla JavaScript ?
Yes, everything that's done with jquery is doable with javascript.
With css
It sure is. Here is something to get you started
.up-down {
overflow:hidden;
height:200px;
width:200px;
position: relative;
}
.slide {
width:200px;
height:200px;
position:absolute;
}
.default {
background-color:#ccc;
}
.onhover {
background-color:#1DB7CB;
z-index: 2;
top: 200px;
transition: top 0.4s;
}
.up-down:hover .onhover {
top: 0px;
}
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>
So to explain the code somewhat:
.up-down:hover .onhover {
top: 0px;
}
on hover of up-down put the .onhover back up.
.onhover {
top: 200px;
transition: top 0.4s;
}
Initial position under the grey div, the transition makes it so :hover will be done on the span of 0.4s.
If you want the div to stay blue when the mouseleave, just add a class on mouseenter. You probably still can do it with pure css but I guess it would be harder than this:
.onhover {
background-color:#1DB7CB;
z-index: 2;
top: 200px;
transition: top 0.4s;
}
addedClass{
top: 0px;
}
// target is up-down
target.addEventListener("mouseenter", e => {
// element is your onhover elem
element.classList.add("addedClass");
});
target.addEventListener("click", e => {
element.classList.remove(" addedClass");
});
You can add event listeners with addEventListener.
The animation can be implemented with the transition property so a change in height will slowly transition instead of happening immediately.
I also added the button like you requested in your edit.
var updown = document.querySelector('.up-down');
var def = document.querySelector('.default');
var btn = document.querySelector('#btn');
updown.addEventListener('mouseover', function() {
def.style.height = '0px';
});
updown.addEventListener('mouseout', function() {
def.style.height = '200px';
});
btn.addEventListener('click', function() {
var isDown = def.style.height === '200px';
def.style.height = isDown ? '0px' : '200px';
});
.up-down {
overflow:hidden;
height:200px;
width:200px;
}
.slide {
width:200px;
height:200px;
}
.default {
background-color:#ccc;
transition: height .2s linear;
}
.onhover {
background-color:#1DB7CB;
}
<button type="button" id="btn">Toggle</button>
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>

jQuery Rotate CSS meter

I found some CSS that moves a needle like a VU meter. This mimics what I want to do. However it does a full animation from start to finish. Whereas I would like to make the change happen through a series of clicks. I'm trying to figure out how to do that and I am unsuccessful. I would like to know how I can make the needle move in the same way only through clicks
CSS
.gauge {
position:relative;
width:120px;
height:120px;
margin:10px;
display:inline-block;
}
.needle-assembly {
position:absolute;
top: 0%;
left:46%;
height:100%;
width:10%;
-webkit-transform: rotate(-45deg);
}
.needle-holder {
position:relative;
top:0;
left:0;
height:60%;
width:100%;
}
.needle {
position:absolute;
background-color:#A00;
height:100%;
width:20%;
left:40%;
}
#-webkit-keyframes moveNeedle
{
0% {-webkit-transform: rotate(-45deg);}
60% {-webkit-transform: rotate(55deg);}
65% {-webkit-transform: rotate(50deg);}
100% {-webkit-transform: rotate(65deg);}
}
#gauge {
-webkit-transform-origin:50% 50%;
-webkit-animation: moveNeedle 5s;
-webkit-animation-fill-mode: forwards;
}
HTML
<div class="gauge" style="height:140px; width:140px;">
<div class="needle-assembly" id="gauge">
<div class="needle-holder">
<div class="needle"></div>
</div>
</div>
</div>
jQuery
$('#gauge').click(function(){
$('#gauge').css({transform: 'rotate(45deg)'})
});
fiddle
It doesn't move when you click it because you are setting it to a static value.
You need to change the value somehow.
var deg=45;
$('#gauge').click(function(){
var t = 'rotate(' + deg +'deg)';
$('#gauge').css({transform: t})
deg = deg+5;
});
http://jsfiddle.net/4xc3wnux/6/

Categories