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>
Related
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 have a paragraph on my site, off which I want certain words to pulse with animate.css. I have successfully added animate.css to my site, however, when I try to add it to my span class, it is not working. I did some research and it seems like you have to add a display to the span, since animate.css doesn't work if if the display is not working. Here's my code:
.animatespan {
display: -moz-inline-stack;
display: inline-block !important;
zoom: 1;
vertical-align: top;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse animatespan">pulsing word.</span>
</h1>
You only need to say inline-block the code was working expected it's just that it was pulsing once and then stopping.
Adding infinite means it will keep repeating the animation.
You can read the documentation here.
.animatespan {
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
Text that is not supposed to animate
<span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word.</span>
</h1>
From what I understand it's because the span isn't displayed inline-block;
so you would need to do the following:
.animatespan {
display: -moz-inline-stack;
zoom: 1;
vertical-align: top;
}
h1 span {
display:inline-block;
}
Here is a working example:
https://jsfiddle.net/8ea9armk/1/
i've added an extra css class named animated, which will make the pulse run on an infinite loop.
here's a little css I use to swap images. I use them for little 32px social icons which go from green image to red image. They just swap.
This is the code (using placeholder images):
.soc img:last-child {
display: none;
}
.soc:hover img:first-child {
display: none;
}
.soc:hover img:last-child {
display: inline-block;
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="https://lorempixel.com/32/32/cats" />
<img src="https://lorempixel.com/32/32/food" />
</a>
</li>
I want to add a little DELAY between the swaps. Like 0.8 or 1.6 seconds.. so the transition between images / color changes are smoother and prettier.
The transition should go like this: Normal Condition to HOVER condition and also, when you just hover and move mouse away, getting back to its normal condition should also have the delay.. well that's what I would love to make.
I tried all kinds of DELAY codes that I was able to google, none worked.. But I also don't want to change the main aforementioned css code which I use, to the ones that will have to have the background-image so that for each icon I gotta make a different 5 line-long css code.
Can anyone please help me with this?
Thank you.
set the right opacity starting points
:first-child or green starts at 1 or default value and goes to 0 on :hover and :first-child or red starts at 0 and goes to 1 on :hover.
position:absolute stacks the objects on top of each other.
then use transition:opacity ease 1s for the smooth animation effect. What this property does is it tells the browsers to fade the transition from opacity:0 to opacity:1 over the duration of 1s.
adding it to the selector instead of the pseudo-class :hover makes the smooth transition occur both when you hover and when you leave the :hover state.
.soc img {
position: absolute;
width: 40px;
height: 40px;
transition: opacity ease 1s;
}
.soc img:first-child {
background: green
}
.soc:hover img:first-child {
opacity: 0
}
.soc img:last-child {
opacity: 0;
background: red
}
.soc:hover img:last-child {
opacity: 1
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="/iconslocation/icongreen.png" />
<img src="/iconslocation/iconred.png" /></a>
</li>
It sounds you want to soften the transition between images by fading from one to the other. I recommend using CSS to transition opacity over time.
In my example below, I've positioned the second image absolutely, so it's placed directly in front of the first one, and set it to be transparent. Then I fade it in upon hover.
ul {
list-style: none;
padding: 0;
margin: 0;
}
.soc {
position: relative;
display: inline-block;
}
.soc img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .2s;
}
.soc:hover img:last-child {
opacity: 1;
}
<ul>
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/1/" />
<img src="//lorempixel.com/50/50/abstract/2/" /></a>
</li> <li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/3/" />
<img src="//lorempixel.com/50/50/abstract/4/" /></a>
</li>
</ul>
Pure CSS
If we apply the default image as the background-image: url() of all a.soc elements, and give them all an :after pseudo element holding the second image to show on :hover (and optionally (and ideally for accesibility) :focus), we can then transition the opacity of the :after element to 1 on user interaction, and at full opacity it will cover/hide its parent's background-image.
The effect is as expected, but requires no <img> markup and is automatically applied by the magic of CSS to every link with class="soc".
.soc,
.soc:after {
display: inline-block;
width: 32px;
height: 32px;
background: url( https://lorempixel.com/32/32/cats );
}
.soc:after {
opacity: 0;
content: "";
position: absolute;
background: url( https://lorempixel.com/32/32/food );
transition: opacity 800ms; /* timing can be in seconds or milliseconds */
}
.soc:hover:after,
.soc:focus:after {
opacity: 1;
}
<ul>
<li><a class="soc" href="some-link-here" target="_blank"></a></li>
<li><a class="soc" href="some-other-link-here" target="_blank"></a></li>
<li><a class="soc" href="another-link-here" target="_blank"></a></li>
</ul>
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 have a sentence composed of multiple span elements:
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
When a span gets clicked (:active), I want it to have an increased font but without moving the elements around it horizontally.
Idle
Second word :active
I don't want any Javascript involved (to compute the :active width of the element, or some hack like this), only CSS. A solution would be to add right/left padding by default and suppress it when a word is :active, but it doesn't work for all word lengths: http://jsfiddle.net/Ampwt/1/
Any idea of how I could achieve this?
Apply width and height to your span. Please see sample css.
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
width: 170px;
height:30px;
}
.sentence span:active {
font-size:2em;
}
Use transform: scale(): http://jsfiddle.net/Ampwt/2/.
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
<br />
<span class="sentence">
<span>First</span>
<span>very long word</span>
<span>third.</span>
</span>
CSS:
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
padding:0 1em;
}
.sentence span:active {
-webkit-transform: scale(2);
transform: scale(2);
}