So I have been practicing web development for the last couple of months, and I want to try adding some flare to a portfolio site.
I have a header with my name, and I want to animate the 'b e n' and the 'u s t e d' coming out from the L (or the '|' in this case). Should I do this through code, or is there a norm for this kind of task?
Logo that I want to animate
One way of doing this is to put the name into a 3 column grid so that the 'l' stays in the same place as the other items are animating.
As you want a smooth reveal rather than a typewriter effect it's not necessary to animate each character individually.
This snippet puts them into another element and animates that. The left hand one goes from right to left and the right hand one from left to right by increasing the width from 0.
Note: this snippet cheats in a way as it uses a monospace font. For a variable font then you can use the same technique but need to make some decisions about how much space to allow each column.
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: 3ch 1ch 5ch;
font-family: monospace;
font-size: 4em;
grid-gap: 0;
}
.reverse {
text-align: right;
}
.reverse span {
--w: 3ch;
right: 0;
}
.forwards span {
--w: 5ch;
left: 0;
}
span {
animation-name: appear;
animation-duration: 10s;
animation-iteration-count: 1;
display: inline-block;
animation-fill-mode: forwards;
width: 0;
opacity: 0;
overflow: hidden;
position: relative;
}
#keyframes appear {
0% {
width: 0;
opacity: 1;
}
100% {
width: var(--w);
opacity: 1;
}
}
<div class="container">
<div class="reverse">
<span>ben</span>
</div>
<div class="l">L</div>
<div class="forwards">
<span>usted</span>
</div>
<div>
Related
I have a website that basically has 2 pages. In total, there is 3 sections, with the first page showing the left and the middle, and the second showing the middle and the right. I'm wondering if there is a simple way to transition horizontally between the 2 pages. It would look something like this with the transition:
An extra problem comes when you need to resize the window. In that case, section A and C should get bigger and the transition should change accordingly while B is fixed width.
I think the best way is to create a single page because the loading breaks the immersion, but if it is simpler to create 2 pages because of the responsive web design then its fine. The easiest way I could think of is to move the user camera sideways, but the responsive web design complicates it.
Once we know the width of B we can set the whole thing up to be in columns.
This snippet uses grid to do this with the first and third items taking up any remaining space in the viewport.
By using CSS calc to ascertain the amount that has to be translated to move back and forth the whole thing is responsive and will adjust to different viewport/device widths.
* {
margin: 0;
}
body {
overflow: hidden;
}
button {
position: fixed;
z-index: 1;
}
.container {
/* set the width of the second item */
--bW: 200px;
width: calc(2 * (100vw - var(--bW)) + var(--bW));
height: 100vh;
display: grid;
grid-template-columns: 1fr var(--bW) 1fr;
transform: translateX(0);
transition: transform 1s ease;
overflow: hidden;
}
.slid {
transform: translateX(calc(-100vw + var(--bW)));
}
.container>* {
height: 100%;
display: inline-block;
}
.container> :nth-child(1) {
background: magenta;
}
.container> :nth-child(2) {
background: purple;
}
.container> :nth-child(3) {
background: teal;
}
<button onclick="document.querySelector('.container').classList.toggle('slid');">CLICK ME TO SLIDE</button>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Wondering what library can make this kind of text ghosting animation?
Thanks
The "Fade Out Top" effect from http://cssanimation.io/ seems pretty similar. You can "absolute" position two layers of your text on top of each other and then run the animation only on one of them to create the "ghost" effect. Here's the original CodePen by cssanimation.io: http://codepen.io/cssanimation/pen/YpPXjR
And here's a fork with the two layers I was suggesting: http://codepen.io/anon/pen/YVNNGw/
<div class="container">
<h1 class="layer1">cssanimation</h1>
<h1 class="layer2 cssanimation fadeOutTop">cssanimation</h1>
</div>
and the CSS:
body {overflow: hidden;}
.container { font-family: 'Ubuntu', sans-serif; position: relative; height: 300px; } /* center text styling */
h1, .link { font-size: 4.5em; letter-spacing: -4px; font-weight: 700; color: #7e2ea0; text-align: center; } /* h1 styling */
#media screen and (max-width: 488px) { h1 { font-size: 2.6em; letter-spacing: -2px; } } /* control h1 font size below 768px screen */
/* animation duration and fill mode */
.cssanimation {
animation-duration: 1s;
animation-fill-mode: both;
display: inline-block;
}
/* fadeOutTop animation declaration & iteration counting */
.fadeOutTop { animation-name: fadeOutTop }
/* fadeOutTop animation keyframes */
#keyframes fadeOutTop {
from { opacity: 1 }
to {
opacity: 0;
transform: translateY(-100%);
}
}
.layer1 {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.layer2 {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
Did you try opening up the web inspector and seeing for yourself how bitly.com does it? Often the best way to learn is by imitating the work of others.
As you can see it is quite simple. When the user clicks the button, an element is created - the sole purpose of which is to provide the "ghosting" animation that you describe. Then it disappears when the animation is complete.
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I have made a very basic quote "carousel" to display customer quotes on a website by making the elements visible one at a time.
The quotes are absolutely positioned inside a container over each other then made visible accordingly. How can i make the parent container the height of the tallest quote (plus padding) without having to put a fixed pixel height on the container as technically the parent container is now empty. with css only.
<div class="parent-container">
<div class="quote child-element">Lorem Ipsum</div>
<div class="quote child-element">Lorem Ipsum</div>
<div class="quote child-element">Lorem Ipsum</div>
</div>
I will be adding media query breakpoints for the text at a later stage.
https://jsfiddle.net/vkchxz3q/
I assume you're trying to have the text center vertically in a fixed height. To do this you can use the table property for display with vertical align, browser support ->
http://caniuse.com/#search=css-table
#fader {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
Example:
https://jsfiddle.net/vkchxz3q/31/
To make the height dynamic just take away the height on #fader
https://jsfiddle.net/vkchxz3q/33/
I would remove position:absolute;, then work out what height the container should be, and the apply absolute positioning in your interval.
https://jsfiddle.net/vkchxz3q/35/
var s, q, l;
s = $('#fader');
q = s.children('blockquote');
l = q.length;
var i = 0;
setInterval(function() {
q.eq(i).removeClass('active');
i == l - 1 ? i = 0 : i++;
q.eq(i).addClass('active').css('position', 'absolute');
}, 10000);
var intHeight = 0;
q.each(function() {
if ($(this).outerHeight() > intHeight) {
intHeight = $(this).outerHeight();
}
});
$('#quote-container').height(intHeight);
* {
box-sizing: border-box;
}
#quote-container {
width: 100%;
padding: 40px;
height: 300px;
/* Definative Height */
background: #353535;
}
#fader {
display: block;
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
blockquote {
visibility: hidden;
top: 0;
left: 0;
font-family: Helvetica, sans-serif;
font-size: 2em;
color: #fff;
text-align: center;
opacity: 0;
margin: 0;
}
blockquote span {
display: block;
font-size: .6em;
font-style: italic;
margin-top: 10px;
}
.active {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 1.5s ease-in;
transition: opacity 1.5s ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote-container">
<div id="fader">
<blockquote class="active">Sometimes it is better to just walk away from things and go back to them later when you’re in a better frame of mind. <span>- Joe Blogs, Blogs Incorperated</span>
</blockquote>
<blockquote>If you like tuna and tomato sauce- try combining the two. It’s really not as bad as it sounds. <span>- John Smith, Kansas Kyak Club</span>
</blockquote>
<blockquote>Last Friday in three week’s time I saw a spotted striped blue worm shake hands with a legless lizard. <span>- Jon Doe , Riverford Farm</span>
</blockquote>
</div>
</div>
Make all of the elements have a great negative margin-left when they're not .active and float to one side instead of using absolute positioning. Then give their container, #quote-container, overflow: auto; to make it account for floating elements' height.
https://jsfiddle.net/vkchxz3q/36/
I have come to a solution using float: left; instead of position: absolute; and applying margin-right: -100%; see jsfiddle.
#fader{
position: relative;
}
.quote{
float: left;
margin-right: -100%;
}
https://jsfiddle.net/vkchxz3q/45/
Thanks for the suggestions and help.
Would be nice to include some vertical alignment in a future revision, please feel free to update the jsfiddle
I have an idea for a banner on my new site but I cant figure out how to do it or where to start so any help would be greatly appreciated.
Here's what im thinking:
I have three circle images and some text that i want to slide onto the screen from the left to right using an animation.
The first animation would be for some text and a circle to slide in from the left hand side of the screen.
The second animation would be for the text that is currently on the screen to slide right and fade away just before it hits the already existing circle image and for new text to slide in at the same time. Along with the text a second smaller circle would slide in and stop on top of the old bigger one.
The third animation would just be a repeat of the second animation but with a smaller circle image.
Example:
Again any help would be great and sorry for any previous confusion.
Many thanks Crackruckles.
You may wanna look at jquery ui toggle().
Simple example here https://jquerytipsntricks.wordpress.com/2013/07/21/slide-toggle-from-right-to-left-and-left-to-right-using-jquery-ui/comment-page-1/
Here is a similar one, you can just do some work around to fit your taste.
Sample
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
CSS:
#keyframes toright {
from {
right: 600px;
}
to {
right: 0;
}
}
.container {
padding: 0;
height: 100px;
width: 600px;
border: 1px solid red;
vertical-align:middle;
position: relative;
}
.container div {
display: inline-block;
background: rgba(0,0,255,0.3);
border-radius: 50%;
position: absolute;
right: 0;
top:5px;
}
.one {
width: 70px;
height: 60px;
animation: 1s toright ease;
}
.two {
width: 60px;
height: 50px;
animation: 1.3s toright ease;
}
.three {
width: 50px;
height: 40px;
animation: 1.5s toright ease;
}