I have gotten an inline element to spin after it has been created using JavaScript by adding a new class to it but I am trying to add that spinning effect to all spans created using JavaScript, currently it is only doing it for 1.
function myFunction() {
var x = document.createElement("SPAN");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.setAttribute("id", "firstPracPara");
x.style.display = "block";
}
function myFunction2() {
var element = document.getElementById("firstPracPara");
element.classList.add("rotate");
}
span {
display: block;
}
.firstPracPara {
transform: rotate(10deg);
}
.rotate {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>
I have never used forEach before but i feel like this is the way to do it.
x.forEach(function (e) {
element.classList.add("rotate");
});
Try using like this.
function myFunction() {
var x = document.createElement("span");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.style.display = "block";
}
function myFunction2() {
let newSpan = document.querySelectorAll('span');
newSpan.forEach((e) => e.classList.add("rotate"));
}
span {
display: block;
}
.firstPracPara{
transform: rotate(10deg);
}
.rotate{
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>
Use querySelectorAll wisely. You can ignore already rotated spans.
See the Snippet below:
function myFunction() {
var x = document.createElement("SPAN");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.setAttribute("class", "firstPracPara");
x.style.display = "block";
}
function myFunction2() {
var elements = document.querySelectorAll(".firstPracPara:not(.rotate)");
elements.forEach(_element=>{
_element.classList.add("rotate");
});
}
span {
display: block;
}
#firstPracPara {
transform: rotate(10deg);
}
.rotate {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>
You can't use transform on span. See this link for more explanations.
How can I use CSS3 transform on a span?
As for your other question:
main.js
const elements= document.querySelectorAll('.className');
elements.forEach(elemen => element.classList.add('new class name');
You can get all the spans in a QuerySelector, then apply your class for each of them like this :
function myFunction2() {
spans = document.querySelectorAll('span')
spans.forEach(span => span.classList.add("rotate"))
}
You use getElementById to retrieve elements to change, but this function returns at most only one element.
The id global attribute defines an identifier (ID) which must be
unique in the whole document.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
You could use a class instead:
x.classList.add("item");
Then:
const elements = document.getElementsByClassName("item");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add("rotate");
}
Or, if you want to use forEach, transform the HTMLCollection to an Array with Array.from:
const elements = document.getElementsByClassName("item");
Array.from(elements).forEach(element => {
element.classList.add("rotate");
});
id should be uniq, that's why document.getElementById returns only one element.
In this case you should try to
x.setAttribute("class", "firstPracPara");
Now you can easily add new classes using below code
document.querySelectorAll('.className').forEach((elem) {
elem.classList.add("rotate");
});
Related
I have a few pages on my website and i made a header animation (pulldown). So, i need to reverse my animation (pullUp) when the other one page is clicked. Is there any option to do that ? Or is there any option to make the second animation (pullup) active when the other page is selleced
header{
background-color:black;
height:80px;
text-align:center;
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
There are a few options I can recommend:
Use CSS's :active selector to bind to the hash of the "pulldown" item:
```
second-page:active ~ .drawer {
animation: "pullUp" 1s linear;
}
```
So that when the user clicks on the url to your second page (#second-page), the animation will trigger, thus hiding the drawer itself.
Use Javascript to toggle classes:
(jQuery)
var $drawer = $(".drawer");
var $drawerToggle = $(".drawer-toggle").on("click", function() {
$drawer.toggle("fast");
}
Use an input[type="checkbox"] 'hack':
.drawer-toggle:checked ~ .drawer {
animation: "pullDown" 1s linear;
}
.drawer-toggle ~ .drawer {
animation: "pullUp" 1s linear;
}
Here is my code http://codepen.io/anon/pen/zrXrXM but as i told, when i click on <a> element, page transition is instantly. Is there any possible way to stop transition for a few seccond ?
This is exactly what I want to achieve (animation starts when I hover and reveses after I hover off). I just do not want the animation start until I hover over the object. In code the animation starts right after refreshing.
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
#-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
You can get rid of the animations and just add transform and transition properties directly on the class like this:
.class {
transform: rotate(0deg);
transition: transform 2s;
}
.class:hover {
transform: rotate(360deg);
transition: transform 5s;
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>
JavaScript
$(window).scroll(function() {
$('.animation-test').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideRight");
}
});
});
$('.element-to-hide').css('visibility', 'hidden');
JSFiddle
Something like this should work.
Working Example
$(window).scroll(function () {
$('.animation-test').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).addClass("slideRight");
} else {
$(this).removeClass("slideRight");
}
});
});
Basically its just using an if statement to find whether the element is within the view port and adding and removing the class. You can toggle the visibility of the element by using:
.element-to-hide{
visibility:hidden;
}
.slideRight {
visibility: visible;
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
I print success message using PHP like this :
<div class='alert alert-success'>Success!!</div>
I have this CSS3 Animate:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Now, I need to remove success message with my CSS Animate (fadeOutUp) after 5 seconds using jQuery. How do can i create this?!
You can create a hide a class which hide your element setting the opacity to 0 with a transition and add this class to your div with JavaScript.
CSS
.hide {
opacity: 0;
transition: opacity 1000ms;
}
JS
function fadeOut(el){
el.classList.add('hide');
}
div = document.getElementById('yourDiv');
setTimeout(function(){
fadeOut(div);
}, 5000);
HTML
<div id='yourDiv' class='alert alert-success'>Success!!</div>
Checkout this codepen.
Is this what you are looking for?
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}
or update your .fadeOutUp CSS to
.fadeOutUp {
-webkit-animation: fadeOutUp 5s infinite;
animation: fadeOutUp 5s infinite;
}
Then you can do
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").addClass("fadeOutUp");
}
JSFiddle
I'm creating CSS animations on the fly, so I need to insert a CSS timing function into my document. As in:
#-webkit-keyframes slide
{
from {
-webkit-transform: translateX(-100px) translateY(-100px);
-webkit-animation-timing-function: ease-in;
}
33% {
-webkit-transform: translateX(-100px) translateY(-50px);
-webkit-animation-timing-function: linear;
}
66% {
-webkit-transform: translateX(-50px) translateY(0px);
-webkit-animation-timing-function: linear;
}
to {
-webkit-transform: translateX(0px) translateY(0px);
-webkit-animation-timing-function: ease-out;
}
}
Any idea how to pull this off (the insertion) using Javascript? I can add regular classes without any trouble, but this seems to be a special case.
Actually, it's no different from adding any other style rule to a stylesheet:
var selector = "#-webkit-keyframes slide";
var rule = "{ from { -webkit-transform: translateX(-100px) translateY(-100px); -webkit-animation-timing-function: ease-in; } 33% { -webkit-transform: translateX(-100px) translateY(-50px); -webkit-animation-timing-function: linear; } 66% { -webkit-transform: translateX(-50px) translateY(0px); -webkit-animation-timing-function: linear; } to { -webkit-transform: translateX(0px) translateY(0px); -webkit-animation-timing-function: ease-out; } }";
document.styleSheets[0].insertRule(selector + rule, 0);
Note that the above DOM manipulation is WebKit (and FireFox) specific. You'd need to add some logic to s/insertRule/addRule for IE.