marquee CSS
-
Hello I need help to marquee the text widget of quotation in my site. Yet since HTML marquee code does not allowed here, is it possible to marquee the widget with CSS instead?
The text widget I’ve been referring is the one in the bottom of secondary sidebar.
Thank you in advance
The blog I need help with is: (visible only to logged in users)
-
No, CSS will not change the function of text within a widget, just the look of it. It cannot animate text.
-
By saying no, did you mean no way at all WP allow to do that?
What about this? https://en.forums.wordpress.com/topic/adding-marquees-to-widget?replies=3 -
-
Yup. So is it possible to do that? Can you explain to me how to do it? The tutorial is confusing and I’m sort of incapable of coding here. Thank you. Your help would be appreciated.
-
That link is the best explanation. Find HTML code somewhere online that creates scrolling text and put it in a text widget. Note that most dynamic text widgets use code that will be stripped out here; that’s why finding the right ones is a challenge.
-
Marque animation properties are still in development within CSS3, but WordPress.com does not yet support them. I’ve submitted the issue for our development team to monitor.
You can setup a marquee-like effect with the older CSS “animation” properties, if you’d to try that setup, though it’s a little complicated:
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
-
Marquee animation properties are still in development within CSS3
I tried testing CSS marquee examples I found online, and they didn’t work at all in Chrome 40. So I researched this a bit further and found that the “marquee” effect specification is no longer being developed. See http://www.w3.org/TR/css3-marquee/ Because of that, I don’t think CSS is a good solution for a marquee.
remehtemehmedia, if your end goal is to just call attention to some text, there are much better animations you can try. Have a look at http://daneden.github.io/animate.css/ and see if anything strikes you.
-
Thank you for all the replies.
designsimply, how exactly should I put the text in the sidebar with animation without using the text widget?
I try this code based on your reference. It wont work out. Would you mind to do the coding?
#text-17 .widget_text
:hover {
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}I thought animations could also be applied like the one I used in featured image, with a script like this.
.featured-image
:hover img {
-webkit-animation-name: shakeit;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: shakeit;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}@-webkit-keyframes shakeit {
0% {
-webkit-transform: rotate(0deg) translate(2px,1px);
}10% {
-webkit-transform: rotate(2deg) translate(1px,2px);
}20% {
-webkit-transform: rotate(-2deg) translate(3px,0px);
}30% {
-webkit-transform: rotate(0deg) translate(0px,-2px);
}40% {
-webkit-transform: rotate(-2deg) translate(-1px,1px);
}50% {
-webkit-transform: rotate(2deg) translate(1px,-2px);
}60% {
-webkit-transform: rotate(0deg) translate(3px,-1px);
}70% {
-webkit-transform: rotate(2deg) translate(-2px,-1px);
}80% {
-webkit-transform: rotate(-2deg) translate(1px,1px);
}90% {
-webkit-transform: rotate(0deg) translate(-2px,-2px);
}100% {
-webkit-transform: rotate(2deg) translate(-1px,2px);
}
}@keyframes shakeit {
0% {
transform: rotate(0deg) translate(2px,1px);
}10% {
transform: rotate(2deg) translate(1px,2px);
}20% {
transform: rotate(-2deg) translate(3px,0px);
}30% {
transform: rotate(0deg) translate(0px,-2px);
}40% {
transform: rotate(-2deg) translate(-1px,1px);
}50% {
transform: rotate(2deg) translate(1px,-2px);
}60% {
transform: rotate(0deg) translate(3px,-1px);
}70% {
transform: rotate(2deg) translate(-2px,-1px);
}80% {
transform: rotate(-2deg) translate(1px,1px);
}90% {
transform: rotate(0deg) translate(-2px,-2px);
}100% {
transform: rotate(2deg) translate(-1px,2px);
}
}Thank you, look forward to hearing from all CSS expert out there.
-
Would you mind to do the coding?
I am here to guide you but cannot always provide code for you. You should definitely be willing to work on the code yourself. Also, I admit that I have not used animations very much before and so I am learning too here.
Let’s step back. I saw an example at http://keggyskorner.com/ that I thought looked similar to what you want so I copied it and modified it. In the example below, the “#text-16 .widgettitle” selector is specific to your site—it affects the “Mixtape” heading in the top left widget in your left sidebar.
#text-16 .widgettitle { position: relative; animation: marquee 6s infinite linear; -webkit-animation: marquee 6s infinite linear; } @keyframes marquee { 0% { left: 100% } 100% { left: -100% } } @-webkit-keyframes marquee { 0% { left: 100% } 100% { left: -100% } }To apply the same CSS to a different text widget, you just need to look up the selector for it after you add it to your site. Here is a method you can use:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/Aside: be careful not to add too many animations at once as it could really slow down load times.
-
Thank you so much designsimply. I manage to do that with a lil bit tweak. Now, my next question would be: can I change the font of the text? In this case only apply to #text-17, not all text widget. I want to change it to monotype corsiva. And can I resize it, too? Thank you in advance. Sorry for too much asking. :)
-
Sure. Changing font size and settings a font stack shouldn’t be too hard for you to work out.
Here is a page on how font stacks work that I would recommend as a starting point about that:
http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/To apply changes to the specific text widget you mentioned, start by using “#text-17” as the selector and then use the “font-family” and “font-size” properties to make changes. Here are some related pages:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size -
-
@remehtemehmedia
@designsimply
et al.Excellent topic! As it so happens, I was planning to write my next post on exactly this topic. Will report back on what develops.
-
Here’s a demo of 2 simple ways to do this, with different div colors to show more clearly what is going on in the box model.
-
- The topic ‘marquee CSS’ is closed to new replies.
WordPress.com Forums 