I have a CSS marquee, and it runs good, but is not 100% smooth.
Can I edit the code below to run more smooth?
I have tried different animation: marquee Xs linear infinite speeds, but no luck.
<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px 'Verdana';
bottom: 0px;
left: 0px;
height: 10%;
}
</style>
HTML
<p class="scroll marquee"><span id="scrolltext"></span></p>
add id="marquee" to your span. remove the animation line from css and add this javascript at the end of your code:
var marqueePosition = 0;
var speed = 10; //smaller number means faster movement
var e = document.getElementById('marquee');
function moveMarquee() {
marqueePosition--;
if(marqueePosition < (-1*e.offsetWidth)) marqueePosition = 0;
e.style["-webkit-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-moz-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-ms-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-o-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["transform"] = "translate("+marqueePosition+"px, 0px)";
window.setTimeout(function() {
requestAnimationFrame(moveMarquee);
}, speed);
}
moveMarquee();
it is because of a long time setted in animation. you need to change the time to make it smoother. but it depends on the width of the marquee too. I suggest to you using the javascript to do this.
if you set that it should ride for example 200px in 10 seconds it cant be smooth as there is a small framerate :D in JS you can set the speed independently on the marquee width
Related
I try to make the alert boxes overlap on my content but every time it always shows and pushes down my content.
I do not have a z-index anywhere else also change position everything absolute, relative, and fixed but nothing working One time it was working then when I saved it's gone.
here is my code.
return (
<Alert
dismissible
show={this.state.show}
variant={variant}
onClose={this.handleClose}>
<div className='container'>
<Alert.Heading>{heading}</Alert.Heading>
<p className='alert-body'>{message}</p>
</div>
</Alert>
)
}
}
.alert {
align-items: center;
animation: .5s ease-in-out 0s 1 light-bounce-in;
bottom: 1rem;
display: flex;
// left: 0;
margin: auto;
max-width: 30rem;
position: absolute;
top: 30px;
left: 20px;
right: 20px;
// right: 0;
z-index: 1;
.alert-body {
margin: auto 0;
}
}
.close {
&:active,
&:focus {
outline: none;
}
}
#keyframes light-bounce-in {
0% {
opacity: 0;
transform: translateY(20%);
}
50% {
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
z-index: 1 seems to be a low value. Try something like z-index: 100 or z-index: 1000 or more. I'd check names of classes also.
I need to replace a vertical scroller with a CSS equivalent, for compliance reasons. The replacement needs to be a 100% high marquee, scrolling vertically at a fixed speed.
This example does what I need it to with three exceptions: https://codepen.io/strongpom/pen/qmooZe
I've tried using the code linked above, but find a way to accommodate the following three requirements:
(1) I need it to be 100% high, and for the text to scroll from the top to the bottom.
(2) I can't specify the length of the slider div, because it will be determine by (variable) contents. This means I cant set absolute scroll positions, other than that the top of the div should start at the bottom of the viewport, and keep scrolling until the bottom of that div hits the top of the viewport.
and
(3) The scrollspeed cannot be fixed at e.g. 15 seconds, because if there's lots of content, it then scrolls too fast, whilst if there's little content, it scrolls too slowly. I need to be able to specify a fixed scrolling speed, independent of length.
.container {
width: 20em;
height: 10em;
margin: 2em auto;
overflow: hidden;
background: #ffffff;
position: relative;
}
.slider {
top: 1em;
position: relative;
box-sizing: border-box;
animation: slider 15s linear infinite;
list-style-type: none;
text-align: center;
}
.slider:hover {
animation-play-state: paused;
}
#keyframes slider {
0% { top: 10em }
100% { top: -14em }
}
.blur .slider {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
}
.blur:before, .blur::before,
.blur:after, .blur::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
width: 100%;
height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}
.blur:after, .blur::after {
bottom: 0;
transform: rotate(180deg);
}
.blur:before, .blur::before {
top: 0;
}
p {
font-family: helvetica, arial, sans serif;
}
<div class="container blur">
<ul class="slider">
<li><p> Hello, it's me</p></li>
<li><p> I was wondering if after all these years you'd like to meet</p></li>
<li><p>To go over everything</p></li>
<li><p> They say that time's supposed to heal ya</p></li>
<li><p> But I ain't done much healing</p></li>
</ul>
</div>
I could not find a pure CSS way to have a consistent speed, but with a little math and small javascript, you can achieve fixed speed with variable height items. The key factor below is the / 500 which is in pixels per second. The code below will scroll at approx 500 px per second, no matter the length of the items.
Height can accommodate your design.
This will loop smoothly according to your request.
The scroll speed is what you determine regardless of length.
The javascript/css is verbose for readability.
CodePen - If still available, otherwise code below.
HTML
<ul class=slider>
<li>Item</li>
...
</ul>
CSS
* { padding: 0; margin: 0; box-sizing: border-box; }
body { overflow: hidden; height: 100%; }
.slider {
position: absolute;
list-style-type: none;
text-align: center;
animation: slider linear infinite;
}
.slider li { line-height: 50px; width: 100vw; }
#keyframes slider {
0% { transform: translateY(100vh) }
100% { transform: translateY(-100%) }
}
JS
window.onload = function() {
var lineHeight = document.querySelector(".slider li").clientHeight;
var viewHeight = window.innerHeight;
var slider = document.querySelector(".slider");
var time = (slider.offsetHeight * 2.0 + viewHeight * 2) / 500.0;
slider.style.animationDuration = time + "s";
}
I'm trying to learn CSS animations and one thing I can't figure out and couldnt find on the web is how to set the proper duration.
I'm trying to have my website responsive therefore the font size would change depending on the size of the view. I have the following code so far:
#media screen {
.EntranceDiv{
top: 40%;
position: relative;
}
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld{
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid #D9FAFF; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .8em;
display: inline-block;
animation:
typing initial steps(30, end),
blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #D9FAFF }
}
#keyframes typing {
from { width: 0 }
to { width: 65% }
}
}
My problem is that with the changes in the font size, the animation either goes for too long or for too short and then the whole thing just pops on the screen. What is a good way of setting duration for responsive animations
Your main issue here is that the width you set is relative to parent container so it has no relation with the content of your inline-block element. You need to find a way to correctly set the width of the element.
Since you cannot make a transition to width:auto, here is an idea where I duplicate the content and I use a pseudo-element with absolute position. The first content will define the width and will be hidden and the second one will be visible and I can stretch to fit the defined width using left/right properties:
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld {
letter-spacing: .8em;
display: inline-block;
position:relative;
visibility:hidden;
white-space: nowrap;
}
.helloworld:after {
content:attr(data-content);
display:block;
visibility:visible;
overflow: hidden;
white-space: nowrap;
position:absolute;
top:0;
left:0;
bottom:0;
right:100%;
border-right: .15em solid #D9FAFF;
animation: typing 2s steps(30, end) forwards, blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: #D9FAFF
}
}
#keyframes typing {
from {
right:100%
}
to {
right: 0%
}
}
}
<h1 data-content="lorem" class="helloworld">
Lorem
</h1>
<h1 data-content="lor" class="helloworld">
Lor
</h1>
<h1 data-content="lorem ipsume" class="helloworld">
Lorem ipsume
</h1>
it's been a long time I've last coded in html and css, that was before that lovely html5 and css3. So, in the early 2000's we made a logo in gif, what was so cool, and I've just found it on my PC. It would be nice to convert to pure css, instead of limited-size-gif but I have no idea how to start it.
Here is my animated gif
Could you give me first impressions, which css3 attributes should I choose for it?
Thanks
You will want to use the animation property with custom keyframes probably. Here is a rough example. I didn't spend much time on the animation. Thats your job ;)
https://codepen.io/bygrace1986/pen/POypXX
HTML
<div class="logo" data-logo="wp"></div>
CSS
.logo {
position: relative;
width: 2em;
height: 2em;
font-size: 5em;
font-family: arial;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
.logo::before, .logo::after {
content: attr(data-logo);
position: absolute;
z-index: -1;
left: 0;
}
.logo::before {
color: red;
animation: rotate 1s infinite;
}
.logo::after {
color: black;
animation: rotate 1s infinite reverse;
}
#keyframes rotate {
0% {
left: 0;
top: 0;
}
25% {
left: 10%;
}
50% {
top: 10%;
}
75% {
left: 0;
}
100% {
top: 0;
}
}
I have made the following animation:
Fiddle
If you have a big retina display (on small mac retina it's also bugged) - see that it looks pretty good, but if you take it to a non-retina display, it looks kinda blurry and rectangle-d instead of round cornered.
If you don't have retina display (or mac laptop) - you can use devtools and slow down the animations to 10% and see that it behaves correctly when slowed down, but on normal speed it looks different.
Update Problem appears to be mainly in Chrome, FF works well.
Brevity CSS:
.container {
width: 700px;
height: 128px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
.ripple-container {
width: 100%;
height: 100%;
background-color: #F5B30C;
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
background-color: blue;
top: 0;
right: 0;
height: 3px;
width: 3px;
border-radius: 50%;
transition: transform 1s;
&.rippler-active {
transition: transform 0.5s;
transform: scale(500);
}
}
}
Instead of scaling from 1 to 500 (which creates all sort of underground evil bugs)...
Scale from 0 to (say) 3, but than instead of setting the initial size to 0 (or 3px) you need to set to some huge size like 1400px.
A ripple of 1400px * 3 scale = means it can scale up to 4200px which is I think more than enough for any purpose:
var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');
el.addEventListener('click', function() {
ripple.classList.toggle("ripple-active")
});
.container {
height: 128px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
}
.ripple-container {
width: 100%;
height: 100%;
background-color: #F5B30C;
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
background-color: #3f3fd8;
top: 0;
right: 0;
height: 1400px;
width: 1400px;
/* Notice the size!! */
margin: -700px -700px auto auto;
/* and set here the desired offset */
border-radius: 50%;
transition: transform 2s;
transform: scale(0);
}
.ripple.ripple-active {
transition: transform 2s;
transform: scale(3); /* 1400 * 3 !!! yey */
}
<div class="container">
<div class="ripple-container">
<div class="ripple"></div>
</div>
</div>