This CSS makes the text appear with a typewriter effect. However the issue is that because of the white-space: nowrap in the CSS it only shows the top line.
So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.
See the codepen for example.
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
#keyframes type{
from { width: 0; }
}
Are there any JS based solutions if it is not possible with pure CSS? I would like to not have to try to break up a paragraph into several <p> especially since the point at which there is a line break would get messed up when the width changed.
So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.
Based on the above statement, I assume that the question is about text spanning multiple lines even when the maximum possible width is given to the element (that is, changing just the width is not an option).
As I had mentioned in my comment, the thing with animations like this is that if you remove the white-space: nowrap, it won't work like a typewriter effect because the full text will start getting typed at the same time (as only the width is being animated) and it will result in a weird animation because when the width is small the text will wrap-around and when it increases the text will also move to previous lines.
The text needs to be restricted to a single line or it should be split into multiple p tags like in the below snippet. If neither of these can be done then you should look at using JavaScript (or any library).
body {
background: #000;
padding-top: 10px;
width: 500px;
border: solid white 1px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: type 4s steps(60, end) forwards;
}
p:nth-child(2) {
animation-delay: 4s;
}
p:nth-child(3) {
animation-delay: 8s;
}
p a {
color: lime;
text-decoration: none;
}
span {
animation: blink 1s infinite;
}
#keyframes type {
to {
width: 100%;
}
}
#keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}
<p>hi folks, this is typing animation using</p>
<p>CSS. But on the second line it never</p>
<p>shows up. The other lines get cut off.</p>
The below is what would happen if you just remove white-space: nowrap. You can see how it does not work like a typewriter anymore.
body{
background: #000;
padding-top: 10px;
width: 500px;
border: solid white 1px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
p:nth-child(2){
animation: type2 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
span{
animation: blink 1s infinite;
}
#keyframes type{
from { width: 0; }
}
#keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
#keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
<p>hi folks, this is typing animation using CSS But on the second line it never shows up. The other lines get cut off.</p>
If you are open to using a fully JS based approach for achieving this animation then you could follow the method used in this Fiddle. It is a customized version of the Fiddle contributed by Akshay. It uses a loop (based on setInterval) and then modifies the content of the element in every iteration. First it fetches only the first character of the content, then the first two, first three and so-on till the content is fully printed. The looping and the interval makes it look as though it is being typed out.
You can control the speed of the typing, the delay that is added between the typing of lines by passing the required values in the function call.
Try changing the the width of the body from 500px to 100%. Something like this below:
body{
background: #000;
padding-top: 10px;
width: 100%;
border: solid white 1px;
}
You can try this one
body{
background: #000;
padding-top: 10px;
width: 100%;
border: solid white 1px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 1px;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
DEMO HERE
Related
A good example of what I'm trying to achieve would be the ticker effect on https://aboutface.com
Based on another example I saw a while back I came up with this. But as you can see, the message crops and you don't see the 2nd message coming into the screen. The scrolling/visible area should span the width of the white box - or 12px from each side with the left/right padding.
https://jsfiddle.net/ho34yvtL/1/
Also, I guess this will be problematic on desktop as you'd need several more duplicate messages. Right now, if I could just display 1 message continuously that'd be great. But ideally I'd like to support multiple.
So basically I want text to scroll continuously across the screen with set spacing between each item. So you see multiple messages at the same time if space allows, unlike the old school marquee tag.
If what I'm trying to achieve isn't possible, is there a preferred method for this, a plugin or will it require complex/custom javascript?
Apply width:100% to .msg. If we want to apply a 12px padding on the left and right, we can use CSS calc() to subtract 24px from 100%.
Additionally, margin-left:50px can be applied to the messages to get that 50px spacing between the two.
The following example preserves the 12px padding in the container whilst maintaining 50px spacing between each item.
body {
background: red;
}
.page-head {
background: white;
box-sizing: border-box;
padding: 0;
position: fixed;
top: 0;
width: 375px;
}
/**
* Ticker
*/
.page-head__ticker {
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial";
font-size: 11px;
font-weight: Bold;
height: 36px;
line-height: 1;
padding: 0 12px;
text-transform: uppercase;
}
.msg {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
width:calc(100% - 24px);
}
.msg span {
animation: marquee 6s linear infinite;
display: inline-block;
padding-left: calc(100% - 24px);
margin-left:50px;
}
.msg--two span {
animation-delay:3s;
margin-left:50px;
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
<header class="page-head">
<div class="page-head__ticker">
<p class="msg"><span>Free Shipping on orders over $50</span></p>
<p class="msg msg--two"><span>Free Shipping on orders over $50</span></p>
</div>
</header>
One simple way to get a continuous scrolling effect is to have two copies of your messages and scroll with an animation just 50% of the total width. That way it is smooth - all the messages have gone through and it starts again, 'overwriting' the second copy.
Here's a snippet - it has 24px between the messages but of course such styling can be altered to suit what you want.
body {
background: red;
}
.page-head {
background: white;
box-sizing: border-box;
padding: 0;
position: fixed;
top: 0;
width: 375px;
}
/**
* Ticker
*/
.page-head__ticker {
font-family: "Arial";
font-size: 11px;
font-weight: Bold;
height: 36px;
line-height: 1;
padding: 0 12px;
text-transform: uppercase;
overflow: hidden;
}
.msg {
rmargin: 0 auto;
white-space: nowrap;
overflow: hidden;
animation: marquee 6s linear infinite;
display: inline-block;
}
span {
padding-left: 24px;
/* to give a gap between messages */
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
/* changed from 100% */
}
}
<header class="page-head">
<div class="page-head__ticker">
<p class="msg"><span>Free Shipping on orders over $50</span><span>And here is the second message</span><span>Free Shipping on orders over $50</span><span>And here is the second message</span></p>
</div>
</header>
If your messages are collectively too short to cover the window allocated to the marquee you may want to increase the gap between eg. with a bit of JS.
The design I'm working with includes a button hover that fills in the button with colour. Over this is text that on initial state is the same colour as the fill. As the fill proceeds, the colour of the text changes to a contrasting colour, but smoothly. Here is a still of the video the designer gave me that illustrates the issue:
You can see on the letter 'a' that it is two different colours. So I can't change the colour of the text letter-by-letter.
Is there any method (JS/Jquery/whatever/CSS), to achieve this? I'm thinking not, but maybe there is some way of animating a sharp gradient across the text? I don't know.
I actually did something similar for another question a while ago.
This can be achieved with mix-blend-mode. I also slowed the timing down to 5s so that you can clearly see how it works. Change that to 0.25s or whatever meets your needs when in use.
a {
position: relative;
text-decoration: none;
display: inline-block;
padding: 15px 30px;
border: 3px solid #f16251;
background: white;
color: black;
font-size: 30px;
font-family: arial;
mix-blend-mode: normal;
overflow:hidden;
z-index: 1;
}
a:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 100%; height: 100%;
background: white;
mix-blend-mode: difference;
transform-origin:0 0 ;
transform:translateX(100%);
transition: transform 5s;
z-index: 3;
}
a:hover:before {
transform: translateX(0);
}
a:after{
content: '';
display:block;
top: 0;
left:0;
bottom:0;
right:0;
position: absolute;
z-index: 100;
background: #f16251;
mix-blend-mode: screen;
}
WoOoOoOoT
I need to reduce the size of the label on focus fro the text to be entered. Bring it back to the same size if no text entered or on click somewhere else. Below is the code snippet I am trying.
div {
height: 50px;
width: 200px;
border-bottom: 1px solid black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:focus {
background-color: transparent;
width: 300px;
tansition: ease;
outline: 1px solid black;
}
label {
font-size: 20px;
}
<div tabindex="0">
<label>Three-colored border!</label>
</div>
Can this be achieved only in CSS or do i need to include any javascript or angular js?
I dont know how you intend to accept text using this div but to achieve the reduction of label font size, you can add div:focus label { font-size: 14px; } to your css and it'll reduce on focus.
div {
height: 50px;
width: 200px;
border-bottom: 1px solid black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:focus {
background-color: transparent;
width: 300px;
transition: ease;
outline: 1px solid black;
}
div:focus label {
font-size: 14px;
transition: font 1s ease
}
label {
font-size: 20px;
transition: font 1s ease
}
<div tabindex="0">
<label>Three-colored border!</label>
</div>
Update: font reduction now goes in transition with the div
Css is for styling the elements only. The problem is detecting if input is empty. You cannot analyze the element with css. For that You need JS. var size = $("input").text().length;
And in html put onfocusout function to check the size. <label onfocusout="fn()">Three-colored border!</label>
When putting it together
function fn() {
var size = $("label").text().length;
if (size>0) {
$("div").addClass("goodClass");
} else {
$("div").addClass("badClass");
}
}
And of course, those style included in classes.
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I currently have my text appearing when a user hovers over it in the following manner:
.item{
color: transparent;
font-weight: bold;
text-align: center;
}
And then in my JQuery over hover I set the color to black:
$(".item").hover(function () {
$(this).css("color", "black");
}, function () {
$(this).css("color", "transparent");
});
I ask however, if there is some sort of webkit-animation or some scrolling feature I am unaware of if I wanted to have the text when the div is hovered scroll from the bottom of the div into its place in the middle or at whatever location it resides at
I am looking at past answers and I am finding some very long and complicated answers for this and was hoping for something easy I am overlooking.
Using CSS transition
JS Fiddle
.item {
width: 300px;
height: 300px;
outline: 1px solid skyblue;
margin: 5px;
text-align: center;
}
.item .content {
position: relative;
top: 270px;
/* 270px top + 30px line height = 300px outer container height */
line-height: 30px;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover .content {
/* centering text vertically 135px top + 15px (line-height/2) = 150px half the container height */
top: 135px;
}
<div class="item"><span class="content">dummy text for test</span>
</div>