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>
Related
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.
I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!
A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>
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 a box I would like to move around the corners of the window.
For that I'm using a jQuery attr function on click which takes the box to said corner by altering the class.
The problem here is that I can't get the div to transition between locations on click. My first guess is that the added classes have the coordinates written with top, bottom, left, right tags whereas the original box's css does not contain such parameters. Thing is that if I add the params, the transition sure works, but the box doesn't go where I'd wish it to go. Play around with the pen and you'll see what I'm talking about.
Here's the css of elements:
#menu {
position: absolute;
background: #c5;
width: 160px;
height: 160px;
-webkit-transition: all 2s; // Chrome
-moz-transition: all 2s; // Mozilla
-o-transition: all 2s; // Opera
transition: all 2s;
overflow: hidden;
border-radius: 50%;
}
.topleft {
top: 0 ;
left: 0;
}
.topright {
top: 0;
right: 0;
}
.bottomleft {
bottom: 0 #I;
left: 0 #I;
}
.bottomright {
bottom: 0 #I;
right: 0 #I;
}
.link {
width: 80px;
height: 80px;
float: left;
}
The jQuery is a simple, on click add alter this or that class
$("#m1").click(function(){
menu.attr('class', 'bottomright');
}); //this times four
You for more details check
THE PEN
It's been 5 hours of trying different things out, and now I'm out of ideas. So if anyone has a better clue on how to get this to work, it would be gladly appreciated.
ps. Google didn't help
The trick is to transition on the same values- you can't transition left to right, but you can left to left. Then the only thing fighting you is LESS's compilation of Calc() calls.
Only included the interesting parts here, rest are on the codepen.
http://codepen.io/anon/pen/OMWeqY
#menu_w: 160px;
#menu_h: 160px;
#menu {
position: absolute;
top: 0;
left: 0;
width: #menu_w;
height: #menu_h;
transition: all 2s;
}
#menu.topleft {
top: 0;
left: 0;
}
#menu.topright {
top: 0;
left: ~"Calc(100% - " #menu_w ~")";
}
#menu.bottomleft {
top: ~"Calc(100% - " #menu_h ~")";
left: 0;
}
#menu.bottomright {
top: ~"Calc(100% - " #menu_h ~")";
left: ~"Calc(100% - " #menu_w ~")";
}
Don't mind the random /**/ on the codepen, that's vestigial from when I was freaking out over Calc() not working as expected (never really dealt with LESS before). Really not sure why LESS would interpret Calc(100% - 160px) as what it interprets it as, but then, I'm not the designer of LESS.
Not sure why the other two comments did it via margins and a ton of jQ mucking. Something something jQ shoehorning obsession. I'd suggest de-marrying this from jQ as well, but I don't know if anything else on the page uses it, and jQ's pretty lock-in once you start.
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;
}