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
});
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
im triying to center this element in the screen, and also when i hover.
In my example below, the div is not centred, even when i hover it knowing that i made the transform 50% and top/left too, that's what i use uselly to center an element.
* {
box-sizing: border-box;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: scale(.2) translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
the bug is in :hover selector because without translate() inside the transform, you basically reset it to 0 which isn't what you want.
because it will forget what was before and override it.
here is a simple solution here:
❌
.zoom:hover {
transform: scale(1.5);
}
✅
.zoom:hover {
transform:
scale(1.5)
translate(-50%, -50%); /* add this */
}
here is a simple explanation here:
Modern solution (less code):
using CSS grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
with place-items it will center it automatically without the need for any transform or position... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
also, you don't have to 0.2 the scaling at the start, just start at scale(1) and then make it bigger with a bigger scale in hover like 4 for example. (so it won't create that bug at the start of from 200px to 0.2scale transition without any hover)
however, if you want to make the CSS work also in IE and older browsers then is good to use position, and translate, top, left...
but your users are using a modern browser, so for readability and making a simpler use of flexbox or grid can be a great idea.
for any further info use https://caniuse.com (for example grid is 95% supported by any browser from 2020 one, and in chrome from 2017)
here the CSS grid solution
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
margin: 0;
}
.zoom {
background-color: green;
width: 50px;
height: 50px;
transition: transform 0.2s;
}
.zoom:hover {
transform: scale(4);
}
<body>
<div class="zoom"></div>
</body>
Keep in mind the order of the transforms determines how the element appears. You first move the element top: 50%; left: 50%;, which puts it in the bottom right quadrant. Then you make it smaller transform: scale(0.2) and then you move it left by 50% of its now smaller size translate(-50%, -50%).
By placing the translate first, the element is centered before becoming smaller. Remember to also include the translate(-50%, -50%) when you increase the size, as the consequent translates will overwrite the current one, not add to it.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(.2);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
Put translate(-50%, -50%) before scale(0.2). Also, you need to include the translate(-50%, -50%) in your hover rule, otherwise it scales, but resets the translate part to its default.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
position: relative
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(0.2);
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5);
/* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5);
/* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
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.
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;
}