I would like to ask if you can show me how to make the "scroll tape bar" (I don't know the correct term for this object) that is in this store: https://thefutureofficial.eu/
"scroll tape bar here"
Thanks a lot guys.
Simone.
Use following Snippet to achieve this effect. You can style the text as per your choice.
.main {
background:#000;
padding:0.5rem;
overflow: hidden;
}
.text {
color:white;
animation : slide 10s linear infinite;
}
.gap{ margin-right:100px;}
#keyframes slide {
0% {
transform: translateX(100%)
}
100% {
transform: translateX(-100%)
}
}
<div class="main">
<div class="text">
<span class="gap">Text</span>
<span class="gap">Text</span>
<span class="gap">Text</span>
<span class="gap">Text</span>
</div>
</div>
Related
i want to move an img by button click. I know this question has been asked a lot, but i couldnt use them.
Heres the relevant HTML:
<button class="ggE" (click)="gegenEnemy(chosenHero, actualEnemy);moveFist(); ...
<div class="col">
<img id="img" class="fist" src="...">
This is the function (typescript):
moveFist(): void {
document.getElementById('img').classList.add('fist');
}
And my css, which makes the picture move from left to right:
.fist {
width: 70px;
height: 70px;
position: relative;
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
So why cant i connect it with a button click?
First of all validate your HTML code
<button class="ggE" onclick="moveFist();">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
Edits:
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
set the width of img by it's offset width that is,
img.offsetWidth;
Can you something like this ?
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
img{
width: 70px;
height: 70px;
position: relative;
left:50px;
animation-duration: 2s;
top:20px;
}
.fist{
position:relative;
animation-name: example;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
<button class="ggE" onclick="moveFist()">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
I'm using a spinner icon from a font set and rotating it. I must set the transform-origin to define the centre of rotation of the icon to avoid wobbling (as suggested here). However, if I change the font size, the wobbling effect comes again. The same happens if I change the browser resolution.
HTML:
<div>
<p>First icon</p>
<i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
<p>Second icon</p>
<span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Third icon</p>
<span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Fourth icon</p>
<span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>
CSS:
.rotation-animation {
animation: div-rotate 0.7s infinite steps(8);
transform: translateZ(0);
-webkit-transform: translateZ(0);
transform-origin: 50% 51%;
-webkit-transform-origin: 50% 51%;
}
#keyframes div-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes div-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#first {
font-size: 20px;
}
#second {
font-size: 30px;
}
#third {
font-size: 40px;
}
#fourth {
font-size: 50px;
}
https://jsfiddle.net/r944z1a6/
As you can see in the above link, the second icon is the only one which does not wobble. If you change the browser resolution, the second one will wobble too.
Why is it happening? The x and y percent offsets to the centre of rotation shouldn't change when changing the font size. Isn't it?
Is there any way to fix this and make the spinner not to wobble for any size/resolution?
Note: I've used font awesome for the example, but I'm actually using a custom font, which has the same effect.
EDIT:
Regardless of #vals answer, the only way that I've found which doesn't seem to wobble is using linear rotation:
animation: div-rotate 0.7s infinite linear;
It's not so cool, but works.
There is nothing wrong with the font-awesome icon, and spinning it.
Try setting it to 200px and you will see that it spins perfectly.
The wobbling that you see, and that you are trying to correct, arises from rounding px from the browser at small font sizes.
It's impossible to predict what will be the size rounding for any font size and browser zoom.
So, the only way to get a perfect solution is to make your effect at a larger scale, and then scale it
.rotation-animation {
animation: div-rotate 0.7s infinite steps(8);
transform: translateZ(0);
transform-origin: 50% 50%;
}
#keyframes div-rotate {
0% { transform: rotate( 0deg) scale(0.1);}
100% { transform: rotate(360deg) scale(0.1);}
}
#first {
font-size: 200px;
margin: -90px;
}
#second {
font-size: 300px;
margin: -140px;
}
#third {
font-size: 400px;
margin: -180px;
}
#fourth {
font-size: 500px;
margin: -230px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<p>First icon</p>
<i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
<p>Second icon</p>
<span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Third icon</p>
<span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Fourth icon</p>
<span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>
I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated!
My Code :
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
It is fairly simple to achieve the effect that you are looking for. All that is needed is for you to place the images absolutely on top of each other and then add an animation which changes the opacity of the image (or its container) accordingly.
The key parts when animating multiple elements in a loop are to
make sure that the animation of the second and subsequent elements start after all the previous elements have completed their animation and
make sure all the previous elements stay in the final state until the other elements complete their animation (otherwise they will mess up the animation).
The first part can be achieved by using progressive animation-delay on elements while the second part is achieved by setting the #keyframes accordingly. Here, since there are 3 images, animation of each of them should be completed at 33% mark itself (because during the other 66%, the other 2 will be executing their animation). The state as at 33% should be maintained till 100%.
(If you have 4 images, it should complete at 25% and so on.)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
#keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>
Are you probably looking for the steps timing-function? It provides a gif-like way to animate an image set!
there is an example: https://jsfiddle.net/simurai/CGmCe/
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
Hope it helps!
I incorporated Bootstrap on my site to make it responsive. I also added in CSS animation to my code. However, this takes the text from being in the center of the page, to starting on the far left of the page, finishing the animation, and then shifting the text to the center.
How do I start the animation in the center itself?
Bootstrap Code:
<header id="top" class="header">
<div class="text-vertical-center">
<h1 class="typing">Hi, welcome to my website.</h1>
<h3 class="typing">Let's get started.</h3>
<br>
Let's Get Started.
</div>
</header>
CSS Code:
.css-typing
{
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(50, end)1;
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Any thoughts or help would be awesome.
Thanks!
I have a div and can neither use ID nor class.
I can only use names like so:
<div name="picture">
<img src="http://i.imgur.com/p0Fu5UZ.jpg" />
</div>
<div name="info">
<p>- Insert information here</p>
</div>
CSS:
div{
-webkit-animation: name 4s infinite linear
}
#-webkit-keyframes name {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
What's the appropriate way to select any particular div, because [name=picture] doesn't work with the crammed code nor the non-crammed code. What can i do to fix this?
It should work for you:
CSS:
div[name="picture"] {
-webkit-animation: name 4s infinite linear
}
#-webkit-keyframes name {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
HTML:
<div name="picture">
<img src="http://i.imgur.com/p0Fu5UZ.jpg" />
</div>
<div name="info">
<p>- Insert information here</p>
</div>
Demo: http://jsfiddle.net/srnug/121/
If you need the elements inside the div to rotate, then you can modify the selector as div[name="picture"] img or div[name="picture"] p