I found a css code to make a text sliding on my webpage from right to left, I found that I can adjust the speed of the slide in this line "animation: scroll-left 20s linear infinite;" where I can change the "seconds" argument.
But I would like the text to be repeated, i.e something like this:
Please read this page Please read this page Please read this Please read Pl
instead of:
Please read this page
where one have to wait that the text finish the line to come back again.
Here is my code for now:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll-left p {
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: scroll-left 20s linear infinite;
-webkit-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
<body>
<div class="container">
<br><br><br><br><br><br><br><br><br><br>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="scroll-left">
<p>Please read this page </p>
</div>
</div>
</div>
</div>
</body>
</html>
I have tried all the options of this css code, but no one makes what I need.
Thank you
There are so many alternatives through which you can accomplish your job like marquee css and javascript etc. According to your requirement you need a custom code like css and js as well.
Please check the link. this is what you need.
http://jsfiddle.net/roine/TCJT4/
Hope this helps!
Based on your request of a pure css solution, there's no other way to duplicate the text without appending a new one or using javascript:
.scroll-left p:before, .scroll-left p:after{
content: 'Please read this page';
margin: 0 20px;
}
Related
I have to simulate a "wind blow on a plate" and researching a little I found the rotate property, but when I apply it it is rotating the whole image, as shown in the gif below.
However I expected to get something like the image below, but smoother.
Which property to use so that I keep the floor (part where the plate is stuck) in the fixed image?
Use transform-origin: bottom center.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
transform-origin: bottom center
}
#keyframes mymove {
0% {
transform: rotate(-20deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(-20deg);
}
}
</style>
</head>
<body>
<h1>Animation of transform</h1>
<p>Gradually rotate the element around the bottom center:<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
</body>
</html>
Found here: https://stackoverflow.com/a/6633676/13867483
i'm studying css3 animation from a playlist in youtube , i made a box comes from top and make swing
my problem is that when make a swing not starting where first animation left, here's the code :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box">
<span>X</span>
</div>
</div>
</body>
</html>
CSS :
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 200px;
margin:0 auto;
transform: translateY(100px);
background: red;
transform-origin: 10px 10px;
animation: box 2s forwards,mm 1s 3s linear forwards;
}
span{
border:2px solid yellow;
background-color: yellow;
}
#keyframes box {
0%{
transform: translateY(-200px);opacity: 0;
}
70%{
transform: translateY(150px);
}
100%{
transform: translateY(100px); opacity: 1;
}
}
#keyframes mm {
0%{
transform: translateY(100px);transform: rotateZ(0deg);
}
40%{
transform: translateY(100px);transform: rotateZ(90deg);
}
70%{
transform: translateY(100px);transform: rotateZ(70deg);
}
100%{
transform: translateY(100px);transform: rotateZ(75deg);
}
}
wheres the problem ?
here's the video that i watched for this animation: CSS Animation Tutorial #11 - Animating a Pop-up
you've done it wrong in 'mm' keyframes,
when you are writing transform, you are doing
transform: translateY(100px);
transform: rotateZ(0deg);
and this first transform property gets overridden by the second transform property (Cascading), so writing it like this would fix it.
#keyframes mm {
0%{
transform: translateY(100px) rotateZ(0deg);
}
40%{
transform: translateY(100px) rotateZ(90deg);
}
70%{
transform: translateY(100px) rotateZ(70deg);
}
100%{
transform: translateY(100px) rotateZ(75deg);
}
}
Checkout the codepen here
I'm trying to suss out the differences between the following cases--specifically why scale is preserved in the second div, but not the first.
Secondly why the similar code doesn't work for translate between the third and fourth divs.
(And, if that wasn't cryptic enough, why you have to reverse the animations in the first and third divs to make them run the correct direction).
Just Click on Each Div to Start Animations
#div1,#div2,#div3,#div4{position:absolute;height:40px;width:40px;background:orange}
#div2{background:blue;top:100px}
#div3{background:green;top:200px}
#div4{background:purple;top:300px}
#-webkit-keyframes scaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{--trnsS:2}
}
.scaleTest {-webkit-animation:scaleTest reverse forwards linear 5s}
#-webkit-keyframes otherScaleTest {
0%{-webkit-transform:scale(var(--trnsS,1))}
100%{-webkit-transform:scale(var(--trnsS,2))}
}
.otherScaleTest {-webkit-animation:otherScaleTest forwards linear 5s}
#-webkit-keyframes translateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{--trnsx:200px}
}
.translateTest {-webkit-animation:translateTest reverse forwards linear 5s}
#-webkit-keyframes otherTranslateTest {
0%{-webkit-transform:translate3d(var(--trnsx,0px),var(--trnsy,0px),0px)}
100%{-webkit-transform:translate3d(var(--trnsx,200px),--transy,0px)}
}
.otherTranslateTest {-webkit-animation:otherTranslateTest reverse forwards linear 5s}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="div1" onclick="javascript:this.className='scaleTest'"></div>
<div id="div2" onclick="javascript:this.className='otherScaleTest'"></div>
<div id="div3" onclick="javascript:this.className='translateTest'"></div>
<div id="div4" onclick="javascript:this.className='otherTranslateTest'"></div>
</body>
</html>
I'm only targeting the Webkit rendering engine, so I'm viewing the sample code in Chrome/Chromium.
Thanks for any input.
Short answer
Animating scale and translate with CSS variable is not treated differently.
There were some issues in your CSS that caused your animations to not work properly.
Explanations
To forward the values of the properties, they need to be present in the 100%{…} (or 0%{…} if reversed)
In the 4th div, in your otherTranslateTest, you used a new variable --transy (must be a typo-error for --trnsy !) without even using var(…). That caused the animation to not work at all. I've changed it to var(--trnsy, 0px) to make it work.
You don't need to reverse the animations. The above corrected your cryptic behaviours.
⋅⋅⋅
I've also added the below in the snippet to make it simpler (no need to re-run to re-play the animation) and more visual:
function toggle(name){
event.target.classList.toggle(name);
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
Working snippet
function toggle(name) {
event.target.classList.toggle(name);
}
div {
position: absolute;
height: 40px;
width: 40px;
}
div[class*="Test"] {
border-bottom: 3px solid red;
}
#div1 {
background: orange;
}
#div2 {
background: blue;
top: 100px;
}
#div3 {
background: green;
top: 200px;
}
#div4 {
background: purple;
top: 300px;
}
/* Animation of div1 */
#keyframes scaleTest {
0% {
transform: scale(var(--trnsS, 1));
--trnsS: 2; /* Added to work with forwards */
}
100% {
--trnsS: 2;
}
}
.scaleTest {
animation: scaleTest reverse forwards linear 5s;
}
/* Animation of div2 */
/* Why using an empty CSS var ? */
#keyframes otherScaleTest {
0% {
transform: scale(var(--trnsS, 1));
}
100% {
transform: scale(var(--trnsS, 2));
}
}
.otherScaleTest {
animation: otherScaleTest forwards linear 5s;
}
/* Animation of div3 */
#keyframes translateTest {
100% {
--trnsx: 200px;
}
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
--trnsx: 200px; /* Added to work with forwards */
}
}
.translateTest {
animation: translateTest reverse forwards linear 5s;
}
/* Animation of div4 */
#keyframes otherTranslateTest {
0% {
transform: translate3d(var(--trnsx, 0px), var(--trnsy, 0px), 0px);
}
100% {
transform: translate3d(var(--trnsx, 200px), var(--trnsy, 0px), 0px);
}
}
.otherTranslateTest {
animation: otherTranslateTest forwards linear 5s;
}
<div id="div1" onclick="toggle('scaleTest');"></div>
<div id="div2" onclick="toggle('otherScaleTest');"></div>
<div id="div3" onclick="toggle('translateTest');"></div>
<div id="div4" onclick="toggle('otherTranslateTest');"></div>
Hope it helps.
So, I have the snippet below and I'd like to add an anchor link to it. Unfortunately, there is no information on how to.
So, how do I add a link inside a data-marquee attribute?
<div class="marquee marquee-speed-normal"
data-marquee="Some text **I want to have a link in here** Some text">
</div>
Have a look at this...
An Anchor can in most cases be placed like this. There are loads of info out there with very little effort on finding them.
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right" scrolldelay="300">
This link will take you to a page with what you need to know
</marquee>
<marquee direction="right" scrolldelay="300">
And this is why you should try not to use it.
</marquee>
</body>
</html>
Try this then. From what i've seen, the easiest way was to turn the entire marquee into a link like below. The reason seems to be that data-marquee prints the data and won't represent anything else.
It would be great cool to see if there is another way other than that to display a link within the marquee.
<a href="#1">
<h1 class="marquee marquee-direction-alternate" data-marquee="HTML5 marquee"></h1>
</a>
If you don't come right, I also found this very useful. Here i have done the same with CSS. This is still widely supported.
*/The behavior is determined with CSS*/
<style>
.scroll-slow {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.scroll-slow p {
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: scroll-slow 25s linear infinite;
-webkit-animation: scroll-slow 25s linear infinite;
animation: scroll-slow 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes scroll-slow {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes scroll-slow {
0% {
-moz-transform: translateX(100%);
/* Browser bug fix */
-webkit-transform: translateX(100%);
/* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
/* Browser bug fix */
-webkit-transform: translateX(-100%);
/* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
*/ And then the anchor is done as follows */
<div class="scroll-slow">
<p>This is my link</p>
</div>
Ok Jim, a long shot
I Is this what you want to do?.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>jQuery Marquee Plugin Example</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
<style>
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
</style>
</head>
<body>
<div class="marquee">This is my link</div>
<script src="js/index.js"></script> </body>
</html>
index.js
$(".marquee").marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: "left",
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
On my website, a keyframes animation is supposed to tint in blue an image. But the position:fixed of the property making this very same image responsive seems to mess with the keyframes.
If I remove the position:fixed, the blue tint transition occurs. But when I put it back, the tint transition is white instead of blue.
For the codepen : click here
Is there any way to get both of these properties to work along ?
Here's the code :
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="hover-min.css" />
<link rel="stylesheet" href="main.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>
<script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="background.js" type="text/javascript"></script>
</head>
<body>
<div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
<img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
</div>
</body>
</html>
/* CSS */
img.nyc {
*position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
top:0;
left:0;
z-index:-1;
}
#opacity {
background-color: #428BCA;
display:inline-block;
}
#opacity img {
height : 300px;
opacity: 0.5;
-webkit-animation: animation 2s linear;
-moz-animation: animation 2s linear;
-ms-animation: animation 2s linear;
-o-animation: animation 2s linear;
animation: animation 2s linear;
}
#-webkit-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#-moz-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-ms-keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
#-o-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#keyframes animation{
from{
opacity: 5;
}
to{
opacity: 0.5;
}
}
Move the fixed positioning to #opacity:
#opacity {
position: fixed;
}
"#opacity" doesn't know how big it should become after you set it's child to position:absolute or position:fixed.
If you set
#opacity {
height : 300px;
width: 660px;
position: fixed;
background-color: #428BCA;
display:inline-block;
}
it will work again.
You will likely need some js-code to crop the parent to it's biggest child.(https://stackoverflow.com/a/2822685/5191731)