At the moment I have a CSS autoscrolling text that looks like this:
.vscroll {
position: absolute;
height: auto;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 25s linear infinite;
-webkit-animation: scroll-up 25s linear infinite;
animation: scroll-up 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
This works, but it does look a bit choppy on some devices. So I am hoping it is possible to do something like this but with only CSS instead of jQuery: https://www.jqueryscript.net/demo/Vertical-Text-Scrolling-Plugin-With-jQuery-scrollText-js/
Is it possible?
Hope this will help (Sample).
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
font-size: 3em;
color: limegreen;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>
<!-- HTML -->
<div class="example1">
<h3>Scrolling text... </h3>
</div>
Related
The <marquee> tag is depreciated, so I am trying to implement a marquee with CSS (following this tutorial). Below is my HTML & CSS, and when you run it, you'll notice the website starts out as super wide with a scroll bar at the bottom, and the width of the website slowly decreases till the bar disappears. It also goes outside of the <div> block element.
How do I fix it so that it starts and finishes at the edges of the <div> block element without altering the width of the site?
.marquee{
background-color: black;
color: blue;
font-size: 3em;
margin-top: 2rem;
}
.myMarquee{
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: marqueeAnimation 15s linear infinite;
-webkit-animation: marqueeAnimation 15s linear infinite;
animation: marqueeAnimation 15s linear infinite;
}
#-moz-keyframes marqueeAnimation {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes marqueeAnimation {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes marqueeAnimation {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<!DOCTYPE html>
<html>
<head>
<link href = "index.css" rel = "stylesheet" type = "text/css" />
<meta charset = "utf-8" />
<title>Mainpage</title>
</head>
<body>
<div class="marquee">
<p class = "myMarquee">Scrolling Text</p>
</div>
</body>
</html>
Below is one way you could go about resolving the overflow issue you describe. The only real CSS properties of interest in this case are the max-width and overflow properties applied to the parent container.
max-width: 100% prevents your container from running beyond it's bounds and overflow: hidden clips the content so no scrollbars appear.
.marquee {
max-width: 100%;
overflow: hidden;
}
.marquee {
max-width: 100%;
overflow: hidden;
margin: 2rem auto;
font-size: 3em;
color: blue;
background-color: black;
}
.marquee__items {
display: flex;
align-items: center;
}
.marquee__item {
flex-grow: 0;
flex-shrink: 0;
margin: 0;
padding: 0 2rem;
list-style: none;
}
.marquee__item {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation: marqueeAnimation 15s linear infinite;
-moz-animation: marqueeAnimation 15s linear infinite;
animation: marqueeAnimation 15s linear infinite;
}
#-moz-keyframes marqueeAnimation {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes marqueeAnimation {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes marqueeAnimation {
0% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<section class="marquee">
<ol class="marquee__items">
<li class="marquee__item">Scrolling Text 01</li>
<li class="marquee__item">Scrolling Text 02</li>
</ol>
</section>
I'm trying to use the following code to objects float from left to right in the background. Unfortunately when it goes off screen a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I tried percentage (100% with the to transition) but it didn't work. I don't know it's supposed to? I was hoping someone could tell me how to fix this, if it is fixable using just CSS.
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
overflow-y:hidden;
}
.largest-slowest {
-webkit-animation: cssAnimation 12.7734s 16 linear;
-moz-animation: cssAnimation 12.7734s 16 linear;
-o-animation: cssAnimation 12.7734s 16 linear;
}
#-webkit-keyframes cssAnimation {
from {-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-100px);}
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
In addition to the comment above, you need to add overflow-y: hidden to the parent of .largest-slowest instead of to .largest-slowest itself. So if you don't want the window to scroll when .largest-slowest goes off the screen, your CSS should look something like:
body {
overflow-y: hidden;
}
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
}
I'm trying to get a bouncing mouse animation to work on my website.
The exact same code works on another website, whereas on mine it just doesn't do anything.
Here's the css:
.mouse {
display: block;
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 32px;
color: #fff;
z-index:9999;
position: absolute;
color: #e8e8e8;;
bottom: 240px;
}
.mouse i {
-webkit-animation: todown 1.2s infinite linear;
transition: all 0.3s ease-in-out;
}
The HTML:
<a href="#x11" class="mouse">
<i class="fa fa-angle-double-down icon-option"></i>
</a>
On this website you can see the scrolldown icon I'm trying to create: http://noxxar.com/demo/uralco/
If you want to use CSS animations you need to define #keyframes.
Luckily the CSS on the theme you linked isn't minified or anything, so you can just copy/paste the parts you want to recreate.
Since Firefox 15 the -moz vendor prefix isn't needed but Chrome and other Webkit Browser still need -webkit-animation: http://caniuse.com/#feat=css-animation
CSS:
#to-slider-scrollto i {
-webkit-animation: todown 1.2s infinite linear;
animation: todown 1.2s infinite linear;
}
#to-slider-scrollto i:hover {
-webkit-animation: none;
animation: none;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
10% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
50% {
-webkit-transform: translateY(0);
opacity: 1;
}
90% {
-webkit-transform: translateY(15px);
opacity: 0;
}
100% {
-webkit-transform: translateY(15px);
opacity: 0;
}
}
#keyframes todown {
0% {
transform: translateY(-15px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
90% {
transform: translateY(15px);
opacity: 0;
}
100% {
transform: translateY(15px);
opacity: 0;
}
}
Working codepen demo with only the needed CSS
Check out cross browser compatibility
.mouse i {
-webkit-animation: todown 1.2s linear infinite;
animation: todown 1.2s linear infinite;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
#keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
I am trying to make a part of my webpage animate once the page is fully loaded. The animation works perfectly on Internet Explorer 11 however it doesn't run on Chrome (version 31.0.1650.63 m) up to date version. The only time the animation actually runs properly on Chrome is if I reload the page, navigate away from the tab (So basically click on another tab that is open), wait for the page to load, then once I click back on the tab with the animation, the page then refreshes itself and loads the animation properly but if I reload the page and do not navigate away from the tab and simply wait for the page to load, the animation doesn't run. This seems really odd I and have no clue what to look for in the code because I assume it should work properly. Any clues??
Here's the css.
.mainpart
{
height:80%;
width:100%;
background-color:#eee;
white-space:nowrap;
z-index:10;
max-height:520px;
-webkit-animation: rotateInRight 4s; /* Safari 4+ */
-moz-animation: rotateInRight 4s; /* Fx 5+ */
-o-animation: rotateInRight 4s; /* Opera 12+ */
animation: rotateInRight 4s; /* IE 10+ */
}
#keyframes rotateInRight {
from {
transform-origin: 100% 0%;
transform: rotateY(-180deg);
}
to {
transform-origin: 100% 0%;
}
}
#-webkit-keyframes rotateInRight {
from {
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotateY(-180deg);
}
to {
-webkit-transform-origin: 100% 0%;
}
}
#-moz-keyframes rotateInUpLeft {
from {
-moz-transform-origin: 100% 0%;
-moz-transform: rotateY(-180deg);
}
to {
-moz-transform-origin: 100% 0%;
}
}
#-o-keyframes rotateInUpLeft {
from {
-o-transform-origin: 100% 0%;
-o-transform: rotateY(-180deg);
}
to {
-o-transform-origin: 100% 0%;
}
}
And here is the html with the mainpart class:
div class="mainpart" style="overflow: hidden; outline: none; background-color: transparent;" tabindex="5000" >
...........
</div>
This is working for me in Firefox, Chrome, and IE 10.
I cleaned up the CSS and removed the inline styles. Also, you were missing a < in the HTML.
http://jsfiddle.net/R4THN/
HTML:
<div class="mainpart" tabindex="5000">
...........
</div>
CSS:
.mainpart {
height: 80%;
width: 100%;
background-color: #eee;
white-space: nowrap;
z-index: 10;
max-height: 520px;
overflow: hidden;
outline: none;
background-color: transparent;
-webkit-animation: rotateInRight 4s; /* Safari 4+ */
-moz-animation: rotateInRight 4s; /* Fx 5+ */
-o-animation: rotateInRight 4s; /* Opera 12+ */
animation: rotateInRight 4s; /* IE 10+ */
}
#keyframes rotateInRight {
from {
transform-origin: 100% 0%;
transform: rotateY(-180deg);
}
to {
transform-origin: 100% 0%;
}
}
#-webkit-keyframes rotateInRight {
from {
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotateY(-180deg);
}
to {
-webkit-transform-origin: 100% 0%;
}
}
#-moz-keyframes rotateInUpLeft {
from {
-moz-transform-origin: 100% 0%;
-moz-transform: rotateY(-180deg);
}
to {
-moz-transform-origin: 100% 0%;
}
}
#-o-keyframes rotateInUpLeft {
from {
-o-transform-origin: 100% 0%;
-o-transform: rotateY(-180deg);
}
to {
-o-transform-origin: 100% 0%;
}
}
So, if you still having issues, it must be with something else on your page, not this code specifically.
I'm relatively new to CSS3 transform and keyframe animations so tend to stick to CSS generators or ripping other examples. I have modified the example shown here for my own purposes which works great in Chrome but not in FF or IE - http://webbb.be/blog/making-a-swinging-effect-with-css3-animations/.
See my example below (js fiddle included), in essence this is a swing effect on hover using perspective but the perspective doesn't seem to work in FF and IE.. I have only added the -moz- pre fix to the example below... any ideas?
a { display: block;
float:left;
text-indent: -999px;
overflow: hidden;
height: 100px;
width: 100px;
background: red;
cursor: pointer;
}
.perspective {
position: relative;
-webkit-perspective: 350;
-moz-perspective: 350;
width: 100px;
height: 100px;
}
.perspective .swing {
position: relative;
z-index:1;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
}
a.swing:hover {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#-webkit-keyframes balance {
25% { -webkit-transform: rotateX(-60deg); }
45% { -webkit-transform: rotateX(50deg); }
69% { -webkit-transform: rotateX(-30deg); }
90% { -webkit-transform: rotateX(30deg); }
100% { -webkit-transform: rotateX(0deg);}
}
#-moz-keyframes balance {
25% { -moz-transform: rotateX(-60deg); }
45% { -moz-transform: rotateX(50deg); }
69% { -moz-transform: rotateX(-30deg); }
90% { -moz-transform: rotateX(30deg); }
100% { -moz-transform: rotateX(0deg);}
}
http://jsfiddle.net/7ejF7/1/
You need to add px values for perspective to work on non-webkit browsers.
-moz-perspective: 350px;
http://jsfiddle.net/mZMGd/
Try to add the statement for none -webkit- or -moz- browsers.
i haven't tried it but it could be the solution.
transform-origin: top;
animation: balance 1.5s ease-in-out 110ms 1 alternate;
#keyframes balance {
25% { transform: rotateX(-60deg);}
45% { transform: rotateX(50deg); }
69% { transform: rotateX(-30deg); }
90% { transform: rotateX(30deg); }
100% { transform: rotateX(0deg);}
}
TJL