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!
Related
I am running into this Safari problem where space of an absolute positioned <span> isn't recognized in Safari. It works perfect in both Opera and Chrome.
I have no idea how to solve this. I tried all kind of height calc combinations. Here is the code:
<h1>
<span>
<span class="rw-words rw-words-1>Sentence with three long words
</br>
<span class="">Rotating word 1</span>
<span class="">Rotating word 2</span>
</span>
</h1>
<div>A lot of additional text</div>
Here is the css:
.rw-words-1 span{
animation: rotateWordsFirst 8s linear infinite 0s;
}
#keyframes rotateWordsFirst {
0% { opacity: 0; animation-timing-function: ease-in; }
2% { opacity: 1; }
40% { opacity: 1; }
53% { opacity: 0; }
100% { opacity: 0; }
}
.rw-words{ }
.rw-words span{
position: absolute;
opacity: 0;
color: #6b969d;
}
.rw-words span:nth-child(2) {
animation-delay: 4s;
color: #6b889d;
}
So there is a three word sentence and below there are two absolute positioned words which change from on into the other (rotating words animation).
The problem is that the "more text" below begins after Sentence 1 and is therefore overlapping the "Rotating words" in Safari while chrome and firefox puts it correctly below the Rotating words.
A fixed height of the h1 container doesn't work because "sentence 1" wraps a lot.
So basically I need to set the height of the h1 or span correctly.
The height has to be
width: fit-content;
plus one line-height to account for the absolute spans. But I can't find a way to make that work in css.
I am not very experienced and the solution might be simple.
best regards
Martin
UPDATE Feb 8th 2023 based on replies:
I found a simple solution which works.
I simply added the div right under the absolute spans and added relative position and top margin of 1.5em.
You have errors in your HTML.
You forgot to close the attribute value in your <span> with the class rw-words rw-words-1.
<br> has no closing tag. You can either write it as an open tag or you can close it where you opened it <br />, but you can't close it like this </br>
Try it like this:
<h1>
<span>
<span class="rw-words rw-words-1">Sentence with three long words
<br>
<span class="">Rotating word 1</span>
<span class="">Rotating word 2</span>
</span>
</h1>
<div>A lot of additional text</div>
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>
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 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!
Here i am implementing an Image slider
My problem is when i hover my image slider i want to stop my css transition property.
I tried using addclass and removeclass but failed
Here is my code
HTML
<div id="container">
<img src="http://worksheetgenius.com/Next_button.jpg" width="106px;" id="right"/>
<img src="http://worksheetgenius.com/Previous_button.jpg" width="106px;" id="left"/>
<div id="slider">
<div id="slide1" class="slide transition">
<img src="http://s.cghub.com/files/Image/030001-031000/30883/37_max.jpg"/>
</div>
<div id="slide2" class="slide transition">
<img src="http://www.f-16.net/attachments/83_1093_207.jpg" />
</div>
<div id="slide3" class="slide transition">
<img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" />
</div>
<div id="slide4" class="slide transition">
<img src="http://3.bp.blogspot.com/-fpTz_1UegJM/TZ6eQWXTueI/AAAAAAAAASY/TsYJ5xZyixQ/s1600/banner_239.jpg" />
</div>
</div>
</div>
CSS
#slider
{
overflow:hidden;
height:363px;
position:absolute;
left:180px;
top:159px;
padding:0px;
margin:0px;
background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
width:1000px;
}
#slide1
{
position:absolute;
left:0px;
z-index:1;
}
.slide
{
position:absolute;
left:1000px;
}
.transition
{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.notransition
{
-webkit-transition: none;
transition: none;
}
#right
{
position:absolute;
top: 287.5px;
right: 127px;
z-index: 99;
}
#left
{
position:absolute;
top: 287.5px;
left: 127px;
z-index: 99;
}
Script
var t=setInterval(function(){$("#right").click()},5000);
$(document).ready(function()
{
var present=1;
var next=2;
var total_slide=document.getElementById("slider").childElementCount;
$("#right").click(function()
{
present_slide="#slide"+present;
next_slide="#slide"+next;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present++;
next++;
if(present==(total_slide+1))
{
present=1;
next=2;
for(i=1;i<=total_slide;i++)
{
$("#slide"+i).css("left","1000px");
}
$("#slide1").css("left","0px");
}
});
$("#left").click(function()
{
if(present==1)
{
next_slide="#slide"+total_slide;
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present=total_slide;
next=1;
}else
{
next_slide="#slide"+(present-1);
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present--;
next--;
}
if(next==0)
{
present=(total_slide-1);
next=total_slide;
}
});
$(".slide").on('mouseenter',function()
{ $(this).removeClass('transition').addClass('notransition');});
$(".slide").on('mouseleave',function()
{$(this).removeClass('notransition').addClass('transition');});
});
In the above provided code i used to classes transition and no transition.
I also tried with CSS as follows
.slide:hover
{
-webkit-transition: none;
transition: none;
}
I was doing a similar idea and I ended up using this cycle plugin for jquery Malsup Cycle. I then used this piece of code but you can find all of the options at the link above.
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 5000,
pause: 1
});
});
Setting the pause flag to one gets your desired functionality where it will stop animating on hover. I hope this helps!
HTML
<div id = "slider">
<div>
Slide 1
</div>
<div>
Slide 2
</div>
<div>
Slide 3
</div>
<div>
Slide 4
</div>
</div>
You just need to link to the plugin in the html and this should provide the desired functionality as I see it. You can put whatever content you want in the divs. I used a picture of our clients' logos with a short description as a banner on our company's page.
EDIT: I changed the selector to match the id that you used. HTML added.