I'm looking for a way to animate my text box so that it slides into frame from the right side at (x) amount of time. So far, I haven't found any online resources that could help me with this animation.
For now, I just have a simple (absolute) box.
.taskbox {
width: 230px;
padding: 15px;
position: absolute;
right: 25px;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
Note: Not too sure if this will require JavaScript, but I have preexisting functions for elements not involved in my question. If my script is needed, I'm more than happy to update my post.
Thanks in advance for your help!
This can be done with CSS only with animation you can specify a duration as well as a delay (in your case x). Paradoxically to make an element slide from the right it easier to positioned it with the left property. Like so…
.taskbox {
width: 230px;
padding: 15px;
left: 100%;
position: absolute;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
animation: slide-from-right .4s 2s forwards; /* x = 2s */
}
#keyframes slide-from-right {
to {
left: calc(100% - 230px - 30px - 25px);
/* 100% = total width, 230px = element width, 30px = left and right padding, 25px = distance from right border */
}
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
You could animate transform: translate:
.taskbox {
width: 230px;
padding: 15px;
position: absolute;
right: 25px;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
transform: translate3d(calc(100% + 25px), 0, 0);
animation: slide-in 0.5s 1s cubic-bezier(0.3, 1.3, 0.9, 1) forwards;
}
#keyframes slide-in {
to {
transform: translate3d(0, 0, 0);
}
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
In case you're wondering why I'm using translate3d, it triggers hardware acceleration. Check out this article if you're interested.
Related
I am currently working on a site to see how long until my next class and what it is and I am using some css to give it a "glitch effect"
Here is the css:
.glitch {
position: relative;
color: white;
font-size: 4em;
letter-spacing: 0.5em;
/* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 2px;
text-shadow: -2px 0 #ff00cc;
/* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
clip: rect(44px, 450px, 56px, 0);
/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -2px;
text-shadow: -2px 0 #00c8ff, 2px 2px #ff00cc;
animation: glitch-anim2 1s infinite linear alternate-reverse;
}
FULL CSS: link
In the html there is this part:
<div id="app">
<div id="wrapper">
<h1 class="glitch" data-text="test">test</h1>
<h2 class="glitch" data-text="time">time</h2>
</div>
</div>
I am able to edit the the actual text but not the data-text value. For the first one it works just fine since I just use this:
document.body.innerHTML = document.body.innerHTML.replace('test', jsonData['schedule'][0][day.toLowerCase()][0][checkperiod()[0]])
I come across the issue when using a sort of "countdown" thing to see how long until the next period. I cannot use replace() because what I would need to replace changes every second. My current ideas are either just replacing that part with some JavaScript or find a way to replace it as long as it fits the format (2 numbers a colon then 2 numbers). My issue is I am not sure how I would do this any ideas?
What it is currently doing:
(has the minutes and seconds but with the text "time" behind it.)
(this is just a still image it is moving.)
What I would like it to do:
(this is just a still image it is moving.)
Also if I remove where the time normally is it will not have the effect, it just needs to be changed.
Thanks in advance :D
Get a reference to the h1, and set the data-text to the new value, you can also set the innerHTML at the same time.
const theH1 = document.getElementById("wrapper").children[0];
// it's the first element child of the wrapper div
const theTime = "00:00:00";
theH1.dataset.text = theTime;
theH1.innerHTML = theTime;
You can just update the element attribute value for dataset data-text using Element.setAttribute(AttributeName, AttributeValue)..
Here's an example, but in your case you should use jsonData['schedule'][0][day.toLowerCase()][0][checkperiod()[0]] as the attribute value.
var element = document.getElementById("wrapper").firstElementChild;
element.setAttribute('data-text','00:00');
.glitch {
position: relative;
color: white;
font-size: 4em;
letter-spacing: 0.5em;
/* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 2px;
text-shadow: -2px 0 #ff00cc;
/* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
clip: rect(44px, 450px, 56px, 0);
/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -2px;
text-shadow: -2px 0 #00c8ff, 2px 2px #ff00cc;
animation: glitch-anim2 1s infinite linear alternate-reverse;
}
<div id="app">
<div id="wrapper">
<h1 class="glitch" data-text="test">test</h1>
<h2 class="glitch" data-text="time">time</h2>
</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 tried to recreate this transition that google uses for a couple of hours but I really don't know how to do it yet. The transition I'm talking about is that search bar bottom that becomes 2px thick from left to right. So: From that to a border-bottom of 2px with a nice transition.
A live preview of this transition can be found on: https://material.google.com/style/icons.html#
This is done via the :after-pseudo-element of the Search-label. This is it's CSS:
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.87);
bottom: 0px;
content: '';
height: 2px;
width: 10px;
left: 45%;
position: absolute;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
When you focus the box, the following CSS is applied:
left: 0;
width: 100%;
visibility: visible;
This gives the "center-based" animation you're looking for. I can build a fiddle to demonstrate the effect if you need.
EDIT:
Have a fiddle: https://jsfiddle.net/tf084pd1/
Here's the effect with the "double-border": https://jsfiddle.net/tf084pd1/1/
First of all, you can find a simplified demo of my code in this JSFiddle and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.
I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.
This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:
nextOrPrev, that runs one animation or another based on the value
provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev" animation, not yet used, just emits an alert("prev").
bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.
In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.
This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?
Thanks for any help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
//BUTTONS
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
//WRAP
$("body").wrapInner("<div id='bodyWrap'></div>");
//BINDS
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
//ANIMATION AND BODY CHANGE
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
//NEW STUFF
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
//END OF ANIMATION AND BODY CHANGE
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}
body{
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow:hidden;
margin: 0;
}
.text {
color: #FFFFFF;
font-family:Bebas Neue;
-webkit-user-select: none;
cursor: default;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.mainButton {
-webkit-transform:scale(1);
width: 200px;
height: 200px;
border: 10px solid #F1F2F0;
text-align:center;
background-color: #F37C2B;
/*background:#5F4A21;*/
display: table;
position: absolute;
margin: auto;
top: 150px;
bottom: 0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
}
.mainButtonText {
position: relative;
display:table-cell;
vertical-align:middle;
-webkit-transform:scale(1);
font-size: 90px;
text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
This problem is caused in your .mainButton class. Your code looks a little like this.
.mainButton {
position: absolute;
top: 150px;
bottom: 0;
//rest
}
By removing the line bottom: 0; your JSFiddle now works as expected. However, if you remove the line top: 150px; instead and leave in the bottom: 0 the problem still occurs. Unfortunately, I cannot provide an explanation for this. It might be worth posting a question on the GSAP forums inquiring about why this occurs works when positioning using bottom but not when using top
Edit
Since you need bottom: 0 and I wasn't able to fix your code I wrote an example which works using Timeline, a GSAP plugin. You can see this JSFiddle or the code example below.
var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
.set($("#click2"), {css:{display: "table"}}, "-=0.6")
.fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");
$("#click").click(function() {
tl.play();
});
$("#click2").click(function() {
tl.reverse();
});
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow: hidden;
}
div.one, div.two {
position: absolute;
bottom: 0;
height: 200px;
width: 200px;
background: #F37C2B;
text-align: center;
display: table;
cursor: pointer;
border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
position: relative;
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-family: Bebas Neue;
font-size: 90px;
}
div.two {
display: none;
border-color: transparent;
background: none;
}
div.two .text {
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="click" class="one">
<div class="text">
Play
</div>
</div>
<div id="click2" class="two">
<div class="text">
Second Menu
</div>
</div>
I'd like to make a menu bar on a website using a set of anchor elements. So far everything is exactly working as planned.
Now i want an image to follow the users selection. So the image is at the current active menu item, but when the user hovers their mouse to another menu item, the image will follow to that particular item.
I tried searching the web for it but i get a lot of simple hover effects, not the one I want. So maybe one of you can help me with an example or give me a push in the right direction.
My menu is made like this
<nav id="page-nav">
item #1
item #2
item #3
<!-- etcetera -->
</nav>
I'm now using CSS to make it into a menu bar.
a {
display: inline-block;
position: relative;
width: 156px;
height: 37px;
top: -1px;
text-align: center;
line-height: 41px !important;
color: #c3c3c3;
text-decoration: none;
text-shadow: 1px 1px 0px black;
text-transform: uppercase;
font-family: "Myriad Pro", "Calibri", sans-serif;
font-size: 16px;
letter-spacing: 1px;
}
I want the image to follow the users action. If i use the image as a background on the buttons, it is not possible to make it slide from one item to another...
Thanks!
demo
I made a little nub, but you can give it a background image, or replace it with an image, or whatever. It uses CSS transitions, so it will teleport on oldish browsers.
.blip {
position: absolute;
border-radius: 50%;
background: rgba(100, 100, 255, .4);
width: 40px;
height: 20px;
top: -10px;;
left: -100px;
-webkit-transition: left .5s ease-in-out;
-moz-transition: left .5s ease-in-out;
transition: left .5s ease-in-out;
}
If you don't want to use CSS transitions, replace the .css with .animate.
var $blip = $('.blip');
$('#page-nav>a').on('mouseover', function(){
$blip.css({
left: $(this).offset().left
- $(this).parent().offset().left
+ $(this).width() / 2
- 20 // 20 is one half of .blip's width
});
});
$('#page-nav').on('mouseout', function(){
$('.blip').css({left: -100});
});