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>
Related
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!
I want to make animation for my logos as in https://stripe.com/us/customers .
Maybe animation without shaking. But circles must go to the left side and spawn into right side again. I saw that div must be over screen size (at the site it have 3000px). I don't have any code, but any ideas is welcome
If it have js code, how I can do it with React
If you want an easy and fast CSS-only solution:
Create an image with all your logos on it. Make it a nice grid of logos so that the image can be horizontally repeated. Animate the background position.
#keyframes scrollbg {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1500px, 0, 0); /* width of the image */
}
}
.banner-wrapper {
overflow: hidden;
}
.banner {
height: 300px;
width: 4500px;
background: url("https://picsum.photos/g/1500/300?image=2") repeat-x;
animation: scrollbg 35s linear infinite;
}
<section class="banner-wrapper">
<div class="banner"></div>
</section>
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
so, i know how to do this by theory, buy when i try the animation is really laggy.
what i"m doing:
i got this UL with all sort of items and text (really standard) and when i want to animate it
i just add with JS a class "flipout" like so:
element.className = "flipout";
the CSS for the animation looks like this:
.flipout{
-webkit-animation-duration: .55s;
-webkit-animation-name: flipout_anim;
-webkit-transform-origin: left;
}
#-webkit-keyframes flipout_anim {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
the same HTML moves smooth as silk with JQtouch..
what am i doing wrong?!
the solution:
use translate3d(x,y,z);
moves smooth.