Develop Reference

How to delete the element (loading page + css animation 100%)?

How can I tell p js and jQuery
if #keyframes 100% ???
If #keyframes for the element == 100%, do something specific
My problem is I have an element on the page ,, I want to delete the element when the page loads, and if the animation is done in CSS
Meaning I do not want him to delete the element when the page loads. I just want to delete the element when the page is complete + animation 100%
The element is span (load-span)
HTML :
<a href="#">
<div class="back-move">
<span class="load-span"></span>
<div class="play-move"><span></span></div>
</div>
<p>GG img</p>
CSS:
.load-span {
position: absolute;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
width:40px;
height: 100%;
top: -50%;
left: 100%;
animation: load-span 1s;
animation-iteration-count: infinite;
transform: translate(15px, 0px) skewX(35deg);
}
#keyframes load-span {
100%{ top: 100%;left: -100%;}
}
Also I have tried :
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
But it didn't work ):

You can simply remove the animation-iteration-count: infinite; and this below code will work.
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
console.log('fdfdf');
$(this).remove();
});
})
.load-span {
position: absolute;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
width:40px;
height: 100%;
top: -50%;
left: 100%;
animation: load-span 1s;
transform: translate(15px, 0px) skewX(35deg);
}
#keyframes load-span {
100%{ top: 100%;left: -100%;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="back-move">
<span class="load-span"></span>
<div class="play-move"><span></span></div>
</div>
<p>GG img</p>

The reason your above snippet doesn't work is because your animationend listener is not being called as you've set the animation-iteration-count to infinite, which tells the browser that the animation is never ending.
There are two tricks you can use to solve this,
1.Get rid of infinite from the iteration count and set it to 1, then your code snippet would work
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
2.If you're using some sort of inifinite loader, you could use a timer, as your animation duration is 1s, you can create a setTimeout callback, that checks whether the page has fully loaded or not.
setTimeout(function(){
// Check whether page has loaded or not
}, 1000);

You were close with this. So instead of this:
$(window).on("load", function () {
$('.load-span').on("animationend", function(){
$(this).remove();
});
})
You can try this:
Use webkitAnimationEnd along with animationend
$(window).on("load", function () {
$('.load-span').on("animationend webkitAnimationEnd", function(){
$(this).remove();
});
})
Hope this works!

Executing keyframes animation in JS or jQuery

I know that it is possible to set the animation of an element by id either in a stylesheet or in JS from the DOM. The issue is that I want the animation to execute every time a click action on a specific element is performed by the user. Adding the animation to an element's style in JS seems to add it permanently so that the keyframes animation cannot be performed again, (only performed once when the window finishes loading). I also thought about using jQuery's .animate() function however all documentation points to it animating over CSS specific styles and not setting/calling the animation style attribute as if I were to set it using CSS. I want to know the best way of executing my animation over an element when another element is clicked on by the user and consistently executing the animation for each click.
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate(0, -20%);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
The current way I'm setting animation for an element:
$("#element").css("animation", "fadeInDown 0.5s ease-in 0s 1");

This is a toggling animation using transition and jquery, without using .animate()
$(document).ready(function() {
$('button').click(function() {
var box = $('.box')
box.removeClass("show")
setTimeout(function(){
box.addClass("trans").addClass("show")
setTimeout(function(){
box.removeClass("trans")
},100)
},200)
});
});
.box {
background: red;
height: 50px;
width: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
opacity: 0;
transform: translate(0, -20%);
}
.box.trans {
transition: all 0.7s;
}
.box.show {
opacity: 1;
transform: translate(0, 0);
}
<button>Test</button>
<div class="box show"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

It's my first answer on stack overflow.
I had the same question about animation.
What I did last was just like Vivek Patel's answer, but instead of toggling the css keyframe, I created a separated class only for css animation("animation-fadeInDown"), and toggle it.
Because the animation-name "fadeInDown" is correponding to the #keyframes name, so if you separate it you could apply the animation to other elements, by just toggling the animation class.
And, you can still do the css deco to the original box seperately, which might be more clear to read.
I hope this is close to what you looking for.
$('button').click(() => {
$('.box').toggleClass('animation-fadeInDown');
});
.box {
width: 50px;
height: 50px;
background: black;
}
.animation-fadeInDown {
animation: fadeInDown 0.5s ease-in 0s 1
}
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate(0, -20%);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<button>
Test
</button>

Basically CSS animation only runs once when the page loads. So it is not possible to re-trigger it again. Here is the workaround for your use case: Remove the element from the page entirely and re-insert it.
Try this:
$('button').click(() => {
var oldDiv = $('#animated-div');
newDiv = oldDiv.clone(true);
oldDiv.before(newDiv);
$("." + oldDiv.attr("class") + ":last").remove();
});
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate(0, -20%);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
.animated-div {
animation: fadeInDown 0.5s ease-in 0s 1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animated-div" class="animated-div" style="width: 50px; height: 50px; background: black"></div>
<button>
Test
</button>

This is an simple example that use jquery to animate in Queue as it works in #keyframes. The transition duration and animation duration gives more control on the animation character.
$(document).ready(function() {
$('button').click(function() {
$('.box')
.css('transition', 'all 0.2s')
.animate({ opacity: 0 }, {
duration: 200,
step: function(now) {
$(this).css({ opacity: now });
$(this).css({ transform: 'translate(0, -20%)' });
}
})
.animate({ opacity: 1 }, {
duration: 600,
step: function(now) {
$(this).css({ opacity: now });
$(this).css({ transform: 'translate(0, 0)' });
}
})
});
});
.box {
background: red;
height: 50px;
width: 50px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
<button>Test</button>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

loading page shows for three seconds

I'm making a personal portfolio and want to show my site tagline for like 3 seconds (full screen), then fade out to show the actual website. What code is used to show some initial div then fade out to the actual website?

This works, with setTimeout(). After 3000 ms, we add the class hidden to the "loading element" that will hide it. You can customize the classes in order to achieve other types of animations. For example, now the animation is set to run for 500 ms.
setTimeout(function() {
$('#loading').addClass('hidden');
}, 3000);
#loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
opacity: 1;
transition: 0.5s;
visibility: visible;
}
#loading.hidden{
opacity: 0;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading site...</div>
<div id="site">
<h1>My site</h1>
<p>Lorem ipsum</p>
</div>
If you prefer regular javascript, you can do it like this:
setTimeout(function() {
var element = document.getElementById('loading');
element.classList += " hidden";
}, 3000);

I made a CSS-only version using CSS3 keyframes/animation.
HTML:
<div id="websiteOverlay">
"Some tagline"
</div>
<div class="container">
<h1>
Website content header
</h1>
<p>
Website content body, with some paragraphs
</p>
</div>
CSS:
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#websiteOverlay {
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
color: white;
opacity: 0;
-webkit-animation: fadeOut 3s;
animation: fadeOut 3s;
}
Fiddle: https://jsfiddle.net/9z6ow28m/

At the bottom of your HTML document, add a fixed div:
<div class="fixed">Tagline...</div>
Then make it fixed and fill 100% with CSS:
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
So, now you have the tagline element on top of everything else. Last thing you need to do is fade out that element after 3 seconds. This can easily get achieved with jQuery for example:
setTimeout(function() {
jQuery('.fixed').fadeOut();
}, 3000);
That's all it takes

Random animation on Simple Image Slideshow

I want to apply a random animation on my slideshow image. First, I tried adding an animation such as scale but it didn't work as I wanted it to.
Things I want to fix:
Smoothness on fadein
Random animation (can be anything at this point, I just want to see how it's done)
Fiddle: http://jsfiddle.net/jzhang172/e7cLtsg9/1/
$(function() {
$('img').hide();
function anim() {
$("#wrap img").first().appendTo('#wrap').fadeOut(3500).addClass('transition').addClass('scaleme');
$("#wrap img").first().fadeIn(3500).removeClass('scaleme');
setTimeout(anim, 3700);
}
anim();
});
body,
html {
margin: 0;
padding: 0;
background: black;
}
#wrap img {
position: absolute;
top: 0;
display: none;
width: 100%;
height: 100%;
}
.transition {
transition: 10s;
}
.scaleme {
transition: 10s;
transform: scale(1.3);
}
.box {
height: 300px;
width: 500px;
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="wrap">
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
</div>
</div>

Here is a sample using CSS animations and jQuery (for achieving the randomness of animations). If you don't wish to use CSS animations and want to stick to transitions + jQuery effects (like fadeIn), you can still adapt this code to support it because the base idea will still remain the same. I am not too comfortable with jQuery effects and have hence stuck to using CSS animations.
Below is an overview of how it is being done (refer inline comments for more details):
Inside a wrapper there are a group of images that are part of the slide-show (like in your demo).
Using CSS #keyframes, a list of animations (one of which would be used randomly) is created in addition to the default fade-in-out animation. This list is also maintained in an array variable (in JS for picking up a random one from the list).
On load, the default fade-in-out animation and one random animation is added to the 1st element.
An animationend event handler is added to all of the images. This event handler will be triggered when the animation on an element ends. When this is triggered, animation on the current element is removed and the default fade-in-out + a random animation is added to the next element.
The animations are added using inline styles because if we add multiple CSS classes each with one different animation, then the animation in the latest class will override the others (that is, they will not happen together).
A loop effect is achieved by checking if the current element has any other img sibling elements. If there are none, the animation is added back to the 1st element.
$(window).load(function() {
$img = $('img'); // the images
var anim = ['zoom', 'shrink', 'move-down-up', 'move-right-left']; // the list of random animations
var rand = Math.floor(Math.random() * 4) + 1; // random number
$img.each(function() { // attach event handler for each image
$(this).on('animationend', function(e) { // when animation on one image has ended
if (e.originalEvent.animationName == 'fade-in-out') { // check the animation's name
rand = Math.floor(Math.random() * 4) + 1; // get a random number
$(this).css('animation-name', 'none'); // remove animation on current element
if ($(this).next('img').length > 0) // if there is a next sibling
$(this).next('img').css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // add animation on next sibling
else
$img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // else add animation on first image (loop)
}
});
});
$img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); //add animation to 1st element on load
})
#wrapper {
height: 250px;
width: 300px;
position: relative;
}
img {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
transform-origin: left top; /* to be on the safe side */
animation-duration: 3s; /* increase only if you want duration to be longer */
animation-fill-mode: backwards; /* fill mode - better to not change */
animation-iteration-count: 1; /* no. of iterations - don't change */
animation-timing-function: ease; /* better to leave as-is but can be changed */
}
#keyframes fade-in-out {
0%, 100% {
opacity: 0;
}
33.33%, 66.66% { /* duration is 3s, so fade-in at 1s, stay till 2s, fade-out from 2s */
opacity: 1;
}
}
#keyframes zoom {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
#keyframes shrink {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(.5);
}
}
#keyframes move-down-up {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(50px);
}
}
#keyframes move-right-left {
0%, 100% {
transform: translateX(0px);
}
50% {
transform: translateX(50px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<img src="https://placehold.it/200/000000/ffffff" />
<img src="https://placehold.it/200/ff0000/ffffff" />
<img src="https://placehold.it/200/00ff00/ffffff" />
<img src="https://placehold.it/200/0000ff/ffffff" />
</div>

Highlight element using jQuery with scaled transparent element

I'm trying to create the following effect for any element using only jQuery/plugins:
In particular it should use a transform for the scale rather than width and height animation and be usable on any DOM element.
Is there a plugin available for jQuery which will achieve this effect? It should be quite simple: duplicate the dom object with clone(), reposition the clone over the original absolutely then animate a scale transform and opacity on the new element. However, I suspect it's not as simple as this.
Any ideas?

You don't need jQuery to accomplish that animation. You can use CSS3 animations and transform properties. Check out the following example I created:
http://jsbin.com/purik/1/
HTML:
<div class="logos">
<div class="logo"></div>
<div class="logo animated"></div>
</div>
CSS:
.logos {
position: relative;
}
.logo {
width: 100px;
height: 70px;
background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.logo.animated {
position: absolute;
left: 0;
top: 0;
animation: scale-fadeout 2s infinite;
-webkit-animation: scale-fadeout 2s infinite;
}
#keyframes scale-fadeout {
0% {
transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
#-webkit-keyframes scale-fadeout {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
-webkit-transform: scale(1.05);
}
100% {
opacity: 0;
-webkit-transform: scale(1.35);
}
}

This works if the parent element is position: relative, and the element itself is position: absolute.
Clones the element and then animates it to change the size, change the values of left and top, and the set opacity: 0.
Fiddle: http://jsfiddle.net/Ej38P/1/