Rotating Icons using JavaScript not working properly - javascript

<html>
<head>
<link rel="stylesheet" type="text/css" href="doll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(".rotation_90deg").click(function(){
$(this).toggleClass("down") ;
});
</script>
</head>
<body>
<div class="fa fa-anchor rotation_90deg"></div>
</body>
</html>
associated CSS:
.rotation_90deg{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
I am trying to rotate an icon using this code but it's not working, would someone be able to provide a solution or parallel code?

You need to move the code within document ready handler or move the script tag at the end of the HTML to run only after elements are loaded.
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
<script>
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
</script>
In case elements are dynamically added then you should use event delegation to listen to the click event of the element.
<script>
$(document).ready(function() {
$('body').on('click', '".rotation_90deg", unction() {
$(this).toggleClass("down");
});
});
</script>

Related

how can I create css news ticker for AMP-HTML?

here is a good example with jquery but it is not valid jQuery for AMP
$(document).ready(function() {
try {
var ticker_holder = $('.ticker-holder').get(0);
var ticker_text = $('.ticker').get(0);
var ticker_pos = ticker_text.parentNode.offsetWidth;
var ticker_data = $(ticker_holder).html();
$(ticker_text).parent().html('<marquee scrollamount="10" scrolldelay="">' + ticker_data + '</marquee>');
$('.emergencyalert').hover(
function() {
$('marquee', this).get(0).stop();
}, function() {
$('marquee', this).get(0).start();
});
}
catch (o) {}
});
Is there any component in AMP to do something like that?
<marquee> element was removed from HTML5. I suggest you can achieve marquee effect from css animations. AMP doesn't have any such component which has functionality like marquee. Here is code i tested in AMP playground and adds marquee like effect. You can modify it further to achieve exact same effect you looking for.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-autocomplete/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>amp-autocomplete</title>
<style amp-custom>
.wrap{
position: relative;
}
.ul-list{
list-style: none;
}
.li-list{
display: inline-block;
padding: 1em 2em;
font-size: 1.2em;
}
.spot-anim {
position: absolute;
right: -1em;
transform: translateX(-100%);
will-change: transform;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: marquee;
-moz-animation: marquee;
-o-animation-name: marquee;
animation-name: marquee;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="wrap">
<ul class="ul-list spot-anim">
<li class="li-list"> News number 1</li>
<li class="li-list"> News number 2</li>
<li class="li-list"> News number 3</li>
<li class="li-list"> News number 4</li>
</ul>
</div>
<style amp-keyframes>
#keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-150%);
}
}
</style>
</body></html>
You may also use amp-script with layout="fixed-height" here to achieve same animations with stop functionality on mouse over event with javascript.

Slide in and slide out a button on page scroll

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container{
height: 2000px;
background:green;
padding:10px;
}
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
}
.slideIn{
animation: 600ms ease-in 0s slideIn;
animation-fill-mode: forwards;
}
.slideOut{
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
#keyframes slideIn {
from{
right:-50%;
}
to{
right:0%;
}
}
#keyframes slideOut {
from{
right:0%;
}
to{
right:-50%;
}
}
</style>
</head>
<body>
<div id="container" class="container">
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
<div id="someEle" style="height: 200px;background:blue;"></div>
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
</div>
<button id="btn" class="btn">GET API ACCESS</button>
<script>
function init(){
var parent = document.getElementById("container");
window.addEventListener('scroll',function(e){
var parentScrollHeight = parent.scrollHeight;
var parentScrollTop = document.documentElement.scrollTop;
var startPoint = (parentScrollHeight/100) * 10;
var endPoint = (parentScrollHeight/100) * 70;
console.log(parentScrollTop,startPoint,endPoint)
try{
var ele = document.getElementById("btn");
if(parentScrollTop > startPoint && parentScrollTop < endPoint){
console.log("added")
ele.classList.add("slideIn");
}else{
console.log("removed");
ele.classList.remove("slideIn");
}
}catch(e){
console.log(e);
}
});
}
init();
</script>
</body>
</html>
how to slide in and slide out a button while scrolling a page. slide in is working slide out not working.
you should add animation for btn
css
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}

CSS transition for transform property without rotation

I need to transform an element with rotation, I want to animate (with transition) the transform but not the rotation.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.transF{
transform:translate3d(150px, 100px, 0px) rotateZ(-50deg);
transition : transform 3s linear;
}
</style>
<script>
var add = function(){
$("#test").addClass("transF");
}
var remove = function(){
$("#test").removeClass("transF");
}
</script>
</head>
<body>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>
</body>
</html>
Plunkr link
I don't think you can transition a specific property - use animation instead:
animate the translate3d
preserve the rotateZ value while the animation is happening
See demo below:
var add = function() {
$("#test").addClass("transF");
}
var remove = function() {
$("#test").removeClass("transF");
}
.transF {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
animation: translate 3s linear;
}
#keyframes translate {
from {
transform: translate3d(0px, 0px, 0px) rotateZ(-50deg);
}
to {
transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>
You can change the to this one.
<style>
.transF
{
transform:translate3d(150px, 100px, 0px);
transition : transform 3s linear;
}
</style>
Just remove the rotateZ(-50deg).
Thank you.

when I click twice css3 transform is not working

I want the square rotation when I click the start button.but:
when I click once ,it is working. when I run twice ,this css3 effect is not working.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run").addClass("run");
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
You need to have a timeout in between removing and adding the class. Otherwise it won't recognize the change.
$(function(){
var $obj=$(".red");
$("#btnStart").on("click",function(){
$obj.removeClass("run");
setTimeout(function(){
$obj.addClass("run");
}, 10);
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
.run{
transform:rotate(3600deg);
transition: transform 5s ease 0s;
-moz-transition:transform 5s ease 0s;
-webkit-transition:transform 5s ease 0s;
-o-transition:transform 5s ease 0s;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div><br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>
Instead of add/remove class, you can use animate() function of jQuery !
$(function(){
var $obj=$(".red");
$("#btnStart").click(function(){
$('.red').animate({ borderSpacing: -3600 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
});
});
body{padding:100px;}
.red{background:#f00;width:100px;height: 100px;}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="red"></div>
<br/>
<button id="btnStart">
开始旋转
</button>
</body>
</html>

Problems with CSS3 animations and animations following a javascript class switch

Im trying to get an animation to trigger when I update the elements class via javascript. The intention is for this to be part of a PhoneGap app so -webkit- prefixes should do the job to my knowledge.
Anyhow, the animations are currently not working when I'm testing in Chrome, both when on the element alone as well on the new class. Can anybody explain where I'm going wrong here?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
Start
</a>
<div id="ani"></div>
</body>
</html>
style.css
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(50px);
}
20%, 60% {
-webkit-transform: translateY(70px);
}
80%, 40% {
-webkit-transform: translateY(30px);
}
}
#ani {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: red;
-webkit-transform: all 0.1s;
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 2s;
}
#ani.bounce{
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
}
#ani.fade{
-webkit-transition: opacity 0.4s linear;
-webkit-animation-delay: 3s;
}
There are two problems. First there is a typo in your inline Javascript: getElementById('ani1'). There is a "1" appended at the id.
The second thing is that you have to remove the quotes in the -webkit-animation statements.
Incorrect:
-webkit-animation: 'bounce' 1s 'ease-in-out';
Correct:
-webkit-animation: bounce 1s ease-in-out;
If you fix that, it should work ;-)

Categories