I'm working on a website and i had no idea how to make an image rotating infinitely around a static logo.
I don't have any code as I am not familiar with web coding, so if anyone here can provide a codepen or jsfiddle?
My website is working on 100% html, css and js.
I've googling a lot of article but none of it is exactly as I want.
I expect for a HTML code with CSS and JS
Based on the answer
How to animate image circular in css
you can do the following:
HTML:
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
That man also added a jsFiddle link for you to see the effect of above one.
http://jsfiddle.net/aquadk/m23sadrz/
A simple way is to add a CSS class to your image element and use keyframe animations.
https://codepen.io/limxz/pen/GLZdJN
As you can see from the demo, you have to define a keyframe (it's kind of like an animation sequence) and then add the parameters to control it.
#keyframes infinite-spinning {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.image-to-spin {
animation: infinite-spinning 1s infinite;
}
As I understand you need effect like moon rotating around the earth. You'll be able do it using CSS animation and transform-origin attribute.
transform-origin change your rotation point of the object. Normally transform-origin is located at center of the object but changing X and Y attributes for the transform-origin you will able to change the rotation point.
here is a example
<div class="logo-wrapper">
<h1>LOGO</h1>
<span class="img"></span>
</div>
replace span.img with your desire image
Hope this will help you!
Related
I want to rotate some ad banners on a few of my webpages. I cant find instructions online. I can find fixed footers but I want the banners to work on mobile and desktop.
You can use the transform and animation properties to accomplish something like this. RotateZ defines a 3D rotation along the z-axis.
.rotate {
display: inline-block;
animation: roll 1s infinite;
transform: rotateZ(360deg);
}
#keyframes roll {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
<h1 class="rotate">Banner Ad</h1>
Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..
http://sarahboulton.co.uk/livingroom.html
So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.
We were hoping to start applying small animations to the letters.. something along these lines..
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
But whether these movements could be randomised for each letter, still small movements.. but using something similar to..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
..each letter randomises its movement, maybe one ends up on..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. and another has..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !
The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.
So something like this:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
#keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
#keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
#keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>
etc
Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa
You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.
For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :
var css;
for (x=1;x=10;x++){
css += '#keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Finally you can assign each keyframe randomly to target divs:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.
This is what I have so far..
icons.addEventListener('click', (e)=>{
if(e.target.className==="skate"){
navigation.classList.remove('slideIn');
navigation.classList.add('slideOut');
skateboard.classList.add('skateOff');
x.classList.add('xslide');
}else{
navigation.classList.remove('slideOut');
navigation.classList.add('slideIn');
skateboard.classList.remove('skateOff');
x.classList.remove('xslide');
}
})
#keyframes skateOff{
0%{
transform:rotate(0);
}
50%{
transform:rotate(49deg);
}
100%{
transform: translateX(-300px);
}
}
.skateOff{
animation: skateOff ease-in 1s forwards;
}
.x{
visibility: hidden;
}
.xslide{
animation:slideOut .8s ease 2s forwards;
}
.menu{
visibility: hidden;
color:black;
width:10em;
background-color:white;
border-radius: 4px;
font-family: 'Raleway';
background: linear-gradient(to right,
rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
}
.slideOut{
animation: slideOut 1s forwards 1.2s;
}
#keyframes slideOut{
0%{
transform: translateX(-50%);
}
100%{
visibility: visible;
transform: translateX(0);
}
}
.slideIn{
animation: slideIn 2s ease forwards;
}
#keyframes slideIn{
0%{
visibility: visible;
transform: translateX(0);
}
100%{
transform: translateX(-150%);
}
}
The functionality of the JS is this,
when "skateboard" is clicked, it animates out, to the left and is no longer visible (the skateOff keyframes makes that happen, and i added a class that has that animation implemented also called ".skateOff")
(would it be better to not have a separate class and just add
skateboard.style.animation="animation: skateOff ease-in 1s forwards"?)
..anyway
then after "skateboard" animates out the "navigation"(which is a sidebar menu) adds the "slideOut" class which makes it slide out from the left, along with this the "X" to close the menu slide out, when that is clicked the "navigation"'s class of "slideOut" gets removed and the class of "slideIn" gets added.
This way of doing things seems inefficient, and like a lot of code, I was wondering if there's a simpler way of doing this? Toggling maybe? I've looked into toggling but i'm not sure it will work since the "navigation" element's initial state doesn't have the "slideIn" or "slideOut" class.
ANY tips will be greatly appreciated, thank you for reading and have a great day.
first of all, welcome on Stack Overflow :)
Your code may benefit from classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).
You can have conditional statements there, meaning classList.toggle("string", boolean), like this:
icons.addEventListener('click', (e)=> {
const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()
navigation.classList.toggle('slideIn', !isSkate);
navigation.classList.toggle('slideOut', isSkate);
skateboard.classList.toggle('skateOff', isSkate);
x.classList.toggle('xslide', isSkate);
});
A little PoC can be found here: https://codepen.io/tomekbuszewski/pen/XyNzqG
If you need more help, please post your code to CodePen or JSFiddle, it would be easier to discuss then.
How can I trigger CSS class to start my logo animation when scrolling/changing slide with fullpage.js?
I have this (it works alright) for animating my SVG wheel logo:
.logo-img:hover #wheel {
-webkit-animation: in 1s;
transform-origin: 49% 50%;
}
#wheel {
-webkit-animation: out 1s;
transform-origin: 49% 50%;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
It's a simple animation of spinning wheel 360deg., now I want it to spin when scrolling and use "in/out" keyframes depending on sliding page up or down.
I'm using fullpage.js and jquery v2.2.4
I hope It makes sense.
Thanks
Use the fullpage.js state classes.
So you can do:
.fp-viewing-section1-slide1 .myItem{
/*Whatever */
}
See my video tutorial here:
https://www.youtube.com/watch?v=qiCVPpI9l3M&t=5s
I want to have an image or DIV to start rotating on click similar to a record player. Is it possible to have it smooth and with javascript?
Thankyou very much in advance! :)
You have to make the rotation in CSS3.
#keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
#rotating_div
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
Here's the JavaScript:
function rotate(id) {
div = getElementById['id'];
div.style.animation-play-state = running;
}
Here's the HTML:
<div id="rotating_div" onclick="rotate("rotating_div")"></div>
Use the prefix -moz- and -webkit- to get the CSS3 to work in FF and other browsers. Have a look here: W3Schools.com
Good luck! :)
You need to use window.setInterval to control an animation. More info here
My first thought was to go for a combination of JS Timers, and CSS3 Transitions, but looking at w3schools.com, I saw there actually was animation support in CSS3.
I think this would be implented as following;
#keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
div #lp
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: running;
}
This isn't really a JS solution, but this is by far the simplest solution, but if your target browser isn't supporting CSS3, then you might want to use an animated GIF image.
You will have to make it work in the other webbrowsers too, but it's just to add the -webkit- tags and such, more information on the subject is found here: http://www.w3schools.com/css3/css3_animations.asp and here: http://www.w3schools.com/css3/css3_2dtransforms.asp
(Sorry to those who don't like w3schools.com)
Search this on google
Do a barrel roll
should give you an idea :)
https://www.google.co.in/search?q=Do+a+barrel+roll